Comment récolter des données dans le dialogue de jquery au contrôleur de Mvc?

Question

J'utilise ASP.NET Mvc pour afficher une boîte de dialogue JQuery avec quelques champs de saisie. J'ai maintenant besoin de ces champs pour soumettre à une méthode d'action comme comment un bouton normal de soumission de HTML fonctionnerait sur une application d'ASP .NET MVC et je veux récolter des données dans la boîte de dialogue au contrôleur de Mvc. Comment puis-je accomplir cela?

Ceci est ma forme de données

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

et ce que mon 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

vous pouvez utiliser le plugin jQuery Form:

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

et appelez

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

qui fera juste un poste régulier au contrôleur EditTest ... et vous n'aurez pas besoin de lire chacun des champs en javascript vars

Answer 2

Utilisez la fonction serialize() jQuery:

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

utilisez ensuite

liant modèle par défaut dans la méthode de commande:

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

Si les champs d'entrée seront nommés comme « myObject.Name », il Automatica Je les lie.

Si vous devez sérialiser des champs d'entrée pour un conteneur qui n'est pas en forme - utilisez le plugin jQuery this.

Si vous cherchez des approches plus sophistiquées - je vous recommande de check MvcContrib.

Édition:
Another nice article concernant la liaison.