Hi friends,in this article i will explain about Binding and Sorting Grid in ASP.NET MVC using
Jquery.
I already explained in the previous articles about JSON: Create Cascading DropDownList from Database using JQuery in MVC 4 Razor,How to Bind Data to DropDownList from Database using Stored Procedure in MVC 4 Razor and How to bind DropDownList from database in C# MVC 4 razor.
First create MVC application and create model Users.cs and write the following code.
Model: Users.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.ComponentModel.DataAnnotations;
namespace MvcMovieStore.Models
{
public class Users
{
DataSet ds;
[Required]
[Display(Name = "ID")]
public int ID { get; set; }
[Required]
[Display(Name = "UserName")]
public string UserName { get; set; }
[Required]
[Display(Name = "Gender")]
public string Gender { get; set; }
[Required]
[Display(Name = "Country")]
public string Country { get; set; }
public DataTable GetUsers()
{
try
{
ds = new DataSet();
SqlConnection con = new
qlConnection(System.Configuration.ConfigurationManager.
ConnectionStrings["con"].ConnectionString);
SqlDataAdapter sqlAda = new SqlDataAdapter("Select
User_Id,UserName,Country,Gender from User_Details", con);
sqlAda.Fill(ds);
return ds.Tables[0];
}
catch (Exception err)
{
throw err;
}
}
}
}
|
Controller: UsersController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Data;
using MvcMovieStore.Models;
namespace MvcMovieStore.Controllers
{
public class UsersController : Controller
{
//
// GET: /Users/
public ActionResult Index()
{
DataTable dtGrid = new DataTable();
Users objUser = new Users();
dtGrid = objUser.GetUsers();
List<Users>
Gridd = new List<Users>();
foreach (DataRow dr in dtGrid.Rows)
{
Users users = new Users();
users.ID = Convert.ToInt32(dr["User_Id"]);
users.UserName = dr["UserName"].ToString();
users.Country = dr["Country"].ToString();
users.Gender = dr["Gender"].ToString();
Gridd.Add(users);
}
return View("Index",
Gridd);
}
}
}
|
View: Index.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master"
Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcMovieStore.Models.Users>>"%>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Binding and Sorting Grid in
ASP.NET MVC 2.0 using JQuery
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
</script>
<script src="../../Scripts/jquery.tablesorter.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.tablesorter.pager.js" type="text/javascript"></script>
<style type="text/css">
table.tablesorter thead tr .header
{
background-color: #000000;
color: #fff;
cursor: pointer;
padding: 5px 15px;
}
img{width=20px;height:20px;}
</style>
<h2>
Index</h2>
<%-- only for sorting
<script
type="text/javascript">
$(document).ready(function () {
$("#userTable").tablesorter();
});
</script>--%>
<%--Sorting and paging --%>
<script type="text/javascript">
$(function () {
$("#userTable")
.tablesorter({ widthFixed: true })
.tablesorterPager({ container: $("#pager")
});
$("#userTable").bind("sortStart", function () {
}).bind("sortEnd", function () {
});
//Hide/delete row on click.
$("#userTable img").click(function () { $(this).parent().parent().hide();
});
});
</script>
<p>
<%: Html.ActionLink("Create New", "Create") %>
</p>
<table id="userTable" class="tablesorter" style="height: 100%">
<thead>
<tr>
<th>
ID
</th>
<th>
UserName
</th>
<th>
Gender
</th>
<th>
Country
</th>
<th>
Edit
</th>
<th>
Details
</th>
<th>
Delete
</th>
</tr>
</thead>
<% foreach (var item in Model)
{ %>
<tr>
<td>
<%: item.ID %>
</td>
<td>
<%: item.UserName %>
</td>
<td>
<%: item.Gender %>
</td>
<td>
<%: item.Country %>
</td>
<td>
<%: Html.ActionLink("Edit", "Edit", new {id=item.ID }) %>
</td>
<td>
<%: Html.ActionLink("Details", "Details", new { id = item.ID })%>
</td>
<td>
<%: Html.ActionLink("Delete", "Delete", new {
id = item.ID })%>
</td>
</tr>
<% } %>
</table>
<div id="pager" class="pager">
<br />
<img src="../../Content/arrow-left.png" class="first" />
<img src="../../Content/arrow-left.png" class="prev" />
<input type="text" class="pagedisplay" />
<img src="../../Content/arrow-right.png" class="next" />
<img src="../../Content/arrow-right.png" class="last" />
<select class="pagesize">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</asp:Content>
|
The output of the above view as shown in the below figure.we can sort by clicking on column names and paging by selecting the page size and the click on arrows first arrow is to move to first page,click on arrows second arrow is to move to previous page,click on arrows third arrow is to move to next page and click on arrows fourth arrow is to move to last page.
 |
You can download the code by clicking on the below Download image.
|
Hi Kishore Excellent Tutorial...
ReplyDeleteAdd Download option to get files , that makes more easy to understand
Thanks for your complement Waazz.I will definitely try to add download option.
ReplyDelete