webentwicklung-frage-antwort-db.com.de

Tabellen-/Listendaten dynamisch in MVC3/Razor von einem JsonResult anzeigen?

Ich habe eine Ansichtsseite, users.cshtml. Und ich habe eine JsonResult-Aktionsmethode, jsongetusers (), die die Liste der Benutzer im Json-Format zurückgibt. 

Beim Laden der Seite "users.cshtml" möchte ich die Liste der Benutzer abrufen, eine Tabelle erstellen und anzeigen. Was ist der beste Weg, um dies in ASP.Net MVC mithilfe von Razor zu implementieren? Ich bin ziemlich neu für MVC3 und Razor. Mein erster Gedanke war, das Json-Ergebnis zu durchlaufen und eine Tabelle mit Javascript/Jquery zu erstellen und an das DOM anzuhängen. Aber ich vermute, es muss einen besseren Weg geben, dies zu tun?

Vielen Dank.

12
user471317

Wie Mystere Man vorschlug, ist es in diesem Fall nicht erforderlich, sich zuerst einen Überblick zu verschaffen und dann erneut einen Ajax-Aufruf durchzuführen, um das Json-Ergebnis zu erhalten. das sind 2 Aufrufe an den Server. Ich denke, Sie können beim ersten Aufruf direkt eine HTML-Tabelle mit Benutzern zurückgeben. 

Wir werden das auf diese Weise tun. Wir haben eine stark typisierte Ansicht, die die Markup-Liste der Benutzer an den Browser zurückgibt. Diese Daten werden von einer Aktionsmethode bereitgestellt, die wir von unserem Browser mit einer http-Anfrage aufrufen.

Habe ein ViewModel für den Benutzer

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

}

und in Ihrem Controller haben Sie eine Methode, um eine Liste von Benutzern abzurufen

public class UserController : Controller
{

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

Angenommen, die UserService.GetUsers () -Methode gibt ein List of UserViewModel-Objekt zurück, das die Liste der Benutzer in Ihrer Datenquelle (Tables) darstellt.

und in Ihrer Benutzer.cshtml (die sich unter Ansichten/Benutzerordner befindet), 

 @model List<UserViewModel>

 <table>

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

All Set können Sie jetzt wie yourdomain/User/List auf die URL zugreifen und erhalten eine Liste der Benutzer in einer HTML-Tabelle.

20
Shyju

Wenn Sie wirklich diesen Weg gehen müssen, können Sie dies tun. Es gibt wahrscheinlich bessere Wege, aber das ist alles, was ich momentan habe. Ich habe keine Datenbankaufrufe gemacht, ich habe nur Dummy-Daten verwendet. Bitte ändern Sie den Code entsprechend Ihrem Szenario. Ich habe jQuery verwendet, um den HTML table aufzufüllen.

In meinem Controller habe ich eine Aktionsmethode namens GetEmployees, die einen JSON result mit allen Mitarbeitern zurückgibt. Hier würden Sie Ihr Repository aufrufen, um die Benutzer aus einer Datenbank zurückzugeben:

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

Die Benutzerklasse sieht folgendermaßen aus:

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

Ihrer Ansicht nach könnten Sie Folgendes haben:

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

Zum obigen Code: var url = '/Home/GetEmployees';Home ist der Controller und GetEmployees ist die von Ihnen oben definierte Aktionsmethode.

Ich hoffe das hilft.

UPDATE:

So hätte ich es gemacht ..

Ich erstelle immer eine Ansichtsmodellklasse für eine Ansicht. In diesem Fall hätte ich es etwas wie UserListViewModel genannt:

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

In meinem Controller fülle ich diese Benutzerliste mit einem Aufruf an die Datenbank auf, der alle Benutzer zurückgibt:

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

     return View(viewModel);
}

Und aus meiner Sicht hätte ich folgendes:

<table>

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

</table>
7
Brendan Vogt

Mit dem KoGrid Plugin für KnockoutJS ist dies problemlos möglich.

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

Probe

1
Ryan

Ansicht hinzufügen:

  1. Klicken Sie mit der rechten Maustaste auf Ordner anzeigen 
  2. Klicken Sie auf Hinzufügen -> Ansicht
  3. Klicken Sie auf Erstellen Sie eine stark typisierte Ansicht
  4. Wählen Sie Ihre User Klasse aus
  5. Wählen Sie List als Scaffold-Vorlage

Fügen Sie einen Controller und eine Aktionsmethode hinzu, um die Ansicht aufzurufen:

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

Die normale Vorgehensweise ist:

  • Sie erhalten die Benutzer aus der Datenbank im Controller.
  • Sie senden eine Sammlung von Benutzern an die Ansicht
  • In der Ansicht, um die Liste der Benutzer zu durchlaufen, die die Liste erstellt haben.

Sie benötigen dafür kein JsonResult oder jQuery. 

0
Romias