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:
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 n'avez pas besoin d'un JsonResult ou d'un jQuery pour cela.