How To Create List In Mvc

Updated date May 20, 2019

438k
3

This article shows how to show a list of users in a HTML page using MVC. I am assuming you are aware of MVC.

Introduction

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.

Adding-Model-MVC

2. Adding Controller

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

Adding-Controller-MVC

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:

List<UserModel> listuser = new List<UserModel>();
UserModel users =new UserModel();
users.UserName ="Devesh Omar" ;
users.Age = 12;
users.Gender ="M" ;
listuser.Add(users);
users =new UserModel();
users.UserName ="Ram Kumar" ;
users.Age = 12;
users.Gender ="M" ;
listuser.Add(users);
return View(listuser);

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

Adding-View

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

Adding-View1

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.

MVC

7. Modifying Global.asax

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

public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}" );
routes.MapRoute(
"Default" ,
"{controller}/{action}/{id}" ,
new { controller = "User" , action = "DisplayUserDetails" , id = UrlParameter.Optional }
);
}

The following are the modifications.

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

8. Ececution

Run the application and the following will be the output:

Output-MVC

Conclusion

This article has shown a very simple way to bind data from a model to a view.

Inside the code of the controller we can modify the code as per our requirements as we can have adatabase call and then we can fill the list of users from the database. Then we can pass a list of users to the view for display.