JQ GRID Using MVC with Razor View Engine in ASP.NET MVC 4
Friends,Here i am going to explain how to use jqgrid in asp.net mvc4 with rzor view engine.JQGrid is one of the most flexible and stable
gird you can find in the current tech market. It’s free to use. Here i am going to write basic step to do where data will come from
database to show in JQgrid.
Following are step by step sequence to create the JQGRID.
1.Create a new ASP.NET MVC 4 Web Project
2.Select Empty template with Razor
4.Right Click on the Controller and Add new Controller
5.Copy and paste the below code in the controller as fllowing
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Mvc;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using JQGridExample.Models;
namespace JQGridExample.Controllers
{
public class EMPLOYEEController : Controller
{
public ActionResult EmpDetails()
{
return View();
}
public JsonResult getEmpDetails()
{
List<Employee> items = new List<Employee>();
items = getData();
var a = Json(items, JsonRequestBehavior.AllowGet);
a.MaxJsonLength = int.MaxValue;
return a;
}
public List<Employee> getEmpData()
{
string connString = ConfigurationManager.ConnectionStrings["Mycon"].ConnectionString;
SqlConnection conn = new SqlConnection(connString);
SqlCommand cmd = new SqlCommand();
cmd.CommandTimeout = 6000;
cmd.CommandText = "select * from employee";
cmd.Connection = conn;
conn.Open();
DataTable dataTable = new DataTable();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dataTable);
conn.Close();
da.Dispose();
List<Employee> items = new List<Employee>();
foreach (DataRow row in dataTable.Rows)
{
items.Add(new MEmployee
{
Id = row["ID"].ToString(),
Name = row["Name"].ToString(),
Gender = row["Gender"].ToString(),
Contact = row["Contact"].ToString(),
Address = row["Address"].ToString(),
State = row["State"].ToString(),
Country = row["Country"].ToString()
});
}
return items;
}
}
}
6.Add new class to the Model folder and paste the below code in the Model.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace JQGridExample.Models
{
public class Employee
{
public string Id { get; set; }
public string NAME { get; set; }
public string Name { get; set; }
public string Gender { get; set; }
public string Contact { get; set; }
public string Address { get; set; }
public string State { get; set; }
public string Country { get; set; }
}
}
8. Right Click on the Controller and Add the View ,name should be EmpDetails
9. Add below code to the created EmpDetails view
@{
ViewBag.Title = "JQGrid Esample";
}
<html>
<head>
<title>My First JQGrid Example</title>
<script src="~/Scripts/jquery-1.11.0.min.js"></script>
<link href="yourlocalpath/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="yourlocalpath/jqgrid/4.6.0/jquery.jqGrid.min.js"></script>
<script src="yourlocalpath/jqgrid/4.6.0/i18n/grid.locale-en.js"></script>
<script src="yourlocalpath/jqgrid/4.6.0/jquery.jqGrid.min.js"></script>
<link href="yourlocalpath/jqgrid/4.6.0/css/ui.jqgrid.css" rel="stylesheet" />
<style type="text/css">
.ui-jqgrid .ui-widget-header {
background-color: #336699;
background-image: none;
color: white;
}
.ui-jqgrid .ui-jqgrid-labels th.ui-th-column {
background-color: #FFCC66;
background-image: none;
color: #336699;
height: 30px;
font-weight: bold;
}
</style>
<script type="text/javascript">
$(function () {
$("#myEmpGrid").jqGrid({
url: '@Url.Action("getEmpDetails")',
datatype: 'json',
mytype: 'get',
colNames: ['Id','Name', 'Gender', 'Contact', 'Address', 'State','Country'],
colModel: [
{ name:'Id', width:'35px' },
{ name:'Name', width:'160px' },
{ name:'GENDER' },
{ name:'Gender' },
{ name:'Address' },
{ name:'State'},
{ name:'Country'}
],
pager: $('#myPager'),
rowNum: 5,
sortname: 'ID',
gridview: true,
sortorder: 'desc',
loadonce: true,
rowList: [5, 10, 20, 50],
width: 600,
height: 110,
viewrecords: true,
caption: 'Emp details in JQ Grid'
});
});
</script>
</head>
<body>
<div>
<table id="myEmpGrid"></table>
<div id="myPager"></div>
</div>
</body>
</html>
Run your application and test
0 comments:
Post a Comment