从JsonResult在MVC3/Razor中动态显示表/列表数据？

Question

我有一个查看页面,users.cshtml.我有一个JsonResult操作方法,jsongetusers()返回json格式的用户列表.

在users.cshtml页面加载时,我想获取用户列表,构建表并显示它.使用Razor在ASP.Net MVC中实现此功能的最佳方法是什么？我对MVC3和Razor很新.我最初的想法是遍历json结果并使用javascript/jquery构建一个表并将其附加到DOM.但我猜想必须有更好的方法来做到这一点？

谢谢.

Answer 1

正如Mystere Man建议的那样,在这种情况下,首先只获取一个视图然后再次进行ajax调用以获取json结果.这是对服务器的2次调用.我想你可以在第一次调用中直接返回用户的HTML表.

我们将以这种方式做到这一点.我们将有一个强类型视图,它将用户列表的标记返回给浏览器,这个数据由一个动作方法提供,我们将使用http请求从我们的浏览器调用.

为用户提供ViewModel

public class UserViewModel
{
  public int UserID { set;get;}
  public string FirstName { set;get;}
   //add remaining properties as per your requirement

}

并在您的控制器中有一个方法来获取用户列表

public class UserController : Controller
{

   [HttpGet]
   public ActionResult List()
   {
     List<UserViewModel> objList=UserService.GetUsers();  // this method should returns list of  Users
     return View("users",objList)        
   }
}

假设UserService.GetUsers()方法将返回一个UserViewModel对象列表,该对象表示数据源中的usres列表(表)

在您的users.cshtml(位于Views/User文件夹下),

 @model List<UserViewModel>

 <table>

 @foreach(UserViewModel objUser in Model)
 {
   <tr>
      <td>@objUser.UserId.ToString()</td>
      <td>@objUser.FirstName</td>
   </tr>
 }
 </table>

现在,您可以访问所有URL yourdomain/User/List,它将为您提供HTML表格中的用户列表.

Answer 2

如果你真的需要走这条路,那么这就是你能做的.可能有更好的方法,但这就是我现在所拥有的一切.我没有进行数据库调用,我只使用了虚拟数据.请修改代码以适应您的方案.我曾经jQuery填充过HTML table.

在我的控制器中,我有一个调用的action方法GetEmployees,它返回一个JSON result包含所有员工的方法.您可以在此处调用存储库以从数据库返回用户:

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);
}

User类看起来像这样:

public class User
{
     public int Id { get; set; }
     public string FirstName { get; set; }
     public string LastName { get; set; }
}

在您的视图中,您可以拥有以下内容:

<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>

关于上面的代码:var url = '/Home/GetEmployees'; Home是控制器,GetEmployees是您在上面定义的操作方法.

我希望这有帮助.

更新:

我就是这样做的..

我总是为视图创建一个视图模型类.在这种情况下,我会称之为UserListViewModel:

public class UserListViewModel
{
     IEnumerable<User> Users { get; set; }
}

在我的控制器中,我将从对数据库的调用填充此用户列表,返回所有用户:

public ActionResult List()
{
     UserListViewModel viewModel = new UserListViewModel
     {
          Users = userRepository.GetAllUsers()
     };

     return View(viewModel);
}

在我看来,我会有以下内容:

<table>

@foreach(User user in Model.Users)
{
     <tr>
          <td>First Name:</td>
          <td>user.FirstName</td>
     </tr>
}

</table>

Answer 3

正常的做法是：

• 您从控制器中的数据库获取用户。
• 您将用户集合发送到视图
• 在视图中循环构建列表的用户列表。

为此，您不需要 JsonResult 或 jQuery。