Bind JqueryGrid In Asp.Net MVC Using SQL Server Database

Jquery Grid is very important role to display data on UI. In this article we will bind the grid with database using Asp.net MVC.So let's start step by step. So it will be very useful to understand from scratch .

Step 1. Create MVC application

1. Let's "Start", then "All Programs" and select "Microsoft Visual Studio 2015".
2. Lets "File", then "New" and click "Project", then select "ASP.NET Web Application Template" and provide the Project a name as you wish and click on OK.
3. Let's Choose MVC application option and click OK

Step 2. Now Solution  application has been created with model,view and controller folder.
Now i am going to own custom view,model and controller. So i am going to delete one by one folder. See following

Step 3. Database Design
To build the Employee Table, you have to create an Employee table.

Employee

Employee Table consists of all records.

Create Table Employee(

ID int identity(1,1) primary key,

Name varchar(200),

Position varchar(50),

Age int,

Salary int

)

Insert into Employee

select 'Jitendra','Software Developer',29,50000

Insert into Employee

select 'kumar','Sr. Software Developer',29,50000

Insert into Employee

select 'Ram','June Developer',29,50000

Insert into Employee

select 'Shyam','Designer Developer',29,50000

Step 4. 

Now add database to model . So go to the project Then Right click Model folder and add new item.

Select Ado.net template Then add code from database and connect new sql connection then add connection.

Now our Model Class has been generated.

Step 5. Add controller class

Right click on Controller folder in the created MVC application, give the class name Employee or as you wish and click OK.

EmployeeController.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace MvcJquerygrid.Controllers

{

    public class EmployeeController : Controller

    {

        // GET: Employee

        public ActionResult Index()

        {

            return View();

        }

    }

}

Step 6.

 By default route.config Home has been created Now need to change this as Employee:

Step 7. 

Add view for this method Now index view has been created. Then need for jquerygrid plugin   To download plugin need to go Jquery download portal.

After download this plugin unzip folder then extract this .Then add CSS and js file in project script folder

For add css file ,Select right click on  Content folder then add existing item then add css from download source file.

For Js file ,Select right click on Script folder then add existing item from download source src folder. Let us see for help below:

Step 8.

 Now we need UI CSS  theme for jquery plugin Then we go to the url

Jqueryui.com Then download theme from this url. A zip file will be downloaded then extract this.

Then go to Project content folder add new folder name as Theme 

then add css from this extract file. Let's see for help below:

for images

Step 9: 

Add all script and style-sheet on Index view html page:

Index.cshtm

@{

    ViewBag.Title = "Index";

}

<h2>Employee Index</h2>

<table id="=jqGrid"></table>

<div id="jqGridPager"></div>

<link href="~/Content/Theme/jquery-ui.min.css" rel="stylesheet" />

<link href="~/Content/ui.jqgrid.css" rel="stylesheet" />

@section scripts{

    <script src="~/Scripts/Jgrid/grid.locale-en.js"></script>

    <script src="~/Scripts/Jgrid/jquery.jqGrid.js"></script>

    <script>

        $(function () {

            $grid = $('#jqGrid').jqGrid({

                url:'@Url.Action("Getdata","Employee")',

                mtype:'GET',

                datatype:'json',

                colModel:[

                {label:'Name',name:'Name'},

                {label:'Position',name:'Position'},

        {label:'Age',name:'Age'},

        {label:'Salary',name:'Salary'},

        

                ],

                location:true

            })

        })

    </script>

}

HomeController.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using MvcJquerygrid.Models;

namespace MvcJquerygrid.Controllers

{

    public class EmployeeController : Controller

    {

        // GET: Employee

        public ActionResult Index()

        {

            return View();

        }

        [HttpGet]

        public ActionResult Getdata()

        {

            using (TestEntities db=new TestEntities())

            {

                var employeelist = db.Employees.ToList<Employee>();

                return Json(new { rows = employeelist }, JsonRequestBehavior.AllowGet);

            }

        }

    }

}

Now run the application Output will be shown