Passage d'une liste d'objets dans une méthode de contrôleur MVC à l'aide de jQuery Ajax
J'essaie de passer un tableau d'objets dans une méthode de contrôleur MVC à l'aide de la fonction ajax () de jQuery. Lorsque j'entre dans la méthode du contrôleur C # PassThing (), l'argument "objets" est null. J'ai essayé d'utiliser un type de liste comme argument, mais cela ne fonctionne pas non plus. Qu'est-ce que je fais 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; }
}
}
En suivant la suggestion de NickW, j’ai réussi à utiliser cela avec things = JSON.stringify({ 'things': things }); Voici le code complet.
$(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; }
}
Il y a deux choses que j'ai apprises de ceci:
Les paramètres contentType et dataType sont absolument nécessaires dans la fonction ajax (). Cela ne fonctionnera pas s'ils manquent. Je l'ai découvert après de nombreux essais et erreurs.
Pour transmettre un tableau d'objets à une méthode de contrôleur MVC, utilisez simplement le format JSON.stringify ({'things': things}).
J'espère que ça aidera quelqu'un d'autre!
Tu ne pouvais pas faire ça?
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.');
});
... et marque ton action avec
[HttpPost]
public void PassThings(IEnumerable<Thing> things)
{
// do stuff with things here...
}
Formater vos données peut être le problème. Essayez l'une de ces solutions:
data: '{ "things":' + JSON.stringify(things) + '}',
Ou (de Comment puis-je publier un tableau de chaîne sur ASP.NET MVC Controller sans formulaire? )
var postData = { things: things };
...
data = postData
J'utilise une application Web .Net Core 2.1 et je ne peux pas obtenir une seule réponse ici. J'ai soit un paramètre vide (si la méthode a été appelée du tout) ou une erreur de serveur 500. J'ai commencé à jouer avec toutes les combinaisons possibles de réponses et j'ai finalement obtenu un résultat positif.
Dans mon cas, la solution était la suivante:
Script - stringifier le tableau d'origine (sans utiliser une propriété nommée)
$.ajax({
type: 'POST',
contentType: 'application/json; charset=utf-8',
url: mycontrolleraction,
data: JSON.stringify(things)
});
Et dans la méthode du contrôleur, utilisez [FromBody]
[HttpPost]
public IActionResult NewBranch([FromBody]IEnumerable<Thing> things)
{
return Ok();
}
Les échecs incluent:
Nommer le contenu
données: {contenu: nœuds}, // erreur de serveur 500
N'ayant pas le contentType = Erreur de serveur 500
Remarques
dataTypen'est pas nécessaire, malgré ce que certaines réponses disent, car il est utilisé pour le décodage réponse (donc non pertinent pour les exemples demande ici).List<Thing>fonctionne également dans la méthode du contrôleur
La seule façon pour que cela fonctionne est de passer le JSON en tant que chaîne, puis de le désérialiser à l'aide de JavaScriptSerializer.Deserialize<T>(string input), ce qui est assez étrange si c'est le désérialiseur par défaut de MVC 4.
Mon modèle contient des listes d'objets imbriquées et le meilleur que je puisse obtenir à l'aide de données JSON est la liste la plus haute contenant le nombre correct d'éléments, mais tous les champs de ces éléments étaient nuls.
Ce genre de chose ne devrait pas être si difficile.
$.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);
J'ai une réponse parfaite pour tout cela: j'ai essayé beaucoup de solutions ne pouvant pas enfin me maîtriser, veuillez trouver la réponse détaillée ci-dessous:
$.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);
}
});
Contrôleur
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
}
C'est un code de travail pour votre requête, vous pouvez l'utiliser.
Contrôleur
[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");
}
});
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");
}
});
Envelopper votre liste d'objets avec un autre objet contenant une propriété qui correspond au nom du paramètre attendu par le contrôleur MVC fonctionne. Le bit important étant le wrapper autour de la liste d'objets.
$(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; }
}
Modification 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
}
Si vous utilisez l'API Web ASP.NET, vous devez simplement passer data: JSON.stringify(things).
Et votre contrôleur devrait ressembler à quelque chose comme ça:
public class PassThingsController : ApiController
{
public HttpResponseMessage Post(List<Thing> things)
{
// code
}
}