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.