Simple Way to Bind List of Objects to View Using MVC

I would like to show a list of users in a HTML page using MVC. I am assuming you are aware of MVC.

Use the following procedure to create a sample of that.

1. Adding Model

We have added the file UserModel.cs in the Models folder.

It has username, age and Gender as properties. The various attributes have been defined for validations.

2. Adding Controller

Right-click on the controller folder and add UserController.cs.

We have added the file UserContoller.cs inside the Controller folder and the Created DisplaUserDetails() Method. Inside this method we created a list of users and passed it to the view.

Here is a list of users that basically is the list of UserModels:

1. List<UserModel> listuser = new List<UserModel>();  
2. UserModel users = new UserModel();  
3.    
4. users.UserName = "Devesh Omar";  
5. users.Age = 12;  
6. users.Gender = "M";  
7. listuser.Add(users);  
8.    
9. users = new UserModel();  
10. users.UserName = "Ram Kumar";  
11. users.Age = 12;  
12. users.Gender = "M";  
13. listuser.Add(users);  
14. return View(listuser);   // here we are passing data to view.  

Here in the last line we are passing a list of users to the View using View(listuser), because our purpose is to display a list of users in the View page. 

3. Adding View

a. Right-click on DisplayUserDetails() and click on "Add View":

b. After clicking on "Add View" we will get the following screen.

• Select the Checkbox "Strongly-typed view"

• Select "UserModel" from the View Data class dropdown

• Select "List" from the View content dropDown.

• Then click on the "Add" button.

4. Now after Step 3, we will have a strongly typed View, with the name DisplayUserDetails.aspx.

5. Here in the MVC architecture we do not have any code – behind file.

6. The folder having the name "User" is automatically created.

We have the folder with the name User because we created the Controller with the name UserController.

7. Modifying Global.asax

We have some default settings of the Global.asax file; we need to modify it as in the following code.

1. public static void RegisterRoutes(RouteCollection routes)  
2. {  
3.     routes.IgnoreRoute("{resource}.axd/{*pathInfo}");  
4.    
5.     routes.MapRoute(  
6.         "Default", // Route name  
7.         "{controller}/{action}/{id}", // URL with parameters  
8.                 new { controller = "User", action = "DisplayUserDetails", id = UrlParameter.Optional } // Parameter defaults  
9.     );  
10.       
11. }  

The following are the modifications.

a. action = "DisplayUserDetails"
b. controller = "User"

8. Ececution

Run the application and the following will be the output: