Question

我正在尝试向网页添加简单的评论/消息框。当用户输入注释并点击提交时，我想将此消息保存到数据库并将注释添加到页面上显示的列表中，而不刷新整个页面。

但是，我不确定这些日子最好的办法。我正在使用ASP.NET MVC 2.我一直在尝试使用JQuery来阅读这种类型的功能，但是我无法全面了解正确的方法，这种方法也不是过时的（即它是使用MVC 1或更早版本的JQuery的预览版本。

我可以找到不同部分的片段，但不知道它们如何一起工作的信息，或者信息似乎过时且不再有效。

有人能指出我正确的方向吗？

理想情况下，我正在寻找一个简单的JQuery代码示例，一个HTML表单中与普通post方法的任何关键差异的片段，以及MVC Controller中使用的基本方法。我需要一些东西来帮助理解的灯泡打开。：）

非常感谢任何帮助!!

Answer 1

我经常做类似

的事情

<form action="/controller/action" method="post" id="formID">
</form>

$("#formID").submit(function(){
  var form = $(this);
  $.post(form.attr("href"), form.serialize(), function(data){/*manipulate page*/}, "text")
  return false;
});

MVC控制器就像你没有使用Ajax一样，除了你可能会返回一个不同的视图 - 一个不包含整页标记的视图，具体取决于你想要从哪个数据获取服务器。您可能根本不需要返回任何数据 - 您的“操作页面”代码可能已经拥有它所需的所有信息。

Answer 2

您应该查看jQuery Form插件。您可以使用ajax将注释发布到控制器，保留注释，并返回带有JSON的bool。在jquery中，定义成功处理程序（请参阅示例选项卡）并在页面底部呈现注释。您还可以查看javascript模板（here是Microsoft的建议实现），如果您想要对如何呈现注释进行格式化控制（不会弄乱您的JS）。

Answer 3

有一个帮助方法，允许您创建一个启用Ajax的表单。本文应该可以帮助您入门：

http://msdn.microsoft.com/en-us/library/dd381533.aspx

Answer 4

对于您的评论系统，您可以尝试这样的机制：

如果你有这样的模特

public class Message
{
    public int Id {get;set;}
    public string Text {get;set;}
    public Comment[] Comments {get;set;}
}

public class Comment
{
    public int Id {get;set;}
    public string Text {get;set;}
}

在您的留言视图中

Message: 

<%: Model.Text%>
<div id="divComments">
    <% Html.RenderPartial("Comment",Model.Comments); %>
</div>
<% using(Ajax.BeginForm("AddComment", new{id=Model.Id}, new AjaxOptions{HttpMethod="POST",UpdatetargetId ="divComments" }))
   { %>
       <%: Html.TextArea("comment") %> 
       <input type="submit" value="Add comment" />      
<% } %>

在评论部分视图中

<% foreach(var comment in Model) { %>
    <li><%: comment.Text %>
<%}

在您的控制器中

public MessageController: Controller
{
    public ActionResult Message(int id)
    {
        using(MessageRepository messageRepo = new MessageRepository())
        {
            return View(messageRepo.SelectById(id));
        }
    }

    public ActionResult AddComment([Bind(Prefix="id")]int messageId, string comment)
    {
        using(MessageRepository messageRepo = new MessageRepository())
        {
            messageRepo.InsertComment(messageId,comment);

            if(this.Request.IsAjaxRequest())
                return View(messageRepo.SelectById(messageId).Comments));
            return RedirectToAction("Message", new{id=messageId});
        }
    }
}

使用ASP.NET MVC，Ajax化一个简单表单的首选方法是什么？

4 个答案: