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>
<span style="font-size: 12