Comment envoyer un modèle en jQuery $.ajax() post request à la méthode du contrôleur MVC

Question

En faisant un rafraîchissement automatique à l'aide du code suivant, j'ai supposé que lorsque je fais un post, le modèle sera automatiquement envoyé au contrôleur :

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

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

    }
});

Chaque fois qu'il y a un message, je dois incrémenter l'attribut de valeur dans le modèle :

public ActionResult Modelpage(MyModel model)
    {                   
        model.value = model.value + 1;

        return PartialView("ModelPartialView", this.ViewData);
    }

Mais le modèle n'est pas transmis au contrôleur lorsque la page est affichée avec une requête AJAX jQuery. Comment puis-je envoyer le modèle dans la requête AJAX ?

Answer 1

La réponse simple (à partir de MVC 3, voire 2) est que vous ne devez rien faire de spécial.

Tant que vos paramètres JSON correspondent au modèle, MVC est suffisamment intelligent pour construire un nouvel objet à partir des paramètres que vous lui donnez. Les paramètres qui ne sont pas présents sont simplement proposés 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 });
}

Answer 2

Si vous devez envoyer le modèle COMPLET au contrôleur, vous devez d'abord faire en sorte que le modèle soit disponible pour votre code javascript.

Dans notre application, nous faisons cela 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, nous l'utilisons pour rendre le modèle :

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

Vous pouvez ensuite passer la variable du modèle dans votre appel $.ajax.

Answer 3

J'ai une page MVC qui soumet en JSON les valeurs sélectionnées dans 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 convertis en JSON avec :

var json = $.toJSON(dataArray)

puis l'envoyer au contrôleur MVC avec la fonction ajax() de jQuery.

$.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 JSON natives.

Vous pouvez alors capturer le flux de réponses et le désérialiser en objet natif C#/VB.net et le manipuler dans votre contrôleur.

Pour automatiser ce processus d'une manière agréable et à faible maintenance, je vous conseille de lire cet article qui explique très bien la plupart des méthodes de désérialisation automatique de JSON.

Faites correspondre votre objet JSON à votre modèle et le processus lié ci-dessous devrait automatiquement désérialiser les données dans votre contrôleur. Cela fonctionne à merveille pour moi.

Article sur la désérialisation MVC JSON

Answer 4

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

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

Jetez un coup d'œil à la doc ici Ajax serialize

Answer 5

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() { } });

    }
});

Tous les champs du modèle doivent être inscrits dans m.