Wyświetla dane tabeli/listy dynamicznie w MVC3/Razor z JsonResult?

Question

Mam stronę widoku, users.cshtml. I mam metodę działania JsonResult, jsongetusers(), która zwraca listę użytkowników w formacie json.

Podczas ładowania strony users.cshtml chcę uzyskać listę użytkowników, zbudować tabelę i wyświetlić ją. Jaki jest najlepszy sposób wdrożenia tego w ASP.Net MVC przy użyciu Razor? Jestem całkiem nowy dla MVC3 i Razor. Moja pierwsza myśl polegała na przejściu przez wynik json i zbudowaniu tabeli przy użyciu javascript/jquery i dołączenia jej do DOM. Ale zgaduję, że musi być lepszy sposób na zrobienie tego?

Dzięki.

Answer 1

normalny sposób to zrobić to:

• Otrzymasz użytkowników z bazy danych w kontrolerze.
• Wysyłasz kolekcję użytkowników do widoku
• W celu zapętlenia listy użytkowników budujących listę.

Nie potrzebujesz do tego JsonResult lub jQuery.

Answer 2

dodać widok:

1. Right-Click widoku folderów
2. Kliknij Add -> Zobacz
3. Kliknij Utwórz silnie wpisany widok
4. Wybierz użytkownika klasę
5. Wybierz Lista jako szablon rusztowań

Dodaj metodę kontrolera i akcji, aby wywołać widok:

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

Answer 3

Jak Mystere Man zasugerował, dostając tylko widok, a potem ponownie wykonując połączenie ajax ponownie, aby uzyskać wynik json jest w tym przypadku niepotrzebny. to są 2 połączenia z serwerem. Myślę, że możesz bezpośrednio zwrócić tabelę HTML użytkowników w pierwszym wywołaniu.

Zrobimy to w ten sposób. Będziemy mieć mocno napisany widok, który zwróci listę użytkowników do przeglądarki, a dane te są dostarczane przez metodę działania, którą wywołają nas z naszej przeglądarki za pomocą żądania http.

Mają ViewModel dla Użytkownika

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

} 

aw kontrolerze mieć metodę, aby uzyskać listę użytkowników

public class UserController : Controller 
{ 

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

Zakładając, że UserService.GetUsers() metoda zwróci Lista obiektów UserViewModel reprezentujących listę użytkowników w źródle danych (tabelach)

oraz użytkowników.cshtml (który jest pod views/folderu użytkownika),

@model List<UserViewModel> 

<table> 

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

All Set teraz można uzyskać dostęp do adresu URL jak yourdomain/User/List i to daje listę użytkowników w tabeli HTML.

Answer 4

Jeśli naprawdę potrzebujesz iść tą drogą, to jest to, co możesz zrobić. Prawdopodobnie istnieją lepsze sposoby na zrobienie tego, ale to wszystko, co mam w tej chwili. Nie wykonałem żadnych połączeń z bazami danych, użyłem tylko danych fikcyjnych. Zmodyfikuj kod, aby dopasować go do scenariusza. Użyłem jQuery do wypełnienia HTML table.

W moim kontrolerze mam metodę działania o nazwie GetEmployees, która zwraca JSON result ze wszystkimi pracownikami. To jest miejsce, gdzie można by nazwać repozytorium powrócić użytkowników z bazy danych:

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

Klasa Użytkownik wygląda następująco:

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

Państwa zdaniem można mieć następujący:

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

Jeśli chodzi o powyższy kod: var url = '/Home/GetEmployees';Home to kontroler i GetEmployees to metoda działania zdefiniowana powyżej.

Mam nadzieję, że to pomoże.

UPDATE:

To jak bym to zrobił ..

zawsze utworzyć klasę widoku modelu do widoku. W tym przypadku bym nazwał to coś podobnego UserListViewModel:

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

w moim kontrolera chciałbym wypełnić tę listę użytkowników z połączenia z bazą danych powrocie wszystkich użytkowników:

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

    return View(viewModel); 
} 

i moim zdaniem Chciałbym mieć:

<table> 

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

</table> 

Answer 5

można to zrobić łatwo z KoGrid plugin do 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 }"> 

Sample