Datalist control Example in asp.net


Database creation:

First crete database and create a datatable as follows:

use identity for ProductId

then add data to that table as follows

Now go to file new website

then open web.config file and add connection strings tag and write connection string as follows:

add images to ur project directory as follows:

and add new webform and place a datalist control as follows:

SourceCode:(Default.aspx)
<html xmlns=”http://www.w3.org/1999/xhtml&#8221;&gt;
<head id=”Head1″ runat=”server”>
<title></title>
</head>
<body>
<form id=”form2″ runat=”server”>
<div>
<asp:DataList ID=”DataList1″ runat=”server” RepeatColumns=”4″
onitemcommand=”DataList1_ItemCommand”>
<ItemTemplate><asp:Panel ID=”Panel1″ runat=”server” BorderColor=”#FF9933″
BorderWidth=”3px” Height=”380px” Width=”270px”>
<table height=”150″ >
<tr >
<td width=”75%” style=”color: #FF0000; font-weight: bold” align=”center”>
<asp:ImageButton ID=”Image1″ runat=”server” ImageUrl=’<%#Eval(“ProductImage”) %> CommandName=”ViewDetails” CommandArgument=’<%#Eval(“ProductId”) %>‘></asp:ImageButton>
</td>
</tr>
<tr >
<td width=”75%” style=”color: #0000FF; font-weight: bold”>
<asp:Label ID=”lbl” runat=”server” Text=’<%# Eval(“ProductName”) %>‘></asp:Label></td></tr>
<tr >
<td width=”50%” style=”color: #009900; font-weight: bold”>
<span style=”color: Black; font-weight: bold;“>ProductDetails:</span><br />
<asp:Label ID=”lbl2″ runat=”server” Text=’<%#Eval(“ProductDescription”) %>‘></asp:Label>
</td>
</tr>
<tr >
<td width=”75%” style=”color: #FF0000; font-weight: bold”><span style=”color: Black; font-weight: bold;“>Price:</span>
<br /><asp:Label ID=”lbl3″ runat=”server” Text=’<%#Eval(“ProductCost”) %>‘></asp:Label>
</td>
</tr>
<tr>
<td align=”Right”>
<asp:LinkButton ID=”LinkButton1″ runat=”server”
Font-Underline=”False” style=”font-weight: 700; color: Black” CommandName=”ViewDetails” CommandArgument=’<%#Eval(“ProductId”) %> BackColor=”#FF9933″>ViewDeatils</asp:LinkButton>
</td></tr>
</table> </asp:Panel>
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
SourceCode:(ViewDetails.aspx)
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head id=”Head1″ runat=”server”>
<title></title>
<style type=”text/css”>
.style1
{
width: 100%;
}
.style2
{
width: 369px;
}
</style>
</head>
<body>
<form id=”form2″ runat=”server”>
<div>
<table class=”style1″>
<tr>
<td class=”style2″>
<asp:Image ID=”Image1″ runat=”server” Height=”361px” Width=”369px” />
</td><td>
<table class=”style1″>
<tr>
<td style=”color: #0000FF; font-weight: 700″ >
<span style=”color: Black; font-weight: bold;“>Modal:</span><br /><asp:Literal ID=”Literal1″ runat=”server”></asp:Literal>
</td>
</tr>
<tr>
<td style=”font-weight: 700; color: #009933″ >
<span style=”color: Black; font-weight: bold;“>ProductDetails:</span><br /><asp:Literal ID=”Literal2″ runat=”server”></asp:Literal>
</td>
</tr>
<tr>
<td style=”font-weight: 700; color: #FF0000″ >
<span style=”color: Black; font-weight: bold;“>Price:</span><br /><asp:Literal ID=”Literal3″ runat=”server”></asp:Literal>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
CodeBehind:(Default.aspx.cs)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
GetData();
}
public void GetData()
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings[“sqlcon”].ConnectionString);
SqlCommand cmd = new SqlCommand(“select * from Laptops”, con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
DataList1.DataSource = ds.Tables[0].DefaultView;
DataList1.DataBind();
}
protected void DataList1_ItemCommand(object source, DataListCommandEventArgs e)
{
if (e.CommandName == “ViewDetails”)
{
Response.Redirect(“ViewDetails.aspx?Id=” + e.CommandArgument.ToString());
}
}
}

CodeBehind:(ViewDetails.aspx.cs)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;public partial class ViewDetails : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
GetData();
}
public void GetData()
{
string Id = Request[“Id”].ToString();
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings[“sqlcon”].ConnectionString);
SqlCommand cmd = new SqlCommand(“select * from Laptops where ProductId = “ + Id, con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
Image1.ImageUrl = ds.Tables[0].Rows[0][4].ToString();
Literal1.Text = ds.Tables[0].Rows[0][1].ToString();
Literal2.Text = ds.Tables[0].Rows[0][3].ToString();
Literal3.Text = ds.Tables[0].Rows[0][2].ToString();
}
}

Output Screens:

DownloadSamplecode

Advertisements

