web-dev-qa-db-fra.com

Comment envoyer des données dans jquery.post au contrôleur MVC qui utilise ViewModel comme paramètre?

J'écris une application avec asp.net mvc. J'ai un contrôleur avec action, qui utilise certains ViewModel comme paramètre. Comment envoyer des données de formulaire avec jquery post à ce contrôleur mvc.

jqueryasp.net-mvcvisual-studio-2010c#-4.0
24
Radislav
$.post("Yourcontroller/YourAction", { FirstName : $("#txtFirstName").val(), LastName : $("#txtLastName") } ,function(data){
  //do whatever with the response

});

Les noms et paramètres de votre propriété ViewModel que nous transmettons doivent être identiques. C'est-à-dire: votre modèle de vue doit avoir 2 propriétés appelées FirstName et LastName comme son

public class PersonViewModel
{
  public string FirstName { set;get;}
  public string LastName { set;get;}
  // other properties

}

Et votre méthode d'action Post devrait accepter un paramètre de type PersonViewModel

[HttpPost]
public ActionResult YourAction(PersonViewModel model)
{
  //Now check model.FirstName 
}

Alternativement, si votre vue est fortement typée dans le PersonViewModel, vous pouvez simplement envoyer le formulaire sérialisé à la méthode d'action en utilisant la méthode jQuery serialize

$.post("Yourcontroller/YourAction", $("#formId").serialize() ,function(data){
  //do whatever with the response

});

EDIT: selon le commentaire

Serialize s'occupera également de la propriété Child. Supposons que vous ayez un cours appelé Profession comme celui-ci

public class Profession
{
    public string ProfessionName { set; get; }
}

Et votre PersonViewModel a une propriété de type Profession

public class PersonViewModel
{
    //other properties
    public Profession Profession { set; get; }
    public PersonViewModel()
    {
        if (Profession == null)
            Profession = new Profession();
    }
}

Vous obtiendrez ces données dans votre méthode d'action HttpPost, si vous les remplissez à partir de votre vue.

enter image description here

39
Shyju
var myData = {
              Parameter1: $("#someElementId").val(),
              Parameter2: $("#anotherElementId").val(),
              ListParameter: { /* Define IEnumerable collections as json array as well */}
              // more params here
             }  
$.ajax({
    url: 'someUrl',
    type: 'POST',
    dataType: "json",
    contentType: 'application/json',
    data: JSON.stringify(myData)
});  


[HttpPost]
public JsonResult Create(CustomViewModel vm)
{
    // You can access your ViewModel like a non-ajax call here.
    var passedValue = vm.Parameter1;
}

Vous pouvez également sérialiser l'ensemble du formulaire et le transmettre à la méthode d'action de votre contrôleur. Dans votre appel ajax:

data: $('form').serialize()
9
Kamyar