CODEWITHSUNDEEP
jqueryasp.net-mvcdialog
user141164
user141164

Reputation: 51

How to harvest data in jquery dialog to Mvc Controller?

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

            }
        });

Upvotes: 0

Views: 1276

Answers (2)

Arnis Lapsa
Arnis Lapsa

Reputation: 47567

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.

Upvotes: 3

Nicholas Franceschina
Nicholas Franceschina

Reputation: 6147

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

Upvotes: 0

Related Questions