Dynamic Product Comparison like Flipkart, Amazon, Snapdeal using C# in ASP.Net

Last Reply on Jan 14, 2016 08:43 AM By dharmendr

Posted on Jan 14, 2016 05:19 AM

hello all,

i have listed product categorywise with checkbox for compare . we can  select more than 1 product for compare.
and all compare product listed on top with button .
 when i am  clicking compare  button then it redirecting compare page with product ids . Now this would be easy if I just needed to databind down the page with each product with thier specification being a horizontal line item.
 However I need to make one clomun left side of gridvew  show all specifcation that are assign with category and genearte column according number of product in compare list (for example 4 product in compare list. then genrate specification column + 4 Product column).
and bind all Specification  values of every Product  along with specification column.

i want something like below page.

http://www.flipkart.com/mobile/compare?ids=MOBECCA5BJUVUGNP,MOBE93GWSA63AU7V,MOBECCA5SMRSKCNY&otracker=compare_mobile_3

 

i have also tryd below example .but its not satisfy my condition

http://www.codeproject.com/Articles/113261/ASP-NET-e-Commerce-GridView-with-Product-Compariso

 

please help me anyone

Posted on Jan 14, 2016 08:43 AM Modified on on Sep 12, 2017 06:51 AM

Hi manvendra45,

I have created sample that full-fill your requirement. You need to change as per your data.

Database
For this I am making use of the Microsoft’s Northwind Database. Download and install instructions are provided in the link below.

SQL

--Attribute Table---
CREATE TABLE Attributes(AtrId INT,AtrName VARCHAR(100))

INSERT INTO Attributes VALUES(1,'Display Type')
INSERT INTO Attributes VALUES(2,'Operating System')
INSERT INTO Attributes VALUES(3,'Network')
INSERT INTO Attributes VALUES(10,'Rear Camera')
INSERT INTO Attributes VALUES(11,'Front Camera')
INSERT INTO Attributes VALUES(12,'Processor')
INSERT INTO Attributes VALUES(13,'FM')

--Specification Table---
CREATE TABLE Specifications(ProductId INT,Attribute_Id INT,Value VARCHAR(50))

INSERT INTO Specifications VALUES(1,1,'Full HD, FWVGA')
INSERT INTO Specifications VALUES(1,2,'IOS')
INSERT INTO Specifications VALUES(1,3,'EDGE')
INSERT INTO Specifications VALUES(1,10,'8mp & above')
INSERT INTO Specifications VALUES(1,11,'0-1.9 mp')
INSERT INTO Specifications VALUES(1,12,'1-1.5 ghz')
INSERT INTO Specifications VALUES(1,13,'NFC')
INSERT INTO Specifications VALUES(2,1,'DVGA, Dual')
INSERT INTO Specifications VALUES(2,2,'WINDOWS')
INSERT INTO Specifications VALUES(2,3,'3G')
INSERT INTO Specifications VALUES(2,10,'8mp & above')
INSERT INTO Specifications VALUES(2,11,'5-7.9mp')
INSERT INTO Specifications VALUES(2,12,'1-1.5 ghz')
INSERT INTO Specifications VALUES(2,13,'FM PLAYER')
INSERT INTO Specifications VALUES(3,1,'Full HD, HVGA')
INSERT INTO Specifications VALUES(3,2,'ANDROID')
INSERT INTO Specifications VALUES(3,3,'WIFI')
INSERT INTO Specifications VALUES(3,10,'8mp & above')
INSERT INTO Specifications VALUES(3,11,'0-1.9 mp')
INSERT INTO Specifications VALUES(3,12,'1.5-2 ghz')
INSERT INTO Specifications VALUES(3,13,'FM PLAYER')

--SP--
CREATE PROCEDURE GetComparedProducts
    @ProductIds VARCHAR(100)
AS
BEGIN

    DECLARE @query NVARCHAR(max)

    SET @query =';WITH T AS
                (
                    SELECT AtrName AS [General Features], Value, ProductId    
                    FROM Specifications pt,Attributes at
                    WHERE pt.Attribute_Id = at.AtrId
                ) 
                SELECT *
                FROM T
                PIVOT (MAX(Value) FOR ProductId IN('+@ProductIds+')) P'

    EXEC(@query)
END

HTML

ProductComparison:

<div>
    <table>
        <tr>
            <td>
                <asp:Button Text="Compare Checked Product" runat="server" OnClick="CompareProduct" />
            </td>
        </tr>
        <tr>
            <td>
                <asp:Repeater runat="server" ID="rptProducts">
                    <HeaderTemplate>
                        <table>
                            <tr>
                                <th>
                                    <asp:CheckBox ID="chkHeaderCompare" runat="server" />
                                </th>
                                <th style="width: 300px">
                                    Product Name
                                </th>
                            </tr>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <tr>
                            <td>
                                <asp:CheckBox ID="chkProductCompare" runat="server" />
                            </td>
                            <td>
                                <asp:Label ID="lblProductId" Text='<%#Eval("ProductID") %>' runat="server" Visible="false" />
                                <asp:Label ID="lblProductName" Text='<%#Eval("ProductName") %>' runat="server" />
                            </td>
                        </tr>
                    </ItemTemplate>
                    <FooterTemplate>
                        </table>
                    </FooterTemplate>
                </asp:Repeater>
            </td>
        </tr>
    </table>
</div>

ProductComparisonDetails:

<div>
    <asp:GridView runat="server" ID="gvProductComparedDetails">
    </asp:GridView>
</div>

Code

ProductComparison:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        rptProducts.DataSource = GetData("SELECT TOP 3 * FROM Products");
        rptProducts.DataBind();
    }
}

private static DataTable GetData(string query)
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand())
        {
            cmd.CommandText = query;
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataSet ds = new DataSet())
                {
                    DataTable dt = new DataTable();
                    sda.Fill(dt);
                    return dt;
                }
            }
        }
    }
}

protected void CompareProduct(object sender, EventArgs e)
{
    string id = string.Empty;
    foreach (RepeaterItem item in rptProducts.Items)
    {
        CheckBox chkProductCompare = (CheckBox)item.FindControl("chkProductCompare");
        Label lblProductId = (Label)item.FindControl("lblProductId");
        if (chkProductCompare.Checked)
        {
            id += lblProductId.Text + ",";
        }
    }
    if (id.Length > 2)
    {
        id = id.Remove(id.Length - 1);
        Server.Transfer("ProductComparisonDetails.aspx?CheckedId=" + id);
    }
    else
    {
        string script = "window.onload = function() { alert(\"Please select atleaset 2 Product for compare\");};";
        ClientScript.RegisterStartupScript(this.GetType(), "Alert", script, true);
    }
}

ProductComparisonDetails:

protected void Page_Load(object sender, EventArgs e)
{
    string productIds = "[" + Request.QueryString["CheckedId"].Replace(",", "],[") + "]";
    if (productIds != null)
    {
        DataTable dt = GetProducts(productIds);
        gvProductComparedDetails.DataSource = dt;
        gvProductComparedDetails.DataBind();
    }
}

private DataTable GetProducts(string ids)
{
    string constr = ConfigurationManager.ConnectionStrings["constr1"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand())
        {
            cmd.CommandText = "GetComparedProducts";
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Connection = con;
            cmd.Parameters.AddWithValue("@ProductIds", ids);
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                sda.SelectCommand = cmd;
                using (DataSet ds = new DataSet())
                {
                    DataTable dt = new DataTable();
                    sda.Fill(dt);
                    return dt;
                }
            }
        }
    }
}

Screenshot