ASP.NET Controls Tutorial

This tutorial will demonstrate how to bind data to a data list control with ASP.NET 4.0 and C#. 


What is the DataList?
The data list is an ASP.NET control that allows you to display data from a data source. The data list can easily be configured to format data into a table using its item templates. 


Need help with cloud hosting? Try Server Intellect. We used them for our cloud hosting services and we are very happy with the results!


Using the DataList
To demonstrate how to use the data list control, we will need to create a simple web site with a data table that we will use as a data source. To begin, create a new ASP.NET Empty Web Site and: 
Right click the project in your solution explorer.
Select add new item...
Select a web form.
Name it 'Default.aspx'.
Click add.
Open Default.aspx up to design mode.
Drag and drop a datalist control onto the web form.
Now that we have added a data list to our web site, we need to create a data source for it. We will create a data table with a single column and some temporary data to bind to the data list. To do this, open up the Default.aspx.cs for editing and add the following code to the Page_Load event method:

//create a data table DataTable dt = new DataTable(); //add a new column dt.Columns.Add("Data"); //data row we will use to add in all of our rows DataRow dr; //add in temp data dr = dt.NewRow(); dr["Data"] = "One"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["Data"] = "Two"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["Data"] = "Three"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["Data"] = "Four"; dt.Rows.Add(dr); //update data table dt.AcceptChanges(); //bind the datable table to our data list DataList1.DataSource = dt; DataList1.DataBind();

This code creates the data table, and then binds it to the data list.

We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect's help, we were able to avoid any headaches!

Next, we need to add some code to our data list so that it will display the data column of our data table. To do this, open Default.aspx to source mode and add the following code to the data list: 

<HeaderTemplate>     <table> </HeaderTemplate> <ItemTemplate>     <tr>         <td>             <%# Eval("Data") %>         </td>     </tr> </ItemTemplate> <FooterTemplate>     </table> </FooterTemplate>

This code creates a table, in which the data column of our data source is displayed in its own row.

TestingTo test this out, simply load up the web site and ensure that the data from your data table is being displayed on the page. This demonstrates how easy it is to use the data list to format data from a data source and display it on a web page.

Your Ad Here