Skip to main content

Bind List of Objects to View Using ASP.net 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.



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






  • elect 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.
public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
 
    routes.MapRoute(
        "Default"// Route name        "{controller}/{action}/{id}"// URL with parameters                new { controller = "User", action = "DisplayUserDetails", id = UrlParameter.Optional } // Parameter defaults    );
    
}
The following are the modifications.

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

8. Ececution
Run the application and the following will be the output:


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.

Comments

Contact Form

Name

Email *

Message *

Popular posts from this blog

Exporting DataTable to Excel in C# Using Interop

Introduction I would like to share a utility that can be used to export a datatable to Excel file using C#. We have various approaches to perform this activity. In ASP.NET we can do this by changing the Content type to xls but in C# .Net we might have various other approaches. Through this article we will learn how to export a data table to Excel using Interop. Code and Steps Here in this application we will use a Sample datatable and then learn how to export data to an Excel file. We will learn the following things in this article: Creating Excel file using C# Writing data to cells Formatting data to cells Working with Excel range 1. Adding References First we need to add a reference for Microsoft.office.interop.Excel as in the following: 2. Adding sample data table to the code Use the following code to add the sample data table:     static   DataTable  GetTable()     {       ...

Adding CheckBox Column in DataGridView in C# Window Forms

Introduction  I would like to share three ways to add a checkbox to a DataGridView in a C# Windows Forms application. We will learn the following three ways to add a checkbox to a DataGridView: Binding a List to a DataGridView having a bool property Binding a datatable to a DataGridView having a bool column Adding a checkbox column (DataGridViewCheckBoxColumn) to the DataGridView. Procedure 1. Binding a List to a DataGridView having a bool property. Add the following class to the project: public   class  Emp   {       public   bool  isMarried {  get ;  set ; }       public   string  Name {  get ;  set ; }       public   string  city {  get ;  set ; }      }   We have added isMarried as a Boolean property.   Creating a List of Emp c...

Binding CheckBoxList in ASP.Net MVC

Blogspot Introduction I would like to share how to bind the checkbox list in MVC. I will use a Model (a class file) to define various attributes for checkboxes. For a basic understanding of MVC kindly use the following link: ASP.NET MVC Overview The following is the procedure. 1. Creating Model We created a "SubjectModel" class under the Models folder and defined the following two properties: Subject: to display text Selected: to display check/uncheck 2. Creating the controller We created a Controller "BindingCheckBoxController" under the controllers folder We created an Action having the name = "DisplaycheckBoxes" We created a list of Subjects (Subject model class) Returning a list of subjects to the View. public  ActionResult DisplayCheckboxes() {     List<SubjectModel> listsubject =  new  List<SubjectModel>();     listsubject.Add( new  SubjectModel( "Physics" , true )); ...