Как собрать данные в диалоговом окне jquery для Mvc Controller?

Question

Я использую 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');

            }
        });

Answer 1

Используйте функцию serialize () в jQuery:

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

Затем используйте метод связывания модели по умолчанию в методе контроллера:

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

Если поля ввода будут называться как «myObject.Name», они будут автоматически связываться с ними.

Если вам нужно сериализовать поля ввода для контейнера, который не является формой - используйте этот плагин jQuery.

Если вы ищете более сложные подходы - я рекомендую вам проверить MvcContrib .

Edit:
Еще одна хорошая статья о переплете.

Answer 2

вы можете использовать плагин jQuery Form:

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

и звоните

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

, который просто сделает обычную запись в контроллер EditTest ... и вам не нужно читать каждое из полей в javascript vars