1. Open Visual Studio and create a new ASP .NET MVC Web Application. 2. Open the Solution Explorer and create a new EmployeeRepository class. The “EmployeeRepository.cs” in the “Models” folder is the application’s data model. It maintains the data for the grid to display. We can use the “GetEmployees” method to access the employees list.
public class EmployeesRepository
{
public static List<Employee> GetEmployees()
{
List<Employee> employees = new List<Employee>();
string[] firstNames = new string[] { "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene" };
string[] lastNames = new string[] { "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier" };
string[] productNames = new string[] { "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist" };
string[] priceValues = new string[] { "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0" };
Random random = new Random();
for (var i = 0; i < 100; i++)
{
Employee employee = new Employee();
int productindex = random.Next(productNames.Length);
float price = float.Parse(priceValues[productindex]);
int quantity = 1 + random.Next(10);
employee.FirstName = firstNames[random.Next(firstNames.Length)];
employee.LastName = firstNames[random.Next(lastNames.Length)];
employee.Price = price;
employee.Quantity = quantity;
employee.Product = productNames[productindex];
employees.Add(employee);
}
return employees;
}
}
3. Create a new Employee class. The “Employee” class defines some basic information for an employee.
public class Employee
{
public int ID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Product { get; set; }
public double Price { get; set; }
public int Quantity { get; set; }
public double Total
{
get
{
return this.Price * this.Quantity;
}
}
}
4. Put all the JavaScript files in the “Scripts” folder and all the CSS style sheets in the “Content” folder.
5. The MVC controller “HomeController.cs” in the “Controllers” folder implements the server code to serve the “Ajax” calls.
[HandleError]
public class HomeController : Controller
{
public ActionResult Index()
{
ViewData["Message"] = "Welcome to ASP.NET MVC!";
return View();
}
public ActionResult DataHandler()
{
List<Employee> employees = EmployeesRepository.GetEmployees();
return Json(new
{
employees
},
JsonRequestBehavior.AllowGet);
}
public ActionResult About()
{
return View();
}
}
6. Add references to the JavaScript and CSS StyleSheet files. In the example, we have added them in the Site.Master.
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../../Content/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../Scripts/jqxcore.js"></script>
<script type="text/javascript" src="../../Scripts/jqxdata.js"></script>
<script type="text/javascript" src="../../Scripts/jqxbuttons.js"></script>
<script type="text/javascript" src="../../Scripts/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../Scripts/jqxmenu.js"></script>
<script type="text/javascript" src="../../Scripts/jqxgrid.js"></script>
<script type="text/javascript" src="../../Scripts/jqxgrid.selection.js"></script>
</head>
[/javascript]
7. Open the Index.aspx file in the Views/Home folder and create the jqxGrid. Initialize the source object and set its 'datatype' property to 'json' and 'url' property to the "DataHandler". The "Ajax" call to the server will be automatically initiated by the jqxGrid and it will be populated with the Employees list. The last step is to select the "jqxgrid" div tag and call the jqxGrid constructor. Add the names of the columns in the grid initialization.
[javascript]
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Home Page
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
$(document).ready(function () {
var source =
{
url: "Home/DataHandler",
datatype: "json",
datafields: [{ name: "FirstName" }, { name: "LastName" }, { name: "Product" }, { name: "Price", type: "float" }, { name: "Quantity", type: "int" }, { name: "Total", type: "float"}]
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
source: dataAdapter,
columns: [
{ text: 'First Name', dataField: 'FirstName', width: 100 },
{ text: 'Last Name', dataField: 'LastName', width: 100 },
{ text: 'Product', dataField: 'Product', width: 180 },
{ text: 'Quantity', dataField: 'Quantity', width: 80, cellsalign: 'right' },
{ text: 'Unit Price', dataField: 'Price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
{ text: 'Total', dataField: 'Total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
]
});
});
</script>
<div id="jqxgrid"></div>
</asp:Content>
I would like to know how to update database using MVC and JqxGrid? Could you please guide me?
This is illustrated in the help topic: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/asp.net-integration/asp.net-grid-crud.htm