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>

全部立即设置您可以访问yourdomain/User/List之类的网址，它会在HTML表格中为您提供用户列表。

Answer 2

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

在我的控制器中，我有一个名为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

添加视图：

右键单击“查看文件夹”
点击添加 - ＆gt;图
点击创建强类型视图
选择用户类
选择列表作为脚手架模板

添加控制器和操作方法以调用视图：

public ActionResult Index()
{
    var users = DataContext.GetUsers();
    return View(users);
}

Answer 4

正常的做法是：

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

你不需要JsonResult或jQuery。

Answer 5

您可以使用KnockoutJS的KoGrid插件轻松完成此操作。

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

Sample

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

5 个答案: