Display a table list data dynamically in MVC3 Razor from a JsonResult

Question

I have a view page  users cshtml  And I have a JsonResult action method  jsongetusers   that returns the list of users in json format    On users cshtml page load  I want to get the list of users  build a table and display it  What is the best way to implement this in ASP Net MVC using Razor  I am pretty new to MVC3 and Razor  My initial thought was to loop through the json result and build a table using javascript jquery and append it to the DOM  But I am guessing there must be a better way to do this   Thanks

User · Answer

The normal way of doing it is    You get the users from the database in controller  You send a collection of users to the View In the view to loop the list of users building the list    You don t need a JsonResult or jQuery for this

User · Answer

As  Mystere Man suggested  getting just a view first and then again making an ajax call again to get the json result is unnecessary in this case  that is 2 calls to the server  I think you can directly return an HTML table of Users in the first call    We will do this in this way  We will have a strongly typed view which will return the markup of list of users to the browser and this data is being supplied by an action method which we will invoke from our browser using an http request   Have a ViewModel for the User  public class UserViewModel     public int UserID   set get     public string FirstName   set get        add remaining properties as per your requirement      and in your controller have a method to get a list of Users  public class UserController   Controller        HttpGet     public ActionResult List             List lt UserViewModel gt  objList UserService GetUsers        this method should returns list of  Users      return View  users  objList                   Assuming that UserService GetUsers   method will return a List of UserViewModel object which represents the list of usres in your datasource  Tables   and in your users cshtml   which is under Views User folder       model List lt UserViewModel gt     lt table gt     foreach UserViewModel objUser in Model         lt tr gt         lt td gt  objUser UserId ToString   lt  td gt         lt td gt  objUser FirstName lt  td gt      lt  tr gt       lt  table gt    All Set now you can access the url like yourdomain User List and it will give you a list of users in an HTML table

User · Answer

If you really need to go this way  then this is what you can do   There are probably better ways of doing it  but this is all that I have at the moment   I did no database calls  I just used dummy data   Please modify the code to fit in with your scenario   I used jQuery to populate the HTML table   In my controller I have the an action method called GetEmployees that returns a JSON result with all the employees   This is where you would call your repository to return the users from a database   public ActionResult GetEmployees          List lt User gt  userList   new List lt User gt           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       The User class looks like this   public class User        public int Id   get  set         public string FirstName   get  set         public string LastName   get  set        In your view you could have the following    lt div id  users  gt        lt table gt  lt  table gt   lt  div gt    lt script gt          document  ready function                 var url     Home GetEmployees                getJSON url  function  data                      each data  function  key  val                         var user     lt tr gt  lt td gt     val FirstName     lt  td gt  lt  tr gt                             users table   append user                                                lt  script gt    Regarding the code above  var url     Home GetEmployees   Home is the controller and GetEmployees is the action method that you defined above   I hope this helps   UPDATE   This is how I would have done it    I always create a view model class for a view   In this case I would have called it something like UserListViewModel   public class UserListViewModel        IEnumerable lt User gt  Users   get  set        In my controller I would populate this Users list from a call to the database returning all the users   public ActionResult List          UserListViewModel viewModel   new UserListViewModel                  Users   userRepository GetAllUsers                 return View viewModel       And in my view I would have the following    lt table gt    foreach User user in Model Users          lt tr gt             lt td gt First Name  lt  td gt             lt td gt user FirstName lt  td gt        lt  tr gt      lt  table gt

User · Answer

You can do this easily with the KoGrid plugin for KnockoutJS    lt script type  text javascript  gt        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            lt  script gt    lt div data-bind  koGrid    data  myObsArray    gt    Sample

User · Answer

Add a View    Right-Click View Folder  Click Add -  View Click Create a strongly-typed view Select your User class Select List as the Scaffold template   Add a controller and action method to call the view   public ActionResult Index         var users   DataContext GetUsers        return View users

[asp.net-mvc-3] Display a table/list data dynamically in MVC3/Razor from a JsonResult?

Examples related to asp.net-mvc-3

Examples related to razor