Jak wysłać model do żądania postu jQuery $ .ajax() do metody kontrolera MVC

Question

Wykonując automatyczne odświeżanie za pomocą poniższego kodu, założyłem, że kiedy wykonam post, model automatycznie wyśle ​​do kontrolera:

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

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

    } 
}); 

Za każdym razem, tam jest post, muszę zwiększyć wartość atrybutu w modelu

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

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

Ale model nie jest przekazywana do sterownika, gdy strona zostanie wysłana z prośbą jQuery AJAX . Jak mogę wysłać model w żądaniu AJAX?

Answer 1

Myślę, że musisz jawnie przekazać atrybut danych. Jednym ze sposobów, aby to zrobić, jest użycie danych = $ ("# twój-formularz-id"). Serialize();

Ten wpis może być pomocny. Post with jquery and ajax

Wystarczy popatrzeć na doc tutaj .. Ajax serialize

Answer 2

Mam stronę MVC że złoży JSON wybranych wartości z grupy przycisków radiowych.

używam:

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

Aby tablicę ich nazwy i wartości. Następnie przekonwertować go do formatu JSON z:

var json = $.toJSON(dataArray) 

a następnie opublikować go z ajax jQuery() do kontrolera 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}); 

który wysyła dane się jako rodzimych danych JSON.

Następnie można przechwycić strumień odpowiedzi i rozdzielić go na macierzysty obiekt C#/VB.net i manipulować nim w kontrolerze.

Aby zautomatyzować ten proces w sposób przyjemny i wymagający niewielkiej konserwacji, zalecam przeczytanie tego wpisu, które całkiem dobrze oddaje większość natywnej, automatycznej dekompresji JSON.

Dopasuj obiekt JSON do swojego modelu, a powiązany proces powinien automatycznie deserializować dane do kontrolera. Działa to cudownie dla mnie.

Article on MVC JSON deserialization

Answer 3

Jeśli trzeba wysłać pełnego modelu do sterownika, trzeba najpierw model, aby mieć dostęp do kodu javascript.

W naszej aplikacji, robimy to z metodę rozszerzenia:

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

Na widoku, używamy go do renderowania modelu:

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

można następnie przekazać zmienną modelu do twoje $ .ajax call.

Answer 4

Prosta odpowiedź (w MVC 3 lub nawet 2) nie musisz robić nic specjalnego.

Dopóki parametry JSON są zgodne z modelem, MVC jest wystarczająco inteligentny, aby zbudować nowy obiekt z podanych przez niego parametrów. Parametry, których nie ma, są domyślnie ustawione.

Na przykład Javascript:

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

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

Model:

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

Kontroler:

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

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

Answer 5

można utworzyć zmienną i wysłać do 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() { } }); 

    } 
}); 

Wszystkie pola modelu musi BO ceated wm.

Answer 6

W wywołania ajax Nadmienić

data:MakeModel(), 

użyć funkcji poniżej, aby powiązać dane do modelowania

function MakeModel() { 

    var MyModel = {}; 

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

    return JSON.stringify(MyModel); 
} 

Attach [HttpPost] przypisują do działania kontrolera

na POST Dane te stanie się dostępny

Answer 7

Można to zrobić, budując obiekt javascript w celu dopasowania twój model mvc. Nazwy właściwości javascript muszą być dokładnie takie same jak w modelu mvc, bo inaczej automat nie wystąpi w poście. Gdy już masz model po stronie serwera, możesz nim manipulować i przechowywać dane w bazie danych.

Osiągam to poprzez podwójne zdarzenie kliknięcia w wiersz siatki lub zdarzenie click na jakimś przycisku.

@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; 
}