Home ASP.NET MVC DevExpress Grid View DevExpress Grid View Using ASP.NET Webform and MVC API Controller

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

Shabbeer MujawarShabbeer Mujawar Monday, November 25, 2019
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.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<%@ 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 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. 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
using System;
using System.Collections.Generic;
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;

        }

    }
}


OR You can also use the below code to retrieve the data from SQL table.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
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>();

         

            using (SqlConnection con = new SqlConnection())
            {
                string str = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
                con.ConnectionString = str;
                using (SqlCommand cmd = new SqlCommand())
                {
                    cmd.Connection = con;
                    cmd.CommandText = "SELECT * FROM [CustomerTable]";
                    con.Open();
                    using (SqlDataReader sdr = cmd.ExecuteReader())
                    {
                        if (sdr.HasRows)
                        {
                            while (sdr.Read())
                            {
                                Customer sup = new Customer()
                                {

                                    CustomerId = sdr["CustomerId"].ToString(),
                                    ContactName = sdr["ContactName"].ToString(),



                                };
                                customers.Add(sup);
                            }
                        }
                    }
                    con.Close();
                }
            }



            return customers;

        }

    }
}


Output





Please comment if you need any other information.


Thank You
Shabbeer

Tags
Share Tweet Share Share Share

0 Comments

© Copyright 2019 ASPxCore. Designed by Bloggertheme9. Powered by Blogger.
The content is copyrighted to Shabbeer Mujawar and may not be reproduced on other websites without permission from the owner.