Here we going to make grid example in mvc3 razor:
So firat select new mvc project:
Step:1
Select Empty project
Step:2
You will see like this
Now go to solution explorer and in Models add new (UserNames.cs) class
file
Step:3
Add Class File
Step:4
You will see like this:
Now Write Given below code in (UserNames.cs )
Step:5
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MvcApplication_GridDemo_.Models
{
public class UserNames
{
public string Name { get; set; }
public string
ContactNo { get; set;
}
public string EmailId
{ get; set; }
public int Age { get; set; }
}
}
Step:5
Add Empty Controller (UserNameController.cs):
Solution Explorer(See like this):
Go to Controller UserNameController.cs
Type Given code in UserNameController.cs
Step:6
UserNameController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication_GridDemo_.Models;
namespace MvcApplication_GridDemo_.Controllers
{
public class UserNameController : Controller
{
//
// GET: /UserName/
public ActionResult
Index()
{
var userList = new List<UserNames>()
{
new UserNames(){Name="Dashrath",ContactNo="8889995564",EmailId="dashu@gmail.com",Age=20},
new UserNames(){Name="Gaurav",ContactNo="9889995564",EmailId="gaurav@gmail.com",Age=22},
new UserNames(){Name="Ajay",ContactNo="9989995564",EmailId="Ajay@gmail.com",Age=21},
new UserNames(){Name="Taufik",ContactNo="79989995564",EmailId="Taufik@gmail.com",Age=20},
new UserNames(){Name="Rohit",ContactNo="8889995564",EmailId="Rohit@gmail.com",Age=20},
new UserNames(){Name="Jaya",ContactNo="88899955123",EmailId="Jaya@gmail.com",Age=20},
new UserNames(){Name="Dashrath",ContactNo="8889995564",EmailId="dashu@gmail.com",Age=20},
new UserNames(){Name="Mahesh",ContactNo="8889995564",EmailId="daMaheshshu@gmail.com",Age=20},
new UserNames(){Name="Priyanka",ContactNo="8889995564",EmailId="Priyanka@gmail.com",Age=20},
new UserNames(){Name="Dashrath",ContactNo="8889995564",EmailId="dashu@gmail.com",Age=20},
new UserNames(){Name="Dashrath",ContactNo="8889995564",EmailId="dashu@gmail.com",Age=20},
new UserNames(){Name="Don",ContactNo="8889995564",EmailId="Don@gmail.com",Age=20},
new UserNames(){Name="Dashrath",ContactNo="8889995564",EmailId="dashu@gmail.com",Age=20},
new UserNames(){Name="Dashrath",ContactNo="8889995564",EmailId="dashu@gmail.com",Age=20},
new UserNames(){Name="Dashrath",ContactNo="8889995564",EmailId="dashu@gmail.com",Age=20},
new UserNames(){Name="Jaya",ContactNo="8889995564",EmailId="dashu@gmail.com",Age=20},
new UserNames(){Name="Dashrath",ContactNo="8889995564",EmailId="dashu@gmail.com",Age=20},
new UserNames(){Name="Dashrath",ContactNo="8889995564",EmailId="dashu@gmail.com",Age=20},
new UserNames(){Name="Jaya",ContactNo="8889995564",EmailId="Jaya@gmail.com",Age=20},
};
return View(userList);
}
}
}
Now RightClick on Index and add view:
Step:5
Add New View:
Step:7
you will see code (Index.cshtml):
@model IEnumerable<MvcApplication_GridDemo_.Models.UserNames>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<style type="text/css">
.webGrid
{
margin: 4px;
border-collapse: collapse;
width: 300px;
}
.header
{
background-color: #E9E9C0;
font-weight: bold;
color: #FFF;
}
.webGrid th, .webGrid td
{
border: 1px solid #C0C0C0;
padding: 5px;
}
.alt
{
background-color: #CCFFFF;
color: #000;
}
.person
{
width: 200px;
font-weight: bold;
}
</style>
</head>
<body>
<br />
<br />
<div align="center">
<h1>
Grid Example in MVC 3</h1>
</div>
<div align="center">
@{
var grid = new WebGrid(Model, canPage: true,
rowsPerPage: 5);
grid.Pager(WebGridPagerModes.NextPrevious);
@grid.GetHtml(tableStyle:
"webGrid",
headerStyle: "header",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column("Name", "Name", canSort: true, format: @<b>@item.Name</b>, style: "Person"),
grid.Column("ContactNo", "ContactNo", canSort: true),
grid.Column("EmailId", "EmailId", canSort: true),
grid.Column("Age", "Age", canSort: true)
))
}
</div>
</body>
</html>
Now Go to Global.asax.cs
file and change given 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 = "UserName",
action = "Index", id = UrlParameter.Optional } // Parameter defaults
);
}
Step :8
Click On Pager link 2:
Click On Pager link Last:
I hope This Program will help You .If You have any Query Then type.I will try to solve Your Query.
-Ravikumhar
Click To download Source
good
ReplyDelete