使用 ASP.NET MVC，Ajaxify 简单表单的首选方法是什么？答案

【问题标题】：With ASP.NET MVC, what is the preferred way to Ajaxify a simple form?使用 ASP.NET MVC，Ajaxify 简单表单的首选方法是什么？
【发布时间】：2010-05-18 19:15:16
【问题描述】：

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

但是，这些天我不确定最好的方法。我正在使用 ASP.NET MVC 2。我一直在尝试阅读有关使用 JQuery 来实现此类功能的信息，但是在全面了解也没有过时的正确方法时遇到了问题（即它是使用 MVC 1 的预览版或更早版本的 JQuery）。

我可以找到不同部分的 sn-ps，但没有关于它们如何协同工作的信息，或者这些信息似乎已经过时并且不再有效。

有人可以为我指出正确的方向吗？

理想情况下，我正在寻找 JQuery 代码的简单示例、HTML 表单与普通 post 方法的任何关键差异的 sn-p，以及 MVC 控制器中使用的基本方法。我需要一些东西来帮助理解的灯泡打开。 :)

任何帮助将不胜感激！

【问题讨论】：

标签： jquery asp.net-mvc ajax asp.net-mvc-2

【解决方案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 时一样，除了您可能返回一个不同的视图 - 一个不包含整页标记的视图，具体取决于您想要从中获取的数据服务器。您可能根本不需要返回任何数据——您的“操作页面”代码可能已经拥有它需要的所有信息。

【讨论】：

谢谢。这对我很有用。非常简单干净。
href 不是表单的正确属性吗？你不应该在寻找动作属性吗？

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案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});
        }
    }
}

【讨论】：