ASP.NET The DataList Control- Bind DataList, ItemCommand Event to Fetch DataList Control’s Value

DataList is a data bound list control that displays items using certain templates defined at the design time. The content of the DataList control is manipulated by using templates sections such as AlternatingItemTemplate, EditItemTemplate, FooterTemplate, HeaderTemplate, ItemTemplate, SelectedItemTemplate and SeparatorTemplate. Each of these sections has its own characteristics to be defined but at a very minimum, the ItemTemplate needs to be defined to display the items in the DataList control. Other sections can be used to provide additional look and feel to the DataList control. To Fetch the values of DataList Controls we write code in ItemCommand Event of DataList. This project will show you to use DataList Control in ASP.NET.

Free Download

DataList Control : Demo Project

Editing Template :

As I told earliar DataList control is manipulated by using templates sections such as

AlternatingItemTemplate,EditItemTemplate, FooterTemplate, HeaderTemplate,

ItemTemplate, SelectedItemTemplate and SeparatorTemplate. The Item Template needs to be defined to display the items in the DataList control. Here are the steps to Design ItemTemplate of DataList Control

Step 1: Drag and Drop a DataList Control from ToolBox :-

Step 2: Choose EditTemplates option to design your own DataList Control:-

Step 3: Drag and Drop the controls from the ToolBox that you want to show in DataList:-

Step 4: Bind a Column Value with The Control of DataList ItemTemplate :-

Step 5: Bind the Column of DataBase with DataList Item using Eval() Function:-

Step 6: Choose End Edit Templates to Finish Editing Template:-

Displaying The DataBase Record in DataList:

1. Page Design:

2. Page Source Code :

<form id="form1" runat="server">
    <div>
        <asp:DataList ID="DataList1" runat="server" BorderColor="#660033"
            BorderWidth="2px" Width="1015px" onitemcommand="DataList1_ItemCommand">
            <ItemTemplate>
            <div style="border-width:2px">
                <table class="style1" style="border-width:2px">
                    <tr>
                        <td rowspan="2" style="width:25%">
                            <asp:Image ID="Image1" runat="server" Height="150px" Width="150px" ImageUrl='<%# Eval("Image") %>' />
                        </td>
                        <td style="width:75%">
                            <asp:LinkButton ID="lnkTitle" runat="server" Font-Bold="True" Font-Underline="False" ForeColor="Maroon" Text='<%# Eval("Title") %>' CommandName="readstory" CommandArgument='<%# Eval("id") %>'></asp:LinkButton>  </td>
                    </tr>
                    <tr>
                        <td style="width:25%">
                            &nbsp;</td>
                        <td style="width:75%">
                            &nbsp;</td>
                    </tr>
                    <tr>
                        <td style="width:25%">
                            &nbsp;</td>
                        <td style="width:75%" align="right">
                            <asp:LinkButton ID="lnkReadMore" runat="server" Font-Bold="True" Font-Underline="False" ForeColor="Maroon" CommandName="readmore" CommandArgument='<%# Eval("id") %>'>Read more...</asp:LinkButton>   </td>
                    </tr>
                </table>
                </div>
            </ItemTemplate> </asp:DataList>
 </div>
    </form>

3. Bind DataList with DataBase:

protected void Page_Load(object sender, EventArgs e)
    {
        try
        {
         string constring = WebConfigurationManager.ConnectionStrings["BindList"].ToString();
         SqlConnection con = new SqlConnection();
        SqlCommand com = new SqlCommand();
        con.ConnectionString = constring;
        com.Connection = con;
        com.CommandText = "select id,Title,Description, Image from DataListMaster";
        con.Open();
        IDataReader dr = com.ExecuteReader();
        DataTable dt=new DataTable();
        dt.Load(dr);
        DataList1.DataSource = dt; DataList1.DataBind();

        con.Close();
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }

Fetch DataList Values:

To Fetch the DataList Items we use the ItemCommand Event of DataList and also we use two specific Properties of a particular Item of DataList. These two properties are CommandName and CommandArgument.

1. Set CommandName and CommandArgument Property for the DataList Item:

 <asp:LinkButton ID=”lnkTitle” runat=”server” Font-Bold=”True” Font-Underline=”False” ForeColor=”Maroon”

Text='<%# Eval("Title") %>' CommandName="readstory" CommandArgument='<%# Eval("id") %>'></asp:LinkButton>

2 . Fetch The CommandArgument Value on ItemCommand Event:

protected void DataList1_ItemCommand(object source, DataListCommandEventArgs e) {
        int id = 0;
        if (e.CommandName == "readstory") {
             id =Convert.ToInt32(e.CommandArgument);
             Response.Redirect("Details.aspx?id=" + id);
        } if (e.CommandName == "readmore") {
            id = Convert.ToInt32(e.CommandArgument);
            Response.Redirect("Details.aspx?id=" + id);
        }
    }