In this article, I am going to explain you ASP.NET MVC WebGrid paging, Sorting and display progress bar or loading image while paging or sorting WebGrid. We will be using visual studio 2013, sql server 2008 r2 and Entity Framework 6.0.
This article is extension to previous one. In the previous article, we used Dapper ORM to load data but in this demo we will use Entity Framework 6.0 to load record from database and to delete record using checkbox and delete button. Below is the link.
WebGrid Demo
Below is step by step tutorial.
Creating table
Below is the scripts to create a tbl_Employee table and add some dummy data.
CREATE TABLEtbl_Employee
(
EmpID INT PRIMARYKEY IDENTITY,
Name VARCHAR(100),
Salary INT,
City VARCHAR(50),
)
GO
INSERT INTOtbl_Employee VALUES('Rahul',10000,'Mumbai')
INSERT INTOtbl_Employee VALUES('Deepak',15200,'Mumbai')
INSERT INTOtbl_Employee VALUES('Savio',15000,'Delhi')
INSERT INTOtbl_Employee VALUES('Yogesh',10500,'Mumbai')
INSERT INTOtbl_Employee VALUES('Sachin',17000,'Chennai')
INSERT INTOtbl_Employee VALUES('Ponting',80000,'Sydney')
INSERT INTOtbl_Employee VALUES('Josh',24463,'Perth')
INSERT INTOtbl_Employee VALUES('Johnson',24562,'Melbourne')
INSERT INTOtbl_Employee VALUES('Gimmy',32456,'Perth')
INSERT INTOtbl_Employee VALUES('Rocy',68355,'Sydney')
INSERT INTOtbl_Employee VALUES('Rock',99999,'New York')
INSERT INTOtbl_Employee VALUES('Savy',15465,'Chicago')
INSERT INTOtbl_Employee VALUES('Todd',24562,'New York')
INSERT INTOtbl_Employee VALUES('Mary',35485,'New York')
INSERT INTOtbl_Employee VALUES('Mike',15245,'Chicago')
Creating ASP.NET MVC Project
Next step is to create asp.net mvc project.
Go to File → New → Project. A new window will be open as shown below.
Now go to Web and select .NET Framework 4.5 and give project name and click on OK .
Now new window will open as shown below.
Now Select Empty Template, check on MVC checkbox and click on OK.
Now, a new project will be created as shown below.
Installing Entity Framework and Adding EDMX File
Entity framework will already be included in application if you take .net framework version 4.5. You can check entity framework in references folder of application. Next step is to add .edmx file as shown below.
Go to Model folder → Add → New Item. A new window will be open as shown below.
Go to Data Tab and select ADO.NET Entity Data Model and give its name SampleModel.edmx and click on OK. |
|
| Select Generate from database and Click on next |
|
| Click on New Connection. |
|
| Select your server, write your credentials, select database and test for connection. |
|
| Write connection string name. |
|
| Click select your table tbl_Employee |
|
Now, rebuild your application.
Adding Controller
Next step is to add controller to application. Add a new empty controller class named as HomeController and add two action methods as shown below. Index method is used to return list of employee to the Index view and DeleteRecords is post method used to delete the records.
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.Mvc;
usingWebGridDemo.Models;
namespaceWebGridDemo.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
SampleEntities obj = new SampleEntities();
IEnumerabletbl_Employee> employee = obj.tbl_Employee.ToList();
return View(employee);
}
[HttpPost]
public ActionResult DeleteRecords(string[] EmpIDs)
{
if (EmpIDs != null && EmpIDs.Length > 0)
{
foreach (var id in EmpIDs)
{
//to delete Single record
//method 1
using(SampleEntities entity = new SampleEntities())
{
int idToRemove = Convert.ToInt32(id);
var data = entity.tbl_Employee.SingleOrDefault(x => x.EmpID == idToRemove); //returns a single item
if (data != null)
{
entity.tbl_Employee.Remove(data);
entity.SaveChanges();
}
}
/*
//method 2
using (SampleEntities entity = new SampleEntities())
{
var employer = new tbl_Employee { EmpID = Convert.ToInt32(id) };
entity.tbl_Employee.Attach(employer);
entity.tbl_Employee.Remove(employer);
entity.SaveChanges();
}
*/
}
}
return RedirectToAction("Index");
}
}
}
Adding View
Next step is to add view. Right click inside index action method and add a new view named as Index and select empty model and add a View. Now open Index.cshtml view which is created inside Views/Home folder. Replace all code with below code.
IEnumerabletbl_Employee>
@{
ViewBag.Title = "WebGrid Paging Sorting";
var grid = new WebGrid(canSort: true, rowsPerPage: 5, ajaxUpdateContainerId: "gridContent");
grid.Bind(source: Model);
}
style type="text/css">
.header_style {
background-color: #055897;
color: #ffffff;
}
.header_style a {
color: #ffffff !important;
}
.table-pager > td {
padding-top: 10px;
}
.table-pager > td > a {
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 3px;
padding: 3px 7px;
}
.table-pager > td > a:hover {
background-color: #f0f0f0;
}
.webgrid-alternating-row {
background-color: #EAF2D3;
