如何将 jquery 对话框中的数据收集到 Mvc 控制器？答案

【问题标题】：How to harvest data in jquery dialog to Mvc Controller?如何将 jquery 对话框中的数据收集到 Mvc 控制器？
【发布时间】：2009-08-03 03:36:53
【问题描述】：

我正在使用 ASP.NET Mvc 来显示一个包含几个输入字段的 JQuery 对话框。我现在需要将这些字段提交给一个操作方法，例如普通的 HTML 提交按钮如何在 ASP .NET MVC 应用程序上工作，并且我想在对话框中将数据收集到 Mvc 控制器。我该如何做到这一点？

这是我的数据表单

<% Html.BeginForm("EditTest", "Item"); %>
           <table>
             <tr>
               <td><b>ItemId</b></td>
               <td><input id="ItemId" name="ItemId" type="text" disabled="disabled" /></td>
             </tr>
               <tr>
               <td><b>CatId</b></td>
               <td><input id="CatId" name="CatId" type="text" />
                   <%--<%= Html.DropDownList("CatId", ViewData["AllCategory"] as SelectList)%>--%></td>
             </tr>
               <tr>
               <td><b>SaleOffId</b></td>
               <td><input id="SaleOffId" name="SaleOffId" type="text"/></td>
             </tr>
               <tr>
               <td><b>UnitId</b></td>
               <td><input id="UnitId" name="UnitId" type="text" /></td>
             </tr>
               <tr>
               <td><b>ItemCode</b></td>
               <td><input id="ItemCode" name="ItemCode" type="text" /></td>
             </tr>
               <tr>
               <td><b>ItemName</b></td>
               <td><input id="ItemName" name="ItemName" type="text" /></td>
             </tr>
               <tr>
               <td><b>UnitCost</b></td>
               <td><input id="UnitCost" name="UnitCost" type="text"/></td>
             </tr>
               <tr>
               <td><b>QuantityRemaining</b></td>
               <td><input id="QuantityRemaining" name="QuantityRemaining" type="text"/></td>
             </tr>
           </table>
        <% Html.EndForm(); %>

这是我的脚本

$(function() {
        $("#dialog").dialog({
            bgiframe: true,
            autoOpen: false,
            height: 300,
            modal: true,
            buttons: {
                "Save": function() {
                    var id = $("#ItemId").val(),
                    catid = $("#CatId").val(),
                    unitid = $("#UnitId").val(),
                    saleoffid = $("#SaleOffId").val(),
                    name = $("#ItemName").val(),
                    code = $("#ItemCode").val(),
                    price = $("#UnitCost").val(),
                    stock = $("#QuantityRemaining").val();

                    $("#dialog form").attr("post", "/Item.aspx/EditTest/" + $("#ItemId").val());

                    $(this).dialog('close');

                },
                Cancel: function() {
                    $(this).dialog('close');
                }
            },
            close: function() {
                allFields.val('').removeClass('ui-state-error');

            }
        });

【问题讨论】：

标签： jquery asp.net-mvc dialog

【解决方案1】：

在 jQuery 中使用 serialize() 函数：

    $.post("myAction",$("#myForm").serialize(), 
        function(response) {alert(response);});

然后在控制器方法中使用默认模型绑定器：

public ActionResult fooAction(MyObject myObject){
    //update your object
}

如果输入字段将被命名为“myObject.Name”，它将自动绑定它们。

如果您需要序列化非表单容器的输入字段 - 使用 this jQuery 插件。

如果您正在寻找更复杂的方法 - 我建议您 check MvcContrib。

编辑：
Another nice article 关于绑定。

【讨论】：

【解决方案2】：

你可以使用 jQuery Form 插件：

http://malsup.com/jquery/form/

并调用


$('#dialog form').ajaxForm(options);

它只会定期向 EditTest 控制器发送帖子...并且您不需要将每个字段读入 javascript vars

【讨论】：