Comment envoyer un modèle en jQuery $.ajax() d'une requête post MVC méthode de contrôleur

la réponse simple (à partir de MVC 3, peut-être même 2) est que vous n'avez rien à faire de spécial.

tant que vos paramètres JSON correspondent au modèle, MVC est assez intelligent pour construire un nouvel objet à partir des paramètres que vous lui donnez. Les paramètres qui n'y sont pas sont simplement par défaut.

par exemple, le Javascript:

var values = 
{
    "Name": "Chris",
    "Color": "Green"
}

$.post("@Url.Action("Update")",values,function(data)
{
    // do stuff;
});

le modèle:

public class UserModel
{
     public string Name { get;set; }
     public string Color { get;set; }
     public IEnumerable<string> Contacts { get;set; }
}

le contrôleur:

public ActionResult Update(UserModel model)
{
     // do something with the model

     return Json(new { success = true });
}

si vous devez envoyer le modèle complet au contrôleur, vous devez d'abord avoir le modèle disponible pour votre code javascript.

dans notre application, nous le faisons avec une méthode d'extension:

public static class JsonExtensions
{
    public static string ToJson(this Object obj)
    {
        return new JavaScriptSerializer().Serialize(obj);
    }
}

Sur la vue, et nous l'utilisons pour rendre le modèle:

<script type="javascript">
  var model = <%= Model.ToJson() %>
</script>

vous pouvez alors passer la variable model dans votre $.appel ajax.

j'ai une page MVC qui soumet JSON de valeurs sélectionnées à partir d'un groupe de boutons radio.

j'utilise:

var dataArray = $.makeArray($("input[type=radio]").serializeArray());

pour faire un tableau de leurs noms et valeurs. Puis je le transforme en JSON avec:

var json = $.toJSON(dataArray)

et ensuite le poster avec ajax () de jQuery au contrôleur MVC

$.ajax({
url: "/Rounding.aspx/Round/" + $("#OfferId").val(),
type: 'POST',
dataType: 'html',
data: json, 
contentType: 'application/json; charset=utf-8',
beforeSend: doSubmitBeforeSend,
complete: doSubmitComplete,
success: doSubmitSuccess});

qui envoie les données en tant que données natives JSON.

vous pouvez alors capturer le le flux de réponse et le dé-sérialiser dans le C#/VB natif.net object et le manipuler dans votre controller.

pour automatiser ce processus d'une manière agréable, avec peu de maintenance, je vous conseille de lire cette entrée qui décrit assez bien la plupart de la désérialisation automatique JSON native.

correspondent à votre objet JSON pour correspondre à votre modèle et le processus lié ci-dessous devrait désérialiser automatiquement les données dans votre contrôleur. Ça marche merveilleusement bien pour moi.

Article sur la désérialisation MVC JSON

cela peut être fait en construisant un objet javascript pour correspondre à votre modèle mvc. Les noms des propriétés javascript doivent correspondre exactement au modèle mvc ou encore le autobind n'arrivera pas sur le post. Une fois que vous avez votre modèle du côté du serveur, vous pouvez le manipuler et stocker les données dans la base de données.

je réalise ceci soit par un événement de double clic sur une ligne de grille, soit par un événement de clic sur un bouton d'une sorte.

@model TestProject.Models.TestModel

<script>

function testButton_Click(){
  var javaModel ={
  ModelId: '@Model.TestId',
  CreatedDate: '@Model.CreatedDate.ToShortDateString()',
  TestDescription: '@Model.TestDescription',
  //Here I am using a Kendo editor and I want to bind the text value to my javascript
  //object. This may be different for you depending on what controls you use.
  TestStatus: ($('#StatusTextBox'))[0].value, 
  TestType: '@Model.TestType'
  }

  //Now I did for some reason have some trouble passing the ENUM id of a Kendo ComboBox 
    //selected value. This puzzled me due to the conversion to Json object in the Ajax call. 
  //By parsing the Type to an int this worked.

  javaModel.TestType = parseInt(javaModel.TestType);

  $.ajax({
      //This is where you want to post to.
      url:'@Url.Action("TestModelUpdate","TestController")', 
      async:true,
      type:"POST",
      contentType: 'application/json',
      dataType:"json",
      data: JSON.stringify(javaModel)
  });
}
</script>


//This is your controller action on the server, and it will autobind your values 
//to the newTestModel on post.

[HttpPost]
public ActionResult TestModelUpdate(TestModel newTestModel)
{
 TestModel.UpdateTestModel(newTestModel);
 return //do some return action;
}

je pense que vous devez passer explicitement l'attribut data. Une façon de le faire est d'utiliser la data = $('#votre forme-id').serialize ();

Ce post peut être utile. Post avec jquery et ajax

regardez le doc ici.. Ajax sérialiser

vous pouvez créer une variable et l'Envoyer à ajax.

var m = { "Value": @Model.Value }

$.ajax({
    url: '<%=Url.Action("ModelPage")%>',
    type: "POST",
    data:  m,
    success: function(result) {
        $("div#updatePane").html(result);
    },

    complete: function() {
    $('form').onsubmit({ preventDefault: function() { } });

    }
});

tout le champ de model doit être Bo ceated en M.

En appel ajax mention-

data:MakeModel(),

utiliser la fonction ci-dessous pour lier des données au modèle

function MakeModel() {

    var MyModel = {};

    MyModel.value = $('#input element id').val() or your value;

    return JSON.stringify(MyModel);
}

attachez l'attribut [HttpPost] à votre action de controller

sur POST ces données seront disponibles