Post
Ask Question

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.
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  2. <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.4/css/dx.common.css" />  
  3. <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.4/css/dx.material.teal.light.compact.css" />  
  4. <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".
 
<div id="gridContainer"></div>
 
Now write the JavaScript to read the API data and assign to the dev express grid  the tag "gridContainer"
  1. <script>  
  2. $(document).ready(function () {  
  3. uri2 = "/api/Customer/GetCustomers";  
  4. dataGridContainer(uri2);  
  5. });  
  6. /******************Data Grid Container******************/  
  7. function dataGridContainer(URL) {  
  8. $("#gridContainer").dxDataGrid({  
  9. dataSource: URL,  
  10. columns: [  
  11. //Enter the respective field names that is comimg from the API data  
  12. {  
  13. dataField: "CustomerId"  
  14. },  
  15. {  
  16. dataField: "ContactName",  
  17. caption: "Contact Name"  
  18. },  
  19. {  
  20. dataField: "DepartmentName"  
  21. },  
  22. {  
  23. dataField: "ProductName"  
  24. },  
  25. ],  
  26. showBorders: true,  
  27. filterRow: {  
  28. visible: true  
  29. },  
  30. headerFilter: {  
  31. visible: false  
  32. },  
  33. paging: {  
  34. pageSize: 5  
  35. },  
  36. pager: {  
  37. showInfo: true  
  38. },  
  39. height: 420,  
  40. });  
  41. }  
  42. </script>  
Full HTML code:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DevExpressGrid.aspx.cs" Inherits="ASPShortCodes.DevExpressGrid" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5. <title>DevExpressGrid</title>  
  6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  7. <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.4/css/dx.common.css" />  
  8. <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.4/css/dx.material.teal.light.compact.css" />  
  9. <script src="https://cdn3.devexpress.com/jslib/19.1.4/js/dx.all.js"></script>  
  10. </head>  
  11. <body>  
  12. <form id="form1" runat="server">  
  13. <div>  
  14. <div class="demo-container">  
  15. <div id="gridContainer"></div>  
  16. </div>  
  17. </div>  
  18. </form>  
  19. <script>  
  20. $(document).ready(function () {  
  21. uri2 = "/api/Customer/GetCustomers";  
  22. dataGridContainer(uri2);  
  23. });  
  24. /******************Data Grid Container******************/  
  25. function dataGridContainer(URL) {  
  26. $("#gridContainer").dxDataGrid({  
  27. dataSource: URL,  
  28. columns: [  
  29. {  
  30. dataField: "CustomerId"  
  31. },  
  32. {  
  33. dataField: "ContactName",  
  34. caption: "Contact Name"  
  35. },  
  36. {  
  37. dataField: "DepartmentName"  
  38. },  
  39. {  
  40. dataField: "ProductName"  
  41. },  
  42. ],  
  43. showBorders: true,  
  44. filterRow: {  
  45. visible: true  
  46. },  
  47. headerFilter: {  
  48. visible: false  
  49. },  
  50. paging: {  
  51. pageSize: 5  
  52. },  
  53. pager: {  
  54. showInfo: true  
  55. },  
  56. height: 420,  
  57. });  
  58. }  
  59. </script>  
  60. </body>  
  61. </html>  
WEB API Controller
 
You will need to create a Web API Controller in the same or different Application to access the Customer data.
 
C#
 
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:
  1. public class Customer  
  2. {  
  3. public string CustomerId { get; set; }  
  4. public string ContactName { get; set; }  
  5. public string DepartmentName { get; set; }  
  6. public string ProductName { get; set; }  
  7. } 
Finally, Create the "GetCustomers()" method and bind the respective data.
  1. [HttpGet]  
  2. public List<Customer> GetCustomers()  
  3. {  
  4. List<Customer> customers = new List<Customer>();  
  5. int i = 0;  
  6. while (i <= 5)  
  7. {  
  8. customers.Add(new Customer  
  9. {  
  10. CustomerId = "12" + i,  
  11. ContactName = "ABC" + i,  
  12. DepartmentName = "XYZ" + i,  
  13. ProductName = "QWE" + i,  
  14. });  
  15. i++;  
  16. }  
  17. return customers;  
  18. }  
Full C# Code
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Configuration;  
  4. using System.Linq;  
  5. using System.Net;  
  6. using System.Net.Http;  
  7. using System.Web.Http;  
  8. namespace ASPShortCodes.Controllers  
  9. {  
  10. public class CustomerController : ApiController  
  11. {  
  12. public class Customer  
  13. {  
  14. public string CustomerId { get; set; }  
  15. public string ContactName { get; set; }  
  16. public string DepartmentName { get; set; }  
  17. public string ProductName { get; set; }  
  18. }  
  19. [HttpGet]  
  20. public List<Customer> GetCustomers()  
  21. {  
  22. List<Customer> customers = new List<Customer>();  
  23. int i = 0;  
  24. while (i <= 5)  
  25. {  
  26. customers.Add(new Customer  
  27. {  
  28. CustomerId = "12" + i,  
  29. ContactName = "ABC" + i,  
  30. DepartmentName = "XYZ" + i,  
  31. ProductName = "QWE" + i,  
  32. });  
  33. i++;  
  34. }  
  35. return customers;  
  36. }  
  37. } 
Please comment if you need any other information.