How to Create DevExpress Grid View Using ASP.NET Webform and MVC API Controller

Introduction

In this article, I will explain how to create DevExpress Grid View using ASP.NET Webform and MVC API Controller.

HTML Markup

The HTML Markup has a DIV (id="gridContainer") that will hold the data coming from WebAPI, Header section has Jquery, DevExpress libraries, and the final JavaScript to read the API data and assign it to the DevExpress Grid View.

First, you need to add the below CDNs in the Header Section.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.4/css/dx.material.teal.light.compact.css" />
<script src="https://cdn3.devexpress.com/jslib/19.1.4/js/dx.all.js"></script>

Create a div tag as below and assign id="gridContainer".

Now write the JavaScript to read the API data and assign to the dev express grid the tag "gridContainer"

<script>
$(document).ready(function () {
uri2 = "/api/Customer/GetCustomers";
dataGridContainer(uri2);
});
/******************Data Grid Container******************/
function dataGridContainer(URL) {
$("#gridContainer").dxDataGrid({
dataSource: URL,
columns: [
//Enter the respective field names that is comimg from the API data
{
dataField: "CustomerId"
},
{
dataField: "ContactName",
caption: "Contact Name"
},
{
dataField: "DepartmentName"
},
{
dataField: "ProductName"
},
],
showBorders: true,
filterRow: {
visible: true
},
headerFilter: {
visible: false
},
paging: {
pageSize: 5
},
pager: {
showInfo: true
},
height: 420,
});
}
</script>

Full HTML code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DevExpressGrid.aspx.cs" Inherits="ASPShortCodes.DevExpressGrid" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>DevExpressGrid</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.4/css/dx.material.teal.light.compact.css" />
<script src="https://cdn3.devexpress.com/jslib/19.1.4/js/dx.all.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="demo-container">
<div id="gridContainer"></div>
</div>
</div>
</form>
<script>
$(document).ready(function () {
uri2 = "/api/Customer/GetCustomers";
dataGridContainer(uri2);
});
/******************Data Grid Container******************/
function dataGridContainer(URL) {
$("#gridContainer").dxDataGrid({
dataSource: URL,
columns: [
{
dataField: "CustomerId"
},
{
dataField: "ContactName",
caption: "Contact Name"
},
{
dataField: "DepartmentName"
},
{
dataField: "ProductName"
},
],
showBorders: true,
filterRow: {
visible: true
},
headerFilter: {
visible: false
},
paging: {
pageSize: 5
},
pager: {
showInfo: true
},
height: 420,
});
}
</script>
</body>
</html>

WEB API Controller

You will need to create a Web API Controller in the same or different Application to access the Customer data.

Create the Class Customer with the required fields and write a function called "GetCustomers( )" to return Customer data as a List type.

Create a Customer Class as shown below:

public class Customer
{
public string CustomerId { get; set; }
public string ContactName { get; set; }
public string DepartmentName { get; set; }
public string ProductName { get; set; }
}

Finally, Create the "GetCustomers()" method and bind the respective data.

[HttpGet]
public List<Customer> GetCustomers()
{
List<Customer> customers = new List<Customer>();
int i = 0;
while (i <= 5)
{
customers.Add(new Customer
{
CustomerId = "12" + i,
ContactName = "ABC" + i,
DepartmentName = "XYZ" + i,
ProductName = "QWE" + i,
});
i++;
}
return customers;
}

Full C# Code

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
namespace ASPShortCodes.Controllers
{
public class CustomerController : ApiController
{
public class Customer
{
public string CustomerId { get; set; }
public string ContactName { get; set; }
public string DepartmentName { get; set; }
public string ProductName { get; set; }
}
[HttpGet]
public List<Customer> GetCustomers()
{
List<Customer> customers = new List<Customer>();
int i = 0;
while (i <= 5)
{
customers.Add(new Customer
{
CustomerId = "12" + i,
ContactName = "ABC" + i,
DepartmentName = "XYZ" + i,
ProductName = "QWE" + i,
});
i++;
}
return customers;
}
}

Please comment if you need any other information.