J'utilise actuellement AJAX .NET Core. J'essaye de faire une chose très basique. Remplissez une liste d'éléments, puis affichez chaque élément dans
Donc ce dont j'ai besoin est d'avoir une autre boucle dans mon $ .each pour sélectionner PersonId, PersonName, PersonAddress et les afficher dans la ligne.
En tant que débutant en javascript et Ajax, j'ai vraiment du mal ici impossible de trouver un bon tutoriel pour asp.net core.
Merci beaucoup pour tout conseil
Mon modèle est:
<script>
$.ajax({
type: "GET",
url: "/Person?handler=List",
contentType: "application/json",
dataType: "json",
success: function (response) {
var dvItems= $("#dvItems");
dvItems.empty();
$.each(response, function (i, item) {
var $tr = $('<li>').append(item.PersonId + "with name " + item.PersonName + "living in" + item.PersonAddress).appendTo(dvItems);
});
},
failure: function (response) {
alert(response);
}
});
</script>
Ma méthode d'index:
<div id="dvItems" style="font-size:24px;"> </div>
Les données de la base de données ressemblent à ceci:
PersonId PersonName PersonAddress 1 Martin New York 2 Sam New Jersey 3 Eli Ohio
Ma vue:
public JsonResult OnGetList()
{
List<Models.Person> list = new List<Models.Person>();
foreach (var item in _context.Person.ToList())
{
list.Add(item);
}
return new JsonResult(list);
}
Javascript intégré au bas de la vue:
public class Person
{
public int PersonId { get; set; }
public string PersonName { get; set; }
public string PersonAddress { get; set; }
}
4 Réponses :
J'ai essayé de reproduire le code actuel.
Votre URL est peut-être incorrecte et vous devez autoriser get in return JSON return Json (list, JsonRequestBehavior.AllowGet)
<div id="dvItems" style="font-size:24px;">
</div>
$.ajax({
type: "GET",
url: "Home/OnGetList",
contentType: "application/json",
dataType: "json",
success: function (response) {
var dvItems = $("#dvItems");
dvItems.empty();
$.each(response, function (i, item) {
var $tr = $('<li>').append(item.PersonId + "with name " + item.PersonName + "living in" + item.PersonAddress).appendTo(dvItems);
});
},
failure: function (response) {
alert(response);
}
});
Merci de m'avoir répondu - Comme je l'ai dit au début, j'utilise .net Core, JsonRequestBehavior.AllowGet est obsolète dans .net core 1.0 et je ne peux pas l'utiliser
use peut utiliser ce retour Json (liste)
Je ne pense pas pouvoir utiliser return Json (list) . Ce que je peux utiliser, c'est retourner new JsonResult (list); qui est exactement ce que j'utilise. Pouvez-vous expliquer la différence?
Cela ne répond pas à la question initiale, mais il convient de mentionner:
Vous devriez (devez ?, pour des raisons de sécurité) créer un DTO côté serveur ( c # ) qui contient exactement ce que vous voulez montrer côté client ( javascript , html).
Vous pouvez créer quelque chose comme:
public JsonResult OnGetList()
{
var list = new List<PersonDto>();
foreach (var item in _context.Person.ToList())
{
list.Add(new PersonDto(item.PersonName, item.PersonAddress));
}
return new JsonResult(list);
}
puis changez votre code comme ceci:
public class PersonDto
{
public string Name {get; }
public string Address { get;}
public PersonDto(string name, string address)
{
Name = name;
Address = address;
}
}
Merci pour cela - je ne savais pas que je devrais implémenter cette fonctionnalité de sécurité. C'est quelque chose que je ferai certainement dans le futur!
Avec la structure de table fournie, je suppose que la classe est quelque chose comme -
public JsonResult Person()
{
var personArray = new Person[]
{
new Person(){ PersonId = 1, PersonName="Person1", PersonAddress ="Charlotte" },
new Person(){ PersonId = 2, PersonName="Person2", PersonAddress ="Chicago" },
new Person(){ PersonId = 3, PersonName="Person3", PersonAddress ="Nashville" }
};
return Json(personArray, JsonRequestBehavior.AllowGet); ;
}
Ce qui donne un résultat JSon comme -
[{PersonId: 1, PersonName: "Person1", PersonAddress: "Charlotte"},
{PersonId: 2, PersonName: "Person2", PersonAddress: "Chicago"},
{PersonId: 3, PersonName: "Person3", PersonAddress: "Nashville"}]
J'ai utilisé une action MVC pour imiter votre scénario. Cela ne devrait pas être très différent dans votre cas.
public class Person
{
public int PersonId { get; set; }
public string PersonName { get; set; }
public string PersonAddress { get; set; }
}
D'autres choses que vous voudrez peut-être vérifier sont, s'il y a une différence dans la structure de classe. Comme, un nom personnalisé spécifié pour le sérialiseur JSon. Ou si ces éléments sont inclus dans d'autres objets de la classe.
J'espère que cela vous donnera un indice.
Comme je l'ai dit dans ma question - j'utilise .net core, donc JsonRequestBehavior.AllowGet ne peut pas être utilisé car il était obsolète dans asp.net core 1.0.
Il s'avère donc qu'il y a une différence dans l'écriture de
var $tr = $('<li>').append(item.personId + "with name " + item.personName + "living in" + item.personAddress).appendTo(dvItems);
et
var $tr = $('<li>').append(item.PersonId + "with name " + item.PersonName + "living in" + item.PersonAddress).appendTo(dvItems);
Tous les attributs écrits en CamelCase sur le 'Entity Framework 'côté doit avoir la première lettre en minuscule.
Moi stupide ...
Merci à tous de m'avoir rappelé.
Pouvez-vous publier la structure de la
réponseJSON qui revient deOnGetList ()?Vous pouvez vérifier votre réponse à l'aide des outils de développement de votre navigateur. Ouvrez-le en utilisant F12 (Firefox, Chrome, Edge) et allez dans l'onglet Réseau, trouvez votre requête XHR et vérifiez la structure de votre réponse.
la réponse est
[{personId: 25, personName: "martin", personAddress: "strnadova"},…] 0: {personId: 25, personName: "martin", personAddress: "strnadova"} personAddress: "strnadova" personId: 25 personName: "martin" 1: {personId: 26, personName: "barbora", personAddress: "strnadova"} personAddress: "strnadova" personId: 26 personName: "barbora" 2: {personId: 27, personName: " vikca ", personAddress:" strnadova "} personAddress:" strnadova "personId: 27 personName:" vikca "êtes-vous
@sabotero - non, ce n'est pas le cas, mais la partie html fonctionne Je peux voir les points