web-dev-qa-db-fra.com

Comment envoyer un modèle dans la requête de post jQuery $ .ajax () à la méthode du contrôleur MVC

En faisant un rafraîchissement automatique en utilisant le 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 article, j'ai besoin d'incrémenter l'attribut value 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 publiée avec la requête jQuery AJAX. Comment puis-je envoyer le modèle dans la demande AJAX?

asp.net-mvcjqueryasp.net-ajax
41
ravikiran

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 suffisamment intelligent pour construire un nouvel objet à partir des paramètres que vous lui donnez. Les paramètres qui ne s'y trouvent pas sont 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 controlle:

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

     return Json(new { success = true });
}
49
Chris S

Si vous devez envoyer le modèle COMPLET au contrôleur, vous devez d'abord que le modèle soit 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, nous l'utilisons pour rendre le modèle:

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

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

25
Laviak

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

J'utilise:

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

Pour créer un tableau de leurs noms et valeurs. Ensuite, je le convertis en JSON avec:

var json = $.toJSON(dataArray)

puis le poster avec ajax () de jQuery sur le 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 sous forme de données JSON natives.

Vous pouvez ensuite capturer le flux de réponse et le désérialiser dans l'objet C #/VB.net natif et le manipuler dans votre contrôleur.

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

Faites correspondre votre objet JSON pour correspondre à 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

4
dano

Cela peut être fait en créant un objet javascript pour correspondre à votre modèle mvc. Les noms des propriétés javascript doivent correspondre exactement au modèle mvc, sinon la liaison automatique ne se produira pas sur le message. Une fois que vous avez votre modèle côté serveur, vous pouvez le manipuler et stocker les données dans la base de données.

J'y parviens soit par un événement de double-clic sur une ligne de la grille, soit par un événement de clic sur un bouton quelconque.

@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;
}
3
logan gilley

Je pense que vous devez passer explicitement l'attribut de données. Pour cela, vous pouvez utiliser data = $ ('# votre-formulaire-id'). Serialize ();

Ce message peut être utile. Poster avec jquery et ajax

Jetez un oeil à la doc ici .. Ajax sérialiser

2
rajesh pillai

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 du modèle doit être entouré de m.

1
Majid Hosseini

En appel ajax mention-

data:MakeModel(),

utilisez la fonction ci-dessous pour lier les 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] à l'action de votre contrôleur

sur POST ces données seront disponibles

0
Sarang Raotole