Print Data List Control and its application in ASP.net

Data List Control and its application in ASP.net

Here in this section we discuss about  Data List Control and its application in ASP.net. The DataList control is a addition of the DataGrid and Repeater controls. It works like the Repeater control, allowing us to create templates so that it can be bound to a data source. It also allows us to edit records, much like the DataGrid control.Now days in every online shopping sites like Flipkart.com,Jabong.com every products are displayed in a datalist format.When we click on the product details button or link we go to another page containing that desired product with a vast description.This all is done with the help of a datalist tool. Here I will explain in details with a example including screenshots and source codes. Example: To view all Categories with Image Buttons in a Datalist View and when a customer/user click on a particular category it display all the products under that category. In this example we need to build to web forms: Suppose: 1.     Userviewone.aspx 2.     Userviewtwo.aspx To add new web forms follow the below steps 1.     Go to Website 2.     Click on Add New Item 3.     Select Web Form 4.     Name the Web Form like” Userviewone.aspx” 5.     Select the language.Here in this case we are using C#. 6.     Click Add   Webform 1- userviewone.aspx In this page we will view all the categories with pictures from the database with the help of  a datalist tool.The most advantage of using a datalist tool is that we can design in any way we want .In this example we will be passing the category id to the second page (the page displaying all the products under that category ) using Command Argument. This will be done using Image Buttons. To select the Data List tool Step1:Go to View Step2:Click Toolbox Step3: Under “Data” double click “DataList”. After Clicking it will look like the below image. In the above picture we can see the arrow.If we click here a  DataList Tasks sidebox open similar to gridview.Here we can change  formats of the datalist,edit templates. To change the format of the datalist Step1:Click the “Auto Format” as seen in the above image. Step2:After Clicking Choose the Scheme accordingly. Step3:Click “Apply” then “Ok” Edit Template Step1: In the “DataList Tasks” side box click  “Edit Template”. A box open as shown in the below screenshot. Note** Its almost similar like GridView but the difference is that GridView Contains Different Item Templates for different Columns but in a Datalist we can edit only one Item Template which will reapeat row column wise. Step2: Now in this example we only want to display all category images.So we dragged a Image Button from the toolbox as seen above. Step3:  Step4: Go to Edit DataBindings Step5: After Clicking the “Edit DataBindings” a box opens as shown in the above screenshots.Now as we want to display all the category images the image url is provided in the Code Expession along with Database Column Name where the images are stored. CodeExpression: “images”+Eval(“CategoryImage”)- here “images” is th folder name where all the images are uploaded.  Step6: Click ok   Now the Most important task. **** CommandArgument- It is a property of Image Button.Using this property we are passing the category id to next page thus displaying the products under that category.In the same way we can use command argument to pass productid to another page where we can see the details of that product using “view  product details” image button as we often see in all the online shopping site. In order to bound this property. Step1: We need to Go to the “Source Page”.Till now we were working on the “Design page”.Source Page contains all the Html Coding and tags.

Invalid ad code! Yllix media

Step2: In the above screenshots we can see there are two arrows , one indicating the “Source page” and the other  “<ItemTemplate>”  tag.Under this we can see the Imagebutton Id and the Image url.

Now to add the Command Argument the complete code will be- 

Here we can see CommandArguement is Eval(“CategoryID”) since we are passing the categoryid.Now if we need to pass the product id then it would be Eval(“ProductID”).

Now the main Source Code

Source Code:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;

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

{

    protected void Page_Load(object sender, EventArgs e)

    {

        if (IsPostBack == false)

        {

            populatecategorylist();

        }

    }

    private void populatecategorylist()

    {

        String myconstring = System.Configuration.ConfigurationManager.ConnectionStrings["OurDatabaseConnectionString1"].ConnectionString;

        SqlConnection con = new SqlConnection(myconstring);

        con.Open();

        string query = "select * from category order by CategoryID";

        SqlCommand com = new SqlCommand(query, con);

        SqlDataAdapter da = new SqlDataAdapter(com);

        DataSet ds = new DataSet();

        da.Fill(ds);

        con.Close();

        DataList1.DataSource = ds.Tables[0];

        DataList1.DataBind();

    }

   

    protected void ImageButton7_Click(object sender, ImageClickEventArgs e)

    {

        ImageButton btn1 = (ImageButton)sender;

        string cid = btn1.CommandArgument;

        Response.Redirect("userviewtwo.aspx?id=" + cid);

    }

}

 

Webform 2- userviewone.aspx:

In this page we will view all the products with the datalist tool.The products will depend on the category id passed to this page using “Command Argument”.
Step1:Go to Toolbox and Double Click or Drag the DataList tool.

Step2:Go to DataList Task Side Box where we can change  formats of the datalist,edit templates(as shown in the above example).

Step3: Edit Templates-> Now edit the Item Template section accordingly.You can design it in any way you want.

Step4:  Here in the above picture we can see there is a Image,a label and  Image button.

Step5- Go to Edit DataBindings of each tools

1)    Image1->code expression- "images/"+ Eval("Productimage")

2)    Label1-> code expression- Eval("OurPrice")

3)    View Details Button-> code expression is not needed it will be needed to pass command argument  to another page where the product description contains.

 

Step6: End Template editing

Step7: Now select the Datalist and click f4.

Step8:Now change the following properties from properties table.

i)Repeat Columns-> You can give whatever number you like, only keep in mind that it looks good.Here I am giving 4.Now after every 4 columns it will repeat.

ii)Repeat Direction- Horizontal

 

Source code of this page:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;

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

{

    protected void Page_Load(object sender, EventArgs e)

    {

        if (this.IsPostBack == false)

        {

            if (Request.QueryString["id"] != null)

            {

                String cid = Request.QueryString["id"];

                populatedatalist(cid);

            }

            else

            {

                Response.Redirect("userviewone.aspx");

            }

        }

    }

    private void populatedatalist(string cid)

    {

        String myconstring = System.Configuration.ConfigurationManager.ConnectionStrings["OurDatabaseConnectionString1"].ConnectionString;

        SqlConnection con = new SqlConnection(myconstring);

        con.Open();

        string query = "select * from product where CategoryID='" + cid + "'";

        SqlCommand com = new SqlCommand(query, con);

        SqlDataAdapter da = new SqlDataAdapter(com);

        DataSet ds = new DataSet();

        da.Fill(ds);

        con.Close();

        DataList1.DataSource = ds.Tables[0];

        DataList1.DataBind();

    }

}
OutPut :After running this program
UserViewOne.aspx Page

After clicking the men shoes category in the above screenshots the page will redirect to the userviewtwo.aspx page dispalying the products under men shoes category as shown below.