How to Bind GridView with Class instead of DataTable

You have seen many times that the GridView is bind with DataTable and wonder if you can bind it by another way. The answer is "Yes", you can bind a GridView with a Class too.

Bind GridView with Class

Let me show you how to bind your GridView using a Class.

1. First add the GridView to the Web Form.

<asp:GridView ID="gridView" runat="server"></asp:GridView>

2. Go to the CS page and create a Product Class.

class Product
    {
        public string name { get; set; }
        public string image { get; set; }
        public string categoryName { get; set; }
        public decimal price { get; set; }
    }

3. Create a function that fills the Class with dummy data.

void LoadData()
    {
        product = new List<Product>();
        product.Add(new Product() { name = "Vanheusen Women's Skirt", image = "Image/s1.jpg", categoryName = "Skirts", price = 20.89M });
        product.Add(new Product() { name = "Decot Paradise Animal Print Women's Regular Black Skirt", image = "Image/s2.jpg", categoryName = "Skirts", price = 35.59M });
        product.Add(new Product() { name = "DeeVineeTi Polka Print Women's Wrap Around White, Blue Skirt", image = "Image/s3.jpg", categoryName = "Skirts", price = 98.00M });
        product.Add(new Product() { name = "Raabta Fashion Striped Women's Pencil Black, White Skirt", image = "Image/s4.jpg", categoryName = "Skirts", price = 120.00M });
        product.Add(new Product() { name = "Ishin Solid Women's Regular Orange Skirt", image = "Image/s5.jpg", categoryName = "Skirts", price = 115.85M });
        product.Add(new Product() { name = "Adidas Women's Skirt", image = "Image/s6.jpg", categoryName = "Skirts", price = 105.74M });

        product.Add(new Product() { name = "V Dot by Van Huesen Skinny Fit Men's Grey Trousers", image = "Image/p1.jpg", categoryName = "Pants", price = 10.89M });
        product.Add(new Product() { name = "French Connection Slim Fit Men's Beige Trousers", image = "Image/p2.jpg", categoryName = "Pants", price = 25.59M });
        product.Add(new Product() { name = "Indian Terrain Slim Fit Men's White Trousers", image = "Image/p3.jpg", categoryName = "Pants", price = 48.00M });
        product.Add(new Product() { name = "United Colors of Benetton Slim Fit Men's Beige Trousers", image = "Image/p4.jpg", categoryName = "Pants", price = 120.00M });
        product.Add(new Product() { name = "Numero Uno Slim Fit Men's Black Trousers", image = "Image/p5.jpg", categoryName = "Pants", price = 155.85M });
        product.Add(new Product() { name = "John Players Slim Fit Men's Grey Trousers", image = "Image/p6.jpg", categoryName = "Pants", price = 165.74M });

        product.Add(new Product() { name = "Vu 140cm (55) Full HD Smart LED TV", image = "Image/e1.png", categoryName = "Electronics", price = 80.89M });
        product.Add(new Product() { name = "BPL Vivid 80cm (32) HD Ready LED TV", image = "Image/e2.png", categoryName = "Electronics", price = 235.59M });
        product.Add(new Product() { name = "Moto E3 Power (Black, 16 GB)", image = "Image/e3.jpg", categoryName = "Electronics", price = 198.00M });
        product.Add(new Product() { name = "Krishna M (Silver, 64 GB)", image = "Image/e4.jpg", categoryName = "Electronics", price = 120.00M });
        product.Add(new Product() { name = "Sansui 150 L Direct Cool Single Door Refrigerator", image = "Image/e5.jpg", categoryName = "Electronics", price = 115.85M });
        product.Add(new Product() { name = "Whirlpool 245 L Frost Free Double Door Refrigerator", image = "Image/e6.jpg", categoryName = "Electronics", price = 105.74M });
    }

4. Fill the class with data.

LoadData();

5. Now finally bind the GridView with the class data like this:

gridView.DataSource = product;
gridView.DataBind();


Binding GridView with Class on Page Load Event
Here I will show you how to bind the GridView on Page Load event.

Add the below code to the .cs page.

List<Product> product;
protected void Page_Load(object sender, EventArgs e)
{
    if(!IsPostBack)
    {
        LoadData();
        gridView.DataSource = product;
        gridView.DataBind();
    }
}

void LoadData()
{
    //code
}

class Product
{
    public string name { get; set; }
    public string image { get; set; }
    public string categoryName { get; set; }
    public decimal price { get; set; }
}

and that's it the Binding of GridView is done.

Related Article: Also check the related article which teaches the 'Binding of GridView with Paging using jQuery Load with No Page Refresh'. Check this article here - asp.net gridview example.