18 thoughts on “Datalist control Example in asp.net

  1. hello,
    your code is too good.
    can u plz tell me if we want to calculate price of the particular product at runtime in label when price field is not in table.Is this possible in datalist or not.if possible then tell me how..?

    thanx for this sir,but my problem is different.according to ur
    expression, quantity and unit price field must present in database
    table.

    but in my case i have table i.e “vehicle”
    it contains fields-id,name,passenger,large_luggage,smal_luggage,percentage.

    id name passenger large_luggage smal_luggage percentage.
    1 mercedes 7 4 2 20%
    2 bmw7 4 2 2 10%

    nd 2nd table i.e “price”
    it contains fields-id,city_name,chandigarh_city_price

    id city_name chandigarh_city_price
    1 amritsar 120$
    2 jalandhar 100$
    3 ludhiana 80$

    now lets take an example-
    the price from amritsar to chandigarh city is fixed i.e 120$ as u can
    see in above table
    but the actual fair is the combination of fixed price from source to
    destination nd which type of vehicle u choose(means kitne percentage
    extra charge padega fixed price k upar)

    example:fair from amritsar to chandigarh is 120$ nd customer want
    mercedes car nd the extra charge percentage of mercedes car is 20 %

    20% of 120$ is 24$

    24$ will be add in fixed price.

    so actual fair is=120$ + 24 $=144$

    nd i want to display that 144$ into the datalist row according to vehicle

    example:if customer choose source=amritsar nd destination=chandigarh,
    the datalist will display as below

    id=1,name=mercedes,passenger=7,lag=4,smal=2 price=144$
    id=2,name=bmw7,passenger=4,lag=2,smal=2 price=132$

    my problem is-how could i calculate nd display value of price label.

  2. i got no error with your code but when i click on Product (Default.aspx for you) there is no detail show in ProductDetails (ViewDetails.aspx) … i already convert your code into vb..

    (Product.aspx)

    productID:
    <asp:Label ID="productIDLabel" runat="server" Text='’ />

    productName:
    <asp:Label ID="productNameLabel" runat="server"
    Text='’ />

    productDesc:
    <asp:Label ID="productDescLabel" runat="server"
    Text='’ />

    productPrice:
    <asp:Label ID="productPriceLabel" runat="server"
    Text='’ />

    productQty:
    <asp:Label ID="productQtyLabel" runat="server"
    Text='’ />

    productTitle:
    <asp:Label ID="productTitleLabel" runat="server"
    Text='’ />

    productStatus:
    <asp:Label ID="productStatusLabel" runat="server"
    Text='’ />

    ImageUrl:
    <asp:Label ID="ImageUrlLabel" runat="server" Text='’ />

    <asp:LinkButton ID="LinkButton1" runat="server"
    Font-Underline="False" style="font-weight: 700; color: Black" CommandName="ProductDetails" CommandArgument='’ BackColor=”#FF9933″>More

    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
    ConnectionString="”
    SelectCommand=”SELECT * FROM [Product]”>

    (Product.aspx-code behind)

    Protected Sub Page_Load(sender As Object, e As EventArgs)
    GetData()
    End Sub
    Public Sub GetData()
    Dim con As New SqlConnection(ConfigurationManager.ConnectionStrings(“E-CommerceConnectionString”).ConnectionString)
    Dim cmd As New SqlCommand(“SELECT * from Product”, con)
    Dim da As New SqlDataAdapter(cmd)
    Dim ds As New DataSet()
    da.Fill(ds)
    DataList1.DataSource = ds.Tables(0).DefaultView
    DataList1.DataBind()
    End Sub
    Protected Sub DataList1_ItemCommand(source As Object, e As DataListCommandEventArgs)
    If e.CommandName = “ProductDetails” Then
    Response.Redirect(“ProductDetails.aspx?Id=” & e.CommandArgument.ToString())
    End If
    End Sub

    ————————————————————————————————–

    (ProductDetails.aspx)

    Modal:

    ProductDetails:

    Price:

    (ProductDetails – code behind)

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

    Public Sub GetData()

    Dim productID As String = Request(“productID”).ToString()
    Dim con As New SqlConnection(ConfigurationManager.ConnectionStrings(“E-CommerceConnectionString”).ConnectionString)
    Dim cmd As New SqlCommand(“select * from Product where productID = ” + productID, con)
    Dim da As New SqlDataAdapter(cmd)
    Dim ds As New DataSet()
    da.Fill(ds)
    Image1.ImageUrl = ds.Tables(0).Rows(0)(4).ToString()
    Literal1.Text = ds.Tables(0).Rows(0)(1).ToString()
    Literal2.Text = ds.Tables(0).Rows(0)(3).ToString()
    Literal3.Text = ds.Tables(0).Rows(0)(2).ToString()
    End Sub

    ** do you mind to check on the code? thank you

    • i want to user click on the picture on Product.aspx then it will navigate to ProductDetails.aspx with all the description about the item before proceed to Cart…

      • Hello Mai… nice to see you here….

        check Updated Code in the above article…

        Replaced ImageButton instead of Image control in Datalist control…

        Now it will work for image also…

        Happy Coding…

      • i’ve already modify my code..i already can click on the picture but another thing is, when i click on the picture, the detail at ProductDetails.aspx didn’t appear..it only display :
        ————————————————–
        Modal :

        ProductDetails:

        Price :
        ————————————————–

        **the picture that i’ve click also didn’t appear..would u help me on this also chikkanti? thank you

  3. Hello sir, i am new to asp.net and i want to design two things the same as you have in this page first is the comments displaying box which is tagged as “Comments on: “Datalist control Example in asp.net” (14)” and second is “Leave A Reply” box i want to design these two boxes in asp.net so please help thank you…

  4. sir , i am happy with your code ,but small problem ..that is i got same results even click another button also ..so please help me..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s