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');

            }
        });

DBS · Accepted Answer · 2025-04-08 16:20:10Z

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.

edited Apr 8 at 16:20

DBS

10.1k4 gold badges40 silver badges61 bronze badges

answered Aug 3, 2009 at 7:20

Arnis Lapsa

47.6k30 gold badges119 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nicholas Franceschina · Accepted Answer · 2009-08-03 03:43:15Z

0

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

answered Aug 3, 2009 at 3:43

Nicholas Franceschina

6,1976 gold badges41 silver badges52 bronze badges

Collectives™ on Stack Overflow

How to harvest data in jquery dialog to Mvc Controller?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related