Build Products Comparision Table/Grid in ASP.Net C#.Net and VB.Net

In this tutorial i am going to explain about how to Build Products Comparision Table/Grid in ASP.Net,C#.Net and VB.Net. In this tutorial i did it using nested for loops.


In my previous article i have explained about Create Help Pages For Asp.Net Web API, Store Custom Objects In Configuration File , Create Simple Mathmatical Captcha In ASP.Net , Visual Studio Keyboard Shortcuts , How To get data from WEB API , How To Create Your First WEB API Project and many articles in C#.Net,VB.Net,Grid View,Javascript,jQuery,SQL Server and many other topics.


Open the visual studio and go to the file menu. Select new website and then select ASP.Net Empty Form Website template from C# templates or VB Templates as per your requirement. Then right click on the project then add a new webform and name it as Default.aspx. Now in the code behind file i am creating a datatable (Include System.Data namespace if it is not already there to access DataTable class) to store the details of mobile models. The entire code is given below.

C#.Net:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

public partial class _Default : System.Web.UI.Page

{

    public DataTable mobileTable = new DataTable("Mobiles");

    protected void Page_Load(object sender, EventArgs e)

    {

        //Adding columns to the table

        mobileTable.Columns.Add("Model", typeof(string));

        mobileTable.Columns.Add("Brand", typeof(string));

        mobileTable.Columns.Add("Operating System", typeof(string));

        mobileTable.Columns.Add("OS Version", typeof(string));

        mobileTable.Columns.Add("Rear Camera", typeof(string));

        mobileTable.Columns.Add("Front Camera", typeof(string));

        mobileTable.Columns.Add("Processor", typeof(string));

        mobileTable.Columns.Add("RAM", typeof(string));

        mobileTable.Columns.Add("Price", typeof(int));

        //Adding rows to the tables

        mobileTable.Rows.Add("Samsung Core 2 Duos", "Samsung", "Android", "Gingerbird","8MP","2MP","1.3 gHZ QuadCore","1 GB",11999);

        mobileTable.Rows.Add("LG G3", "LG", "Android", "KitKat", "13MP", "5MP", "1.7 gHZ QuadCore", "2 GB", 9999);

        mobileTable.Rows.Add("HTC M8", "HTC", "Android", "Lollipop", "8MP", "5MP", "2.4 gHZ QuadCore", "3 GB", 14499);

    }

}

VB.Net:

Imports System.Collections.Generic

Imports System.Linq

Imports System.Web

Imports System.Web.UI

Imports System.Web.UI.WebControls

Imports System.Data

Partial Public Class _Default

    Inherits System.Web.UI.Page

    Public mobileTable As New DataTable("Mobiles")

    Protected Sub Page_Load(sender As Object, e As EventArgs)

        'Adding columns to the table

        mobileTable.Columns.Add("Model", GetType(String))

        mobileTable.Columns.Add("Brand", GetType(String))

        mobileTable.Columns.Add("Operating System", GetType(String))

        mobileTable.Columns.Add("OS Version", GetType(String))

        mobileTable.Columns.Add("Rear Camera", GetType(String))

        mobileTable.Columns.Add("Front Camera", GetType(String))

        mobileTable.Columns.Add("Processor", GetType(String))

        mobileTable.Columns.Add("RAM", GetType(String))

        mobileTable.Columns.Add("Price", GetType(Integer))

        'Adding rows to the tables

        mobileTable.Rows.Add("Samsung Core 2 Duos", "Samsung", "Android", "Gingerbird", "8MP", "2MP", _

            "1.3 gHZ QuadCore", "1 GB", 11999)

        mobileTable.Rows.Add("LG G3", "LG", "Android", "KitKat", "13MP", "5MP", _

            "1.7 gHZ QuadCore", "2 GB", 9999)

        mobileTable.Rows.Add("HTC M8", "HTC", "Android", "Lollipop", "8MP", "5MP", _

            "2.4 gHZ QuadCore", "3 GB", 14499)

    End Sub

End Class

Now in the aspx file i wrote the below nested for loop to form the comparision grid/table of all the mobile models in the datatable. Below is the markup i used.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Build Items/Products Comparision Table/Grid in ASP.Net C#.Net and VB.Net

</title>

</head>

<body>

    <style type="text/css">

        td {

            padding:5px;

        }

    </style>

    <form id="form1" runat="server">

        <div>

            <h2>Comparision Table/Grid in ASP.Net C#.Net and VB.Net</h2>

            <table border="1" style="border-collapse:collapse;padding:2px;">

                <%

                    for (int i = 0; i < mobileTable.Columns.Count; i++)

                    {

                %>

                <tr>

                    <td><%= mobileTable.Columns[i].ColumnName %></td>

                    <%

                        for (int j = 0; j < mobileTable.Rows.Count; j++)

                        {

                    %>

                    <td><%= mobileTable.Rows[j][i] %></td>

                    <%

      }

                    %>

                </tr>

                <% 

                    }

                %>

            </table>

        </div>

    </form>

</body>

</html>

Now if you run the project the output will look like below image.

SourceCode:

If you like this article then share with your friends and comment your valuable feedback.. Happy coding..