In this post we shall create a simple User List page using Asp.Net MVC 2. We will make use of the
Empty Web Application template to create this sample so that we will understand
the basics of MVC.
The User List page will display a list of users in a Table. The List object containing the list of users will be passed from the Controller to the View, the View loops through the users and displays the user details in Table.
The User List page will display a list of users in a Table. The List object containing the list of users will be passed from the Controller to the View, the View loops through the users and displays the user details in Table.
1. Open Visual Studio 2008
2. Create a new Project of type Asp.Net MVC 2 Empty Web Application
3. Give a Name, Location and save the Project
4. This will create the basic Project structure.
5. Now, Right click on the Models folder and select Add -> Class
6. Name the class file as “UserModel.cs”, and click Add
7. Open the model file and add the following code.
using System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.Mvc;
using
System.ComponentModel;
using
System.ComponentModel.DataAnnotations;
namespace
MvcSample.Models
{
public class UserModel
{
[DisplayName("Name:")]
public string Name { get; set; }
[DisplayName("Age:")]
public int Age { get; set; }
[DisplayName("Gender:")]
public char Gender { get; set; }
[DisplayName("Address:")]
public string Address { get;
set; }
[DisplayName("Email:")]
public string Email{ get; set; }
[DisplayName("Country:")]
[DisplayName("Country:")]
public string Country
{ get; set; }
}
}
8. Now, Right click on the Controllers folder and select Add -> Controller
9. Name the controller as “UserController” and click Add
10. Now, open the controller file add the reference to the Model file
using MvcSample.Models;
11. Add the following code to the Controller file.
using System;
8. Now, Right click on the Controllers folder and select Add -> Controller
9. Name the controller as “UserController” and click Add
10. Now, open the controller file add the reference to the Model file
using MvcSample.Models;
11. Add the following code to the Controller file.
using System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.Mvc;
using
MvcSample.Models;
namespace
MvcSample.Controllers
{
public class UserController
: Controller
{
public ActionResult List()
{
return
View(GetUsers());
}
}
//
// We will ganarate a sample list of 10 users in a Loop
// We will ganarate a sample list of 10 users in a Loop
private
List<UserModel>
GetUsers()
{
List<UserModel> lstUsers = new List<UserModel>();
UserModel
objUser;
//
for
(int i = 1; i <= 10; i++)
{
objUser = new UserModel();
objUser.Name = "User " + i.ToString();
objUser.Age = i + 30;
objUser.Gender = 'M';
objUser.Address = "Address " + i.ToString();
objUser.Email = "user" + i.ToString() + "@yahoo.com";
objUser.Country = "USA";
//
lstUsers.Add(objUser);
}
//
return
lstUsers;
}
}
}
11. Build the Project
12. Right click on any of the List methods and select “Add View”
13. Give the name List for the view
14. Check the “Create as Strongly Typed View” Checkbox
15. In the View data Classes Dropdown select the model “MvcSamples.Models.UserModel”
16. In the View Content dropdown select List, and click Add.
17. This will create a folder User
under the Views folder and will also add the List.aspx file
18. Open the List.aspx file, Visual Studio would have already added code to list users, perform the necessary modifications for formatting and to remove unwanted fields. The final code should look as follows.
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcSample.Models.UserModel>>" %>
18. Open the List.aspx file, Visual Studio would have already added code to list users, perform the necessary modifications for formatting and to remove unwanted fields. The final code should look as follows.
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcSample.Models.UserModel>>" %>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
>
<head runat="server">
<title>List</title>
</head>
<body>
<table border="1" cellpadding="1" cellspacing="1" align="center">
<tr>
<th>
Name
</th>
<th>
Age
</th>
<th>
Gender
</th>
<th>
Address
</th>
<th>
Email
</th>
<th>
Country
</th>
<th>Actions</th>
</tr>
<% foreach (var item in Model)
{ %>
<tr>
<td>
<%=
Html.Encode(item.Name) %>
</td>
<td>
<%=
Html.Encode(item.Age) %>
</td>
<td>
<%=
Html.Encode(item.Gender) %>
</td>
<td>
<%=
Html.Encode(item.Address) %>
</td>
<td>
<%=
Html.Encode(item.Email) %>
</td>
<td>
<%=
Html.Encode(item.Country) %>
</td>
<td>
<%=
Html.ActionLink("Edit", "Edit", new
{ /* id=item.PrimaryKey */ }) %> |
<%=
Html.ActionLink("Details", "Details", new
{ /* id=item.PrimaryKey */ })%> |
<%=
Html.ActionLink("Delete", "Delete", new
{ /* id=item.PrimaryKey */ })%>
</td>
</tr>
<% } %>
<tr>
<td colspan="7" align="right">
<%=
Html.ActionLink("Create New", "Create") %>
</td>
</tr>
</table>
</body>
</html>
19. Build and run the application
20. In the address bar append /User/View to the root path.
http://localhost:3655/User/View
21. The list of users added in the controller will get displayed in a Table format.
1 comment:
Nice post, things explained in details. Thank You.
Post a Comment