c# - por - llamar a un controlador desde javascript mvc

Pasar una lista de objetos en un método de controlador MVC usando jQuery Ajax

Question

Estoy tratando de pasar una matriz de objetos en un método de controlador MVC utilizando la función ajax () de jQuery. Cuando me meto en el método del controlador C # PassThing (), el argumento "cosas" es nulo. Lo he intentado usando un tipo de lista para el argumento, pero eso tampoco funciona. ¿Qué estoy haciendo mal?

<script type="text/javascript">
$(document).ready(function () {
var things = [
{ id: 1, color: ''yellow'' },
{ id: 2, color: ''blue'' },
{ id: 3, color: ''red'' }
];
$.ajax({
contentType: ''application/json; charset=utf-8'',
dataType: ''json'',
type: ''POST'',
url: ''/Xhr/ThingController/PassThing'',
data: JSON.stringify(things)
});
});
</script>
public class ThingController : Controller
{
public void PassThing(Thing[] things)
{
// do stuff with things here...
}
public class Thing
{
public int id { get; set; }
public string color { get; set; }
}
}

Answer 1

¿No podrías hacer esto?

var things = [
{ id: 1, color: ''yellow'' },
{ id: 2, color: ''blue'' },
{ id: 3, color: ''red'' }
];
$.post(''@Url.Action("PassThings")'', { things: things },
function () {
$(''#result'').html(''"PassThings()" successfully called.'');
});

... y marca tu acción con

[HttpPost]
public void PassThings(IEnumerable<Thing> things)
{
// do stuff with things here...
}

Answer 2

Darle formato a tus datos puede ser el problema. Pruebe cualquiera de estos:

data: ''{ "things":'' + JSON.stringify(things) + ''}'',

O ( ¿Cómo puedo publicar una matriz de cadena en el controlador MVC de ASP.NET sin un formulario? )

var postData = { things: things };
...
data = postData

Answer 3

Envuelve su lista de objetos con otro objeto que contiene una propiedad que coincide con el nombre del parámetro que espera el controlador MVC. El bit importante es el envoltorio alrededor de la lista de objetos.

$(document).ready(function () {
var employeeList = [
{ id: 1, name: ''Bob'' },
{ id: 2, name: ''John'' },
{ id: 3, name: ''Tom'' }
];
var Employees = {
EmployeeList: employeeList
}
$.ajax({
dataType: ''json'',
type: ''POST'',
url: ''/Employees/Process'',
data: Employees,
success: function () {
$(''#InfoPanel'').html(''It worked!'');
},
failure: function (response) {
$(''#InfoPanel'').html(response);
}
});
});
public void Process(List<Employee> EmployeeList)
{
var emps = EmployeeList;
}
public class Employee
{
public int Id { get; set; }
public string Name { get; set; }
}

Answer 4

Estoy usando una aplicación web .Net Core 2.1 y no pude obtener una sola respuesta aquí para trabajar. O bien obtuve un parámetro en blanco (si se llamó al método en absoluto) o un error de servidor 500. Empecé a jugar con todas las combinaciones posibles de respuestas y finalmente obtuve un resultado de trabajo.

En mi caso, la solución fue la siguiente:

Script - stringify la matriz original (sin usar una propiedad con nombre)

 $.ajax({
type: ''POST'',
contentType: ''application/json; charset=utf-8'',
url: mycontrolleraction,
data: JSON.stringify(things)
});

Y en el método del controlador, use [FromBody]

 [HttpPost]
public IActionResult NewBranch([FromBody]IEnumerable<Thing> things)
{
return Ok();
}

Las fallas incluyen:

• Nombrar el contenido

  datos: {contenido: nodos}, // error del servidor 500

• No tener contentType = Error de servidor 500

Notas

• dataType no es necesario, a pesar de lo que dicen algunas respuestas, ya que se usa para la decodificación de respuesta (por lo que no es relevante para los ejemplos de solicitud aquí).
• List<Thing> también funciona en el método de controlador

Answer 5

La única forma en que podría hacer que esto funcione es pasar el JSON como una cadena y luego deserializarlo usando JavaScriptSerializer.Deserialize<T>(string input) , lo cual es bastante extraño si ese es el deserializador predeterminado para MVC 4.

Mi modelo tiene listas anidadas de objetos y lo mejor que pude obtener al usar los datos JSON es la lista más alta para tener el número correcto de elementos, pero todos los campos en los ítems eran nulos.

Este tipo de cosas no debería ser tan difícil.

 $.ajax({
type: ''POST'',
url: ''/Agri/Map/SaveSelfValuation'',
data: { json: JSON.stringify(model) },
dataType: ''text'',
success: function (data) {
[HttpPost]
public JsonResult DoSomething(string json)
{
var model = new JavaScriptSerializer().Deserialize<Valuation>(json);

Answer 6

Modificación de @veeresh i

 var data=[
{ id: 1, color: ''yellow'' },
{ id: 2, color: ''blue'' },
{ id: 3, color: ''red'' }
]; //parameter
var para={};
para.datav=data; //datav from View
$.ajax({
traditional: true,
url: "/Conroller/MethodTest",
type: "POST",
contentType: "application/json; charset=utf-8",
data:para,
success: function (data) {
$scope.DisplayError(data.requestStatus);
}
});
In MVC
public class Thing
{
public int id { get; set; }
public string color { get; set; }
}
public JsonResult MethodTest(IEnumerable<Thing> datav)
{
//now datav is having all your values
}

Answer 7

Si está utilizando ASP.NET Web API, simplemente debe pasar data: JSON.stringify(things) .

Y tu controlador debería verse más o menos así:

public class PassThingsController : ApiController
{
public HttpResponseMessage Post(List<Thing> things)
{
// code
}
}

Answer 8

Tengo una respuesta perfecta para todo esto: probé tantas soluciones que no pude finalmente lograr, puedo encontrar la respuesta detallada a continuación:

 $.ajax({
traditional: true,
url: "/Conroller/MethodTest",
type: "POST",
contentType: "application/json; charset=utf-8",
data:JSON.stringify(
[
{ id: 1, color: ''yellow'' },
{ id: 2, color: ''blue'' },
{ id: 3, color: ''red'' }
]),
success: function (data) {
$scope.DisplayError(data.requestStatus);
}
});

Controler

public class Thing
{
public int id { get; set; }
public string color { get; set; }
}
public JsonResult MethodTest(IEnumerable<Thing> datav)
{
//now datav is having all your values
}

Answer 9

Utilizando la sugerencia de NickW, pude hacer que esto funcionara usando things = JSON.stringify({ ''things'': things }); Aquí está el código completo.

$(document).ready(function () {
var things = [
{ id: 1, color: ''yellow'' },
{ id: 2, color: ''blue'' },
{ id: 3, color: ''red'' }
];
things = JSON.stringify({ ''things'': things });
$.ajax({
contentType: ''application/json; charset=utf-8'',
dataType: ''json'',
type: ''POST'',
url: ''/Home/PassThings'',
data: things,
success: function () {
$(''#result'').html(''"PassThings()" successfully called.'');
},
failure: function (response) {
$(''#result'').html(response);
}
});
});
public void PassThings(List<Thing> things)
{
var t = things;
}
public class Thing
{
public int Id { get; set; }
public string Color { get; set; }
}

Hay dos cosas que aprendí de esto:

1. Los ajustes contentType y dataType son absolutamente necesarios en la función ajax (). No funcionará si faltan. Lo descubrí después de mucho ensayo y error.

2. Para pasar una matriz de objetos a un método de controlador MVC, simplemente use el formato JSON.stringify ({''cosas'': cosas}).

¡Espero que esto ayude a alguien más!

Answer 10

Este es el código de trabajo para su consulta, puede usarlo.

Controler

 [HttpPost]
public ActionResult save(List<ListName> listObject)
{
//operation return
Json(new { istObject }, JsonRequestBehavior.AllowGet); }
}

javascript

 $("#btnSubmit").click(function () {
var myColumnDefs = [];
$(''input[type=checkbox]'').each(function () {
if (this.checked) {
myColumnDefs.push({ ''Status'': true, ''ID'': $(this).data(''id'') })
} else {
myColumnDefs.push({ ''Status'': false, ''ID'': $(this).data(''id'') })
}
});
var data1 = { ''listObject'': myColumnDefs};
var data = JSON.stringify(data1)
$.ajax({
type: ''post'',
url: ''/Controller/action'',
data:data ,
contentType: ''application/json; charset=utf-8'',
success: function (response) {
//do your actions
},
error: function (response) {
alert("error occured");
}
});

Answer 11

 var List = @Html.Raw(Json.Encode(Model));
$.ajax({
type: ''post'',
url: ''/Controller/action'',
data:JSON.stringify({ ''item'': List}),
contentType: ''application/json; charset=utf-8'',
success: function (response) {
//do your actions
},
error: function (response) {
alert("error occured");
}
});