J'ai besoin d'afficher le message de réussite ajax dans ma table html mon code cshtml est:
@*@{Customer.Models.Customers cust = ViewBag.Customers;
}*@
@{
}
<center><h1 style="color:red">User details</h1></center>
<div>
<table class="table">
<tr>
<td>ID</td>
<td>res.Id</td>
</tr>
<tr>
<td>FIRST NAME</td>
<td>res.Fname</td>
</tr>
<tr>
<td>LAST NAME</td>
<td>res.Lname</td>
</tr>
<tr>
<td>LOCATION</td>
<td>res.Location</td>
</tr>
<tr>
<td>Contact</td>
<td>res.Contact</td>
</tr>
<tr>
<td>Email</td>
<td>res.Email</td>
</tr>
<tr>
<td>Password</td>
<td>res.Password</td>
</tr>
<tr>
<td>Role</td>
<td>res.Category</td>
</tr>
<tr>
</table>
</div>
@section Scripts{
<script>
$.ajax({
contentType: "application/json",
type: "GET",
url: "https://localhost:44397/api/Values/Details/" + id,
success: function (data) {
alert('Welcome!');
res = data;
// window.location.href = "/Home/Details/" + data.id;
},
error: function (jqXHR, textStatus, errorThrown) {
$("#postResult").val(jqXHR.statusText);
}
});
</script>
}
Y a-t-il un moyen d'utiliser les données de réussite pour passer dans chaque ligne de table? C'est-à-dire que je veux que le res stocke les données de réussite, puis les transmette aux champs de la table comme res.Fname (par exemple) et il devrait afficher les données en conséquence.
3 Réponses :
Si vous avez besoin d'afficher la valeur dans une seule colonne, utilisez ce type
@*@{Customer.Models.Customers cust = ViewBag.Customers;
}*@
@{
}
<center><h1 style="color:red">User details</h1></center>
<div>
<table class="table">
<tr>
<td>ID</td>
<td id="Id"></td>
</tr>
<tr>
<td>FIRST NAME</td>
<td id="Fname"></td>
</tr>
<tr>
<td>LAST NAME</td>
<td id="Lname"></td>
</tr>
<tr>
<td>LOCATION</td>
<td id="Location"></td>
</tr>
<tr>
<td>Contact</td>
<td id="Contact"></td>
</tr>
<tr>
<td>Email</td>
<td id="Email"></td>
</tr>
<tr>
<td>Password</td>
<td id="Password"></td>
</tr>
<tr>
<td>Role</td>
<td id="Category"></td>
</tr>
<tr>
</table>
</div>
@section Scripts{
<script>
$.ajax({
contentType: "application/json",
type: "GET",
url: "https://localhost:44397/api/Values/Details/" + id,
success: function (data) {
alert('Welcome!');
res = data;
document.getElementById("Id").innerHTML = res.Id;
document.getElementById("Fname").innerHTML= res.Fname;
document.getElementById("Lname").innerHTML= res.Lname;
document.getElementById("Location").innerHTML= res.Location;
document.getElementById("Contact").innerHTML= res.Contact;
document.getElementById("Email").innerHTML= res.Email;
document.getElementById("Password").innerHTML= res.Password;
document.getElementById("Category").innerHTML= res.Category;
// window.location.href = "/Home/Details/" + data.id;
},
error: function (jqXHR, textStatus, errorThrown) {
$("#postResult").val(jqXHR.statusText);
}
});
</script>
}
Je pense que cela vous aidera :)
get element by id fonctionne pour le champ de table. J'ai utilisé par erreur la valeur, elle devrait être innerHTML
Ok cela a bien fonctionné. et pouvez-vous également suggérer de définir une table pour tous les éléments de la liste en utilisant loop. comment stocker ça?
partagez-moi la conception de la table de quelle manière vous devez afficher la liste
Il existe de nombreuses façons de remplir votre table via la réponse Ajax . Voici la manière la plus lisible et la plus populaire que vous puissiez essayer. Consultez l'extrait de code ci-dessous.
<table class="table table-bordered">
<thead>
<tr>
<th>Property Header</th>
<th>Property Header</th>
<th>Property Header</th>
</tr>
</thead>
<tbody>
@foreach (var item in ViewBag.ViewBagName)
{
<tr>
<td>@item.PropertyName</td>
<td>@item.PropertyName</td>
<td>@item.PropertyName</td>
</tr>
}
</tbody>
</table>
Une autre façon d'utiliser C # Viewbag:
<table id="YourTableId" class="table table-bordered table-striped table-responsive table-hover">
<thead>
<tr>
<th align="left" class="yourTableTh">YourProperty</th>
<th align="left" class="yourTableTh">YourProperty2</th>
<th align="left" class="yourTableTh">YourProperty3</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
$.ajax({
contentType: "application/json",
type: "GET",
url: "https://localhost:44397/api/Values/Details/" + id,
success: function (data) {
alert('Welcome!');
// res = data;
var items = '';
$.each(data, function (i, item) {
var rows = "<tr>"
+ "<td class='yourTableTh'>" + item.YourProperty + "</td>"
+ "<td class='yourTableTh'>" + item.YourProperty2 + "</td>"
+ "<td class='yourTableTh'>" + item.YourProperty3 + "</td>"
+ "</tr>";
$('#YourTableId tbody').append(rows);
});
// window.location.href = "/Home/Details/" + data.id;
},
error: function (jqXHR, textStatus, errorThrown) {
$("#postResult").val(jqXHR.statusText);
}
});
</script>
Faites-moi savoir si vous avez des questions supplémentaires. J'espère que cela vous aidera.
existe-t-il un moyen d'appeler ces données de réussite dans cette table sans cette méthode que vous avez donnée?
Il existe de nombreuses façons, mais la boucle est courante car vous devez remplir une table. Mais dans certains frameworks JavaScript prend en charge sans boucle sur les données de réponse.
quelle façon vous attendez-vous pourrait me donner un indice?
@MdFaridJ'ai besoin d'obtenir mes données sur la table d'achat en utilisant un objet comme nous utilisons viewbag en C #. ici, je veux que les données de succès soient contenues dans la variable et j'en ai besoin pour passer chaque donnée dans cette table. est-il possible de faire comme ça?
Oui, vous pouvez le faire dans ce cas, vous devez régler certaines choses 1. @ {var yourVariable = ViewBag.ViewBagName; } 2. @foreach (var item in yourVariable) {
@item .value
} 3. Sa convention de nom sensible à la casse doit être conforme à votre collection. J'espère que tu as compris
mais dans ce cas, comment mes données de réussite sont utilisées, si possible, vous pouvez simplement modifier mon code.
J'ai également mis à jour ma réponse avec cet exemple.
ce n'est pas ce que je voulais dire .. puis-je prendre ces données de réussite comme sac de vue pour les utiliser dans mon code indiqué dans ma section de questions? (Je connais C # viewbag tout ce que je voulais comment l'utiliser dans le script)
Vous pouvez l'utiliser comme ceci var yourVarable = '@ ViewBag.ViewBagName'; dans votre script mais la bonne pratique que je vous ai déjà montrée en réponse.
De plus, si votre viewBag contient des données de type liste, vous devez effectuer une itération pour extraire cette valeur.
non j'ai utilisé la même manière mais les valeurs sont vides dans les champs
Je vous suggère fortement d'essayer ma réponse. Cela marcherait. ceci n'est pas recommandé var yourVarable = '@ ViewBag.ViewBagName';
en fait, j'avais fait crud en c # et tout fonctionne bien et je dois convertir ce c # en js dans le cshtml, donc lorsque j'utilise votre réponse affichée, je dois réécrire à nouveau toute mon API et mon référentiel.
J'espère que vous avez parcouru une autre réponse d'AakashRajni, cela ne concerne pas non plus les données de chaque champ, toutes les données sont extraites de la liste, mais cela ne se lie pas aux champs correspondants. il n'affiche pas les données dans la page html
Absolument pas. vous n'avez pas du tout besoin de réécrire votre code.
Je l'ai grâce. En fait, cela a fonctionné sur un autre projet et ici j'avais besoin d'un autre type et je l'ai obtenu grâce à l'aide.
Vous pouvez utiliser la vue partielle pour contenir les données de la table et renvoyer PartialViewResult à partir du contrôleur api, puis afficher la vue partielle de la fonction de réussite d'ajax. Voici les étapes:
_DetailsPartial
<div id="userdetail"></div>
@section Scripts{
<script>
var id = 1;
$.ajax({
//contentType: "application/json",
type: "GET",
url: "https://localhost:44343/api/Values/Details/" + id,
success: function (data) {
alert('Welcome!');
$("#userdetail").html(data);
// window.location.href = "/Home/Details/" + data.id;
},
error: function (jqXHR, textStatus, errorThrown) {
alert('Failed!');
}
});
</script>
}
Contrôleur Api, renvoyer PartialViewResult
[Route("api/[controller]/[action]")]
[ApiController]
public class ValuesController : ControllerBase
{
private readonly DemoDbContext _context;
public ValuesController(DemoDbContext context)
{
_context = context;
}
[HttpGet("{id}")]
public async Task<IActionResult> Details(int id)
{
var user = await _context.User.FindAsync(id);
var myViewData = new ViewDataDictionary(new Microsoft.AspNetCore.Mvc.ModelBinding.EmptyModelMetadataProvider(), new Microsoft.AspNetCore.Mvc.ModelBinding.ModelStateDictionary())
{ { "User", user } };
myViewData.Model = user;
return new PartialViewResult()
{
ViewName= "_DetailsPartial",
ViewData= myViewData
};
}
}
La vue principale qui contient la vue partielle, utilisez ajax pour afficher le résultat de la fonction de réussite dans
@model DemoTest.Models.User
<center><h1 style="color:red">User details</h1></center>
<div>
<table class="table">
<tr>
<td>ID</td>
<td>@Model.Id</td>
</tr>
<tr>
<td>FIRST NAME</td>
<td>@Model.Fname</td>
</tr>
<tr>
<td>LAST NAME</td>
<td>@Model.Lname</td>
</tr>
<tr>
<td>LOCATION</td>
<td>@Model.Location</td>
</tr>
<tr>
<td>Contact</td>
<td>@Model.Contact</td>
</tr>
<tr>
<td>Email</td>
<td>@Model.Email</td>
</tr>
<tr>
<td>Password</td>
<td>@Model.Password</td>
</tr>
<tr>
<td>Role</td>
<td>@Model.Category</td>
</tr>
<tr>
</table>
</div>
vous devez afficher la valeur dans une seule colonne ou dans plusieurs colonnes
J'ai besoin d'afficher chaque valeur dans les colonnes correspondantes
Si vous utilisez des pages rasoir, repo et demo peut vous aider. Fondamentalement, il y a une vue partielle rendant la partie ajax à l'intérieur de la page principale du rasoir. Le projet dépend d'un PagingTagHelper personnalisé avec support ajax.
Aviez-vous deux projets, un projet Web et une API Web? Souhaitez-vous utiliser ajax dans le projet Web pour appeler les méthodes du projet API Web, puis afficher la valeur de retour dans le projet Web?
@XueliChen j'ai une solution qui contient 2 contrôleurs api et home. Tout ce que je veux, c'est que je viens de convertir les commandes d'action de mon contrôleur domestique en ma vue en tant qu'ajax. mais je n'ai pas pu obtenir cette valeur dans ma table html.