Display Data In jqxGrid Using ASP.NET MVC

Datetime:2016-08-23 04:39:18          Topic: ASP.NET MVC           Share

Here, you will find the steps:

Step 1:Here, you will find the table that I used in the Application:

After creating the table, you need to fill it, as shown below:

Step 2:Open Visual Studio and add New Project:

Step 3: Configuring Entity Data Model

Here, we need to follow the steps, as described below to configure EDM.

Step 4: Add new controller

Right click on the controllers folder > Add > Controller > Enter controller name (‘Home’) > Add.

HomeController.cs

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.Mvc;  
  
namespace JQXGridMVC.Controllers  
{  
    public class HomeController : Controller  
    {  
        // DbContext  
        DbPersonnesEntities db = new DbPersonnesEntities();  
  
        //  
        // GET: /Home/  
  
        public ActionResult DisplayData()  
        {  
            return View();  
        }  
  
        public JsonResult GetCustomers()  
        {  
            // Retrieve all data customers from database (DbPersonnes)  
            var result = db.Customers.ToList();  
              
            return Json(result, JsonRequestBehavior.AllowGet);  
        }  
  
    }  
}  

DisplayData.cshtml

@model  IEnumerable<JQXGridMVC.Customers>  
  
@{  
    ViewBag.Title = "Data Customers";  
}  
  
<h2> Data Customers</h2>  
  
<div id="gridCustomers" style="margin:20px auto;"></div>  
  
@section scripts {  
  
    
<script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>  
  
<script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>  
  
<link rel="stylesheet" type="text/css" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" />      
  
<script type="text/javascript">  
    $(document).ready(function () {  
        // In this part, you need to prepare your data  
        var source =  
            {  
                datatype: "json",  
  
                // Here you will declare all fields that must be used in the grid  
                datafields: [  
                      
               { name: 'CustomerID', type: 'number' },  
               { name: 'CustomerName', type: 'string' },  
                       { name: 'CustomerEmail', type: 'string' },  
                       { name: 'CustomerZipCode', type: 'number' },  
                       { name: 'CustomerCountry', type: 'string' },  
              { name: 'CustomerCity', type: 'string' }  
                      
                ],  
                // call the action which retrieve data customers in json format   
                url: 'Home/GetCustomers'  
            };  
  
        var dataAdapter = new $.jqx.dataAdapter(source);  
  
        // displaying data in the grid with jqxGrid   
        $("#gridCustomers").jqxGrid(  
            {  
                width: 800,  
                source: dataAdapter,  
                pageable: true,  
                sortable: true,  
  
                columns: [  
                    
                    { text: "Customer ID", datafield: "CustomerID" },  
                    { text: "Customer Name", datafield: "CustomerName" },  
                    { text: "Customer Email", datafield: "CustomerEmail" },  
                    { text: "Customer ZipCode", datafield: "CustomerZipCode" },  
                    { text: "Customer Country", datafield: "CustomerCountry" },  
                    { text: "Customer City", datafield: "CustomerCity" }  
                     
                ]  
            });  
    });  
</script>  
} 

Step 5: Run Application





About List