Thursday, March 31, 2016

User List Page using Asp.Net MVC 2

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.

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:")]
        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;
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
        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>>" %>
<!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.



Search Flipkart Products:
Flipkart.com

No comments: