Cómo enviar un modelo en jQuery $ .ajax() solicitud posterior al método de controlador MVC

Question

Al hacer una actualización automática utilizando el siguiente código, asumí que cuando hago una publicación, el modelo se enviará automáticamente al controlador:

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

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

    } 
}); 

Cada vez que hay un puesto, necesito para incrementar el valor del atributo en el modelo:

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

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

Pero el modelo no se pasa al controlador cuando la página se ha escrito con la petición de jQuery AJAX . ¿Cómo puedo enviar el modelo en la solicitud de AJAX?

Answer 1

Creo que necesita pasar explícitamente el atributo de datos. Una forma de hacerlo es usar data = $ ('# your-form-id'). Serialize();

Esta publicación puede ser útil. Post with jquery and ajax

Tenga una mirada en el doc aquí .. Ajax serialize

Answer 2

Tengo una página MVC que presenta JSON de valores seleccionados de un grupo de botones de radio.

que utilizo:

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

crear una matriz de sus nombres y valores. Entonces convertirlo a JSON con:

var json = $.toJSON(dataArray) 

y luego puesto que con ajax de jQuery() al controlador 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}); 

que envía los datos a través de datos JSON como nativos.

Puede capturar el flujo de respuesta y deserializarlo en el objeto nativo C#/VB.net y manipularlo en su controlador.

Para automatizar este proceso de una manera encantadora y de bajo mantenimiento, le aconsejo que lea esta entrada que describe bastante bien la deserialización JSON nativa y automática bastante bien.

Empareje su objeto JSON para que coincida con su modelo y el siguiente proceso vinculado debe deserializar automáticamente los datos en su controlador. Es maravilloso para mí.

Article on MVC JSON deserialization

Answer 3

Si necesita enviar el modelo completo al controlador, primero tiene el modelo que esté disponible para el código JavaScript.

En nuestra aplicación, lo hacemos con un método de extensión:

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

En la vista, la usamos para representar el modelo:

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

entonces puede pasar de la variable de modelo en tu llamada $ .ajax.

Answer 4

La respuesta simple (en MVC 3 en adelante, tal vez incluso 2) es que no tiene que hacer nada especial.

Siempre que sus parámetros JSON coincidan con el modelo, MVC es lo suficientemente inteligente como para construir un nuevo objeto a partir de los parámetros que le asigna. Los parámetros que no están ahí solo están predeterminados.

Por ejemplo, el código JavaScript:

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

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

El modelo:

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

El controlador:

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

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

Answer 5

puede crear una variable y enviar a 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() { } }); 

    } 
}); 

Todos los campos del modelo deben estar redactados en m.

Answer 6

En llamada AJAX mencionar-

data:MakeModel(), 

utilizar la función de abajo para enlazar datos para modelar

function MakeModel() { 

    var MyModel = {}; 

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

    return JSON.stringify(MyModel); 
} 

Acople [HttpPost] atribuyen a la acción del controlador

en la POST Estos datos obtener disponible

Answer 7

Esto se puede hacer construyendo un objeto javascript para que coincida su modelo mvc. Los nombres de las propiedades de JavaScript tienen que coincidir exactamente con el modelo de mvc o, de lo contrario, el autobind no se realizará en la publicación. Una vez que tenga su modelo en el lado del servidor, puede manipularlo y almacenar los datos en la base de datos.

Estoy logrando esto ya sea por un evento de doble clic en una fila de cuadrícula o haga clic en evento en un botón de algún tipo.

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