Friday, 21 February 2014

Binding and Sorting Grid in ASP.NET MVC using Jquery

Hi friends,in this article i will explain about Binding and Sorting Grid in ASP.NET MVC  using Jquery.
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 { getset; }

        [Required]
        [Display(Name = "UserName")]
        public string UserName { getset; }

        [Required]
        [Display(Name = "Gender")]
        public string Gender { getset; }

        [Required]
        [Display(Name = "Country")]
        public string Country { getset; }


        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;
            cursorpointer;
            padding5px 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.
"If you like my blog or articles, you can appreciate by leaving your comments or Liking my Facebook page Aspdotnet-kishore, following on Google+ Aspdotnet-Kishore, Twitter on AspdotnetKishore, Linked in Aspdotnet-Kishore, stumbling my posts on stumble upon and subscribing on RSSfeed Aspdotnet-Kishore for free updates directly to your Email inbox . Watch my blog for more articles."

2 comments:

  1. Hi Kishore Excellent Tutorial...

    Add Download option to get files , that makes more easy to understand

    ReplyDelete
  2. Thanks for your complement Waazz.I will definitely try to add download option.

    ReplyDelete

© 2012-2014 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.