How to harvest data in jquery dialog to Mvc Controller???

Question

I am using ASP.NET Mvc to display a JQuery dialog that has a few input fields. I now need these fields to submitted to an action method like how a normal HTML submit button would work on an ASP .NET MVC application and i want to harvest data in dialog to Mvc controller. How do I accomplish this?

This is my data form

<% 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(); %>

and this my script

$(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

you could use the jQuery Form plugin:

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

and call

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

which will just do a regular post to the EditTest controller... and you wont need to read each of the fields into javascript vars

Answer 2

i try but it don't run

Answer 3

Use serialize() function in jQuery:

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

Then use default model binder in controller method:

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

If input fields will be named like "myObject.Name", it will automatically bind them.

If you need to serialize input fields for container which isn't form - use this jQuery plugin.

If you are looking for more sophisticated approaches - i recommend you to check MvcContrib.

Edit:
Another nice article about binding.