Descriptin:-
In this Example we Explain that how to Create a
paging and sorting in MVC.
What
is MVC:-
MVC
stands for model view Controller.there are three part in the MVC so your all
code are define separtely like in model the Database table are stored and in
View only Desinging part are included in View part and your coding part are
included in Controller part.so every thing are defined separtally.
What is Paging:-
paging means bunch of record and are used to navigate the record.each and every bunch can contain a number of record based on user that are defined by the user.
What is Sorting:-
Sorting means sort the Gridview Row based on coloumn name either in ascending order or descending order.we can easily sort the record in gridview by just click on the coloumn name in gridview.
for example:-
if you want sort the all employees records in ascending order with emloyees name then you just have to click on the employees name coloumn in gridview.
In this Example we craete a Gridview same like in
asp.net Gridview control and in which we provide paging and sorting facility.in
sorting is coloum wise when user click on coloum one then all data are sorted
through coloum one.and also sorted if currentally in ascending order then it
will automatically sorted in Descending order. If currentally is Descending
then it will automatically sorted in ascending order.
To do this First you have to create a table with
following structure.
Table
Name:-poll
to show Example of insert,update,delete in gridview using LINQ please click here insert,update,delete using Linq
to show Example of insert,update,delete in gridview using Naming Container please click here Naming Container for insert update Delete in Gridview
to show Example of insert,update,delete in gridview using Modal Popup please click here insert,update,delete in Modal Popup
to show Example of insert,update,delete in gridview using Stored Procedure please click here insert,update,delete through stored Procedure
to show Example of insert,update,delete in XML File and bind to Gridview please click here insert,upadte,delete in XML File
to show Example of insert,update,delete in gridview using Three Tier Architecture please click here Three Tier Architecture For insert,update,Delete
To DownLoad the Complete Project Click the Below Download Image Link
Step 1:- Go to File->New project in web tab select asp.net mvc4 application and must give project name finalpaging and click ok.
Step 2:-Right click on Models and select add->New Item
in dialog box select Linq to sql Class and click on add button.
Step 3:- Rebuild the Project that is compulsory.
Step 4:- Now Right click on the Controllers Folder and select add->Controller.
select mvc copntroller empty with read/write actions in DropdownList and click on add button.
Step 4:-now it will open pagingcontroller page in which you have Rightclick on the public ActionResult Index() and click on addview.
now it will open Second Dialogbox in which you have to set Following.
view engine=Rozar(chtml) and Checkmark the create strongly typed view checkbox. and select modal class in Dropdown like poll(demopaging.model) and click on add button.
Step 5:- it will open the page index.cshtml in which you have to paste the follwing code like
Code:-
@model IEnumerable<finalpaging.Models.poll>
@{
ViewBag.Title = "Index";
}
<!DOCTYPE html>
<html>
<head>
<title>WebgridSample</title>
<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<style type="text/css">
.webGrid { margin: 4px; border-collapse: collapse; width: 500px; background-color:#FCFCFC;}
.header { background-color: #C1D4E6; font-weight: bold; color: #FFF; }
.webGrid th, .webGrid td { border: 1px solid #C0C0C0; padding: 5px; }
.alt { background-color: #E4E9F5; color: #000; }
.gridHead a:hover {text-decoration:underline;}
.description { width:auto}
.select{background-color: #389DF5}
</style>
</head>
<body>
<p>
@Html.ActionLink("Create
New", "Create")
</p>
@{
finalpaging.Models.poll product = new
finalpaging.Models.poll();
}
@{
var
grid = new WebGrid(Model,
canPage: true, rowsPerPage: 2,
selectionFieldName: "selectedRow",ajaxUpdateContainerId:
"gridContent");
grid.Pager(WebGridPagerModes.NextPrevious);}
<div id="gridContent">
@grid.GetHtml(tableStyle:
"webGrid",
headerStyle: "header",
alternatingRowStyle: "alt",
selectedRowStyle: "select",
columns: grid.Columns(
grid.Column("Id", "
Id"),
// grid.Column("Id", format: (item)
=> item.GetSelectLink(item.Id)),
grid.Column("Name", "
Name"),
grid.Column("Question", "Question",
style: "description")
))
@if
(grid.HasSelection)
{
product =
(finalpaging.Models.poll)grid.Rows[grid.SelectedIndex].Value;
<b>Id</b> @product.Id<br />
<b>Name</b> @product.Name<br />
<b>Description</b> @product.Question<br />
}
</div>
</body>
</html>
Step 6:- now in pagingcontroller.cs file do the following things.
add
using finalpaging.Models;
DataClasses1DataContext qdb = new DataClasses1DataContext();
now in
public ActionResult Index() and the following code like
public ActionResult Index()
{
var a = (from t in qdb.polls select t).ToList();
return View(a);
}
Step 7:- now open site.master page (vie folder->Shared->site.master) and add the following link. Exast below the
<li><%: Html.ActionLink("Contact", "Contact", "Home") %></li>
<li><%:
Html.ActionLink("Index", "Index", "paging") %></li>
Step 8:- now run the project when you run then it will look like this
Step 9:- now click on paging link display near contact.once you click on paging it will display llok like this
Step 8:- now run the project when you run then it will look like this
0 comments:
Post a Comment