Pase el modelo al controlador usando Jquery / Ajax

Estoy tratando de pasar mi modelo a un controlador usando JQuery / Ajax, no estoy seguro de cómo hacerlo correctamente. Hasta ahora he intentado usar Url.Action pero el modelo está en blanco.

Nota: ninguno de los subprocesos duplicados en stackoverflow parece abordarse con ASP.NET 5 MVC 6.

Ver:

 $("#inpDateCompleted").change(function () { var url = '@(Url.Action("IndexPartial", "DashBoard", Model, null))'; $("#DailyInvoiceItems").load(url); }); 

Controlador:

  [HttpGet] public PartialViewResult IndexPartial(DashBoardViewModel m) { // Do stuff with my model return PartialView("_IndexPartial"); } 

Parece que su método de acción IndexPartial tiene un argumento que es un objeto complejo. Si está transfiriendo una gran cantidad de datos (objeto complejo), podría ser una buena idea convertir su método de acción en un método de acción HttpPost y usar la post jQuery para publicar datos en ese. GET tiene una limitación en el valor de la cadena de consulta.

 [HttpPost] public PartialViewResult IndexPartial(DashboardViewModel m) { //May be you want to pass the posted model to the parial view? return PartialView("_IndexPartial"); } 

Tu script debe ser

 var url = "@Url.Action("IndexPartial","YourControllerName")"; var model = { Name :"Shyju", Location:"Detroit"}; $.post(url, model, function(res){ //res contains the markup returned by the partial view //You probably want to set that to some Div. $("#SomeDivToShowTheResult").html(res); }); 

Asumir Name y Location son propiedades de su clase DashboardViewModel y SomeDivToShowTheResult es la identificación de un div en su página donde desea cargar el contenido proveniente de la vista parcial.

¿Enviar objetos complejos?

Puede construir objetos más complejos en js si lo desea. El enlace de modelo funcionará siempre que su estructura coincida con la clase viewmodel

 var model = { Name :"Shyju", Location:"Detroit", Interests : ["Code","Coffee","Stackoverflow"] }; $.ajax({ type: "POST", data: JSON.stringify(model), url: url, contentType: "application/json" }).done(function (res) { $("#SomeDivToShowTheResult").html(res); }); 

Para que el modelo de js anterior se transforme en su parámetro de método, su modelo de vista debería ser así.

 public class DashboardViewModel { public string Name {set;get;} public string Location {set;get;} public List Interests {set;get;} } 

Y en su método de acción, especifique [FromBody]

 [HttpPost] public PartialViewResult IndexPartial([FromBody] DashboardViewModel m) { return PartialView("_IndexPartial",m); } 
 //C# class public class DashBoardViewModel { public int Id { get; set;} public decimal TotalSales { get; set;} public string Url { get; set;} public string MyDate{ get; set;} } //JavaScript file //Create dashboard.js file $(document).ready(function () { // See the html on the View below $('.dashboardUrl').on('click', function(){ var url = $(this).attr("href"); }); $("#inpDateCompleted").change(function () { // Construct your view model to send to the controller // Pass viewModel to ajax function // Date var myDate = $('.myDate').val(); // IF YOU USE @Html.EditorFor(), the myDate is as below var myDate = $('#MyDate').val(); var viewModel = { Id : 1, TotalSales: 50, Url: url, MyDate: myDate }; $.ajax({ type: 'GET', dataType: 'json', cache: false, url: '/Dashboard/IndexPartial', data: viewModel , success: function (data, textStatus, jqXHR) { //Do Stuff $("#DailyInvoiceItems").html(data.Id); }, error: function (jqXHR, textStatus, errorThrown) { //Do Stuff or Nothing } }); }); }); //ASP.NET 5 MVC 6 Controller public class DashboardController { [HttpGet] public IActionResult IndexPartial(DashBoardViewModel viewModel ) { // Do stuff with my model var model = new DashBoardViewModel { Id = 23 /* Some more results here*/ }; return Json(model); } } // MVC View // Include jQuerylibrary // Include dashboard.js   // If you want to capture your URL dynamically  
//OR @Html.EditorFor(model => model.MyDate)

Use la siguiente JS:

 $(document).ready(function () { $("#btnsubmit").click(function () { $.ajax({ type: "POST", url: '/Plan/PlanManage', //your action data: $('#PlanForm').serialize(), //your form name.it takes all the values of model dataType: 'json', success: function (result) { console.log(result); } }) return false; }); }); 

y el siguiente código en su controlador:

 [HttpPost] public string PlanManage(Plan objplan) //model plan { } 

Como se sugiere en otras respuestas, probablemente sea más fácil “PUBLICAR” los datos del formulario en el controlador. Si necesita pasar un modelo / formulario completo, puede hacerlo fácilmente con serialize() por ej.

 $('#myform').on('submit', function(e){ e.preventDefault(); var formData = $(this).serialize(); $.post('/student/update', formData, function(response){ //Do something with response }); }); 

Entonces, su controlador podría tener un modelo de vista como parámetro, por ejemplo

  [HttpPost] public JsonResult Update(StudentViewModel studentViewModel) {} 

Alternativamente, si solo desea publicar algunos valores específicos, puede hacer lo siguiente:

 $('#myform').on('submit', function(e){ e.preventDefault(); var studentId = $(this).find('#Student_StudentId'); var isActive = $(this).find('#Student_IsActive'); $.post('/my/url', {studentId : studentId, isActive : isActive}, function(response){ //Do something with response }); }); 

Con un controlador como:

  [HttpPost] public JsonResult Update(int studentId, bool isActive) {}