Динамически отображать данные таблицы/списка в MVC3/Razor из JsonResult?

Ответ 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() вернет объект List of 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>

All Set теперь вы можете получить доступ к URL-адресу, например yourdomain/User/List, и он предоставит вам список пользователей в таблице HTML.

Ответ 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 - это метод действий, который вы определили выше.

Надеюсь, это поможет.

UPDATE:

Вот как бы я это сделал.

Я всегда создаю класс модели представления для представления. В этом случае я бы назвал его чем-то вроде 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>

Ответ 3

Добавить вид:

• Папка просмотра правой кнопкой мыши
• Нажмите "Добавить" → "Просмотр"
• Нажмите "Создать строго типизированный вид"
• Выберите свой класс пользователя
• Выбрать список как шаблон леса

Добавьте контроллер и метод действий, чтобы вызвать представление:

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

Ответ 4

Вы можете сделать это легко с помощью KoGrid плагина для 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 }">

Пример

Ответ 5

Обычный способ сделать это:

• Вы получаете пользователей из базы данных в контроллере.
• Вы отправляете коллекцию пользователей в представление
• В представлении для объединения списка пользователей, создающих список.

Для этого вам не нужен JsonResult или jQuery.