Afficher dynamiquement une table/liste de données dans MVC3/Razor à partir d’un JsonResult?
J'ai une page de vue, users.cshtml. Et j’ai une méthode d’action JsonResult, jsongetusers () qui renvoie la liste des utilisateurs au format json.
Lors du chargement de la page users.cshtml, je souhaite obtenir la liste des utilisateurs, créer un tableau et l’afficher. Quel est le meilleur moyen d'implémenter cela dans ASP.Net MVC à l'aide de Razor? Je suis assez nouveau pour MVC3 et Razor. Mon idée initiale était de parcourir le résultat JSON et de construire une table à l'aide de javascript/jQuery et de l'ajouter au DOM. Mais je suppose qu'il doit y avoir une meilleure façon de faire cela?
Merci.
Comme l’a suggéré Mystere Man, il est inutile dans ce cas d’obtenir une première vue, puis de refaire un appel ajax pour obtenir le résultat json. c'est 2 appels au serveur. Je pense que vous pouvez directement renvoyer un tableau HTML des utilisateurs lors du premier appel.
Nous ferons cela de cette façon. Nous aurons une vue fortement typée qui renverra le balisage de la liste des utilisateurs au navigateur et ces données seront fournies par une méthode d'action que nous invoquerons à partir de notre navigateur à l'aide d'une requête http.
Avoir un ViewModel pour l'utilisateur
public class UserViewModel
{
public int UserID { set;get;}
public string FirstName { set;get;}
//add remaining properties as per your requirement
}
et dans votre contrôleur ont une méthode pour obtenir une liste d'utilisateurs
public class UserController : Controller
{
[HttpGet]
public ActionResult List()
{
List<UserViewModel> objList=UserService.GetUsers(); // this method should returns list of Users
return View("users",objList)
}
}
En supposant que cette méthode UserService.GetUsers () renvoie un objet List of UserViewModel qui représente la liste des utilisateurs dans votre source de données (Tables)
et dans le fichier users.cshtml (sous le dossier Views/User),
@model List<UserViewModel>
<table>
@foreach(UserViewModel objUser in Model)
{
<tr>
<td>@objUser.UserId.ToString()</td>
<td>@objUser.FirstName</td>
</tr>
}
</table>
Tous les éléments définis maintenant, vous pouvez accéder à l'URL telle que yourdomain/User/List. Elle vous donnera une liste d'utilisateurs dans un tableau HTML.
Si vous devez vraiment suivre cette voie, voici ce que vous pouvez faire. Il y a probablement de meilleures façons de le faire, mais c'est tout ce que j'ai pour le moment. Je n'ai fait aucun appel à la base de données, je viens d'utiliser des données factices. Veuillez modifier le code pour qu'il corresponde à votre scénario. J'ai utilisé jQuery pour remplir le HTML table.
Dans mon contrôleur, j'ai une méthode d'action appelée GetEmployees qui renvoie un JSON result avec tous les employés. C'est ici que vous appelez votre référentiel pour renvoyer les utilisateurs d'une base de données:
public ActionResult GetEmployees()
{
List<User> userList = new List<User>();
User user1 = new User
{
Id = 1,
FirstName = "First name 1",
LastName = "Last name 1"
};
User user2 = new User
{
Id = 2,
FirstName = "First name 2",
LastName = "Last name 2"
};
userList.Add(user1);
userList.Add(user2);
return Json(userList, JsonRequestBehavior.AllowGet);
}
La classe User ressemble à ceci:
public class User
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
}
À votre avis, vous pourriez avoir ce qui suit:
<div id="users">
<table></table>
</div>
<script>
$(document).ready(function () {
var url = '/Home/GetEmployees';
$.getJSON(url, function (data) {
$.each(data, function (key, val) {
var user = '<tr><td>' + val.FirstName + '</td></tr>';
$('#users table').append(user);
});
});
});
</script>
En ce qui concerne le code ci-dessus: var url = '/Home/GetEmployees';Home est le contrôleur et GetEmployees est la méthode d'action que vous avez définie ci-dessus.
J'espère que ça aide.
METTRE À JOUR:
Voilà comment je l'aurais fait ..
Je crée toujours une classe de modèle de vue pour une vue. Dans ce cas, je l'aurais appelé quelque chose comme UserListViewModel:
public class UserListViewModel
{
IEnumerable<User> Users { get; set; }
}
Dans mon contrôleur, je peuplerais cette liste d'utilisateurs à partir d'un appel à la base de données renvoyant tous les utilisateurs:
public ActionResult List()
{
UserListViewModel viewModel = new UserListViewModel
{
Users = userRepository.GetAllUsers()
};
return View(viewModel);
}
Et à mon avis j'aurais ce qui suit:
<table>
@foreach(User user in Model.Users)
{
<tr>
<td>First Name:</td>
<td>user.FirstName</td>
</tr>
}
</table>
Vous pouvez le faire facilement avec le plugin KoGrid pour KnockoutJS.
<script type="text/javascript">
$(function () {
window.viewModel = {
myObsArray: ko.observableArray([
{ id: 1, firstName: 'John', lastName: 'Doe', createdOn: '1/1/2012', birthday: '1/1/1977', salary: 40000 },
{ id: 1, firstName: 'Jane', lastName: 'Harper', createdOn: '1/2/2012', birthday: '2/1/1976', salary: 45000 },
{ id: 1, firstName: 'Jim', lastName: 'Carrey', createdOn: '1/3/2012', birthday: '3/1/1985', salary: 60000 },
{ id: 1, firstName: 'Joe', lastName: 'DiMaggio', createdOn: '1/4/2012', birthday: '4/1/1991', salary: 70000 }
])
};
ko.applyBindings(viewModel);
});
</script>
<div data-bind="koGrid: { data: myObsArray }">
Ajouter une vue:
- Dossier Afficher par clic droit
- Cliquez sur Ajouter -> Afficher
- Cliquez sur Créer une vue fortement typée
- Sélectionnez votre Utilisateur classe
- Sélectionnez Liste en tant que Modèle d'échafaudage
Ajoutez un contrôleur et une méthode d'action pour appeler la vue:
public ActionResult Index()
{
var users = DataContext.GetUsers();
return View(users);
}
La façon normale de le faire est:
- Vous obtenez les utilisateurs de la base de données dans le contrôleur.
- Vous envoyez une collection d'utilisateurs à la vue
- Dans la vue pour boucler la liste des utilisateurs qui construisent la liste.
Vous n'avez pas besoin d'un JsonResult ou d'un jQuery pour cela.