Creating a DataList Control

DataList is basically a control which you would like to use it when you are making a shopping cart or maybe when you are developing a photo album. Let me show you an image and than you will have better idea of what I am talking about.

Let's make a simple DataList control (Sample2.aspx)

Just drag and drop a datalist control on the form. Right click the control and select Edit Template link at the bottom and select Item templates. Now you will see a visual designer where you can add anything in the item template section. You can even drag any control on the item template field. Let's drag a textbox and see what happens. When you drag a textbox and switch back to the design view you will see 5 textboxes in a flowlayout. You can also set them in horizontal layout by using the RepeatDirection property.

Since, this control is similar to the repeator control I will not talk about this more and switch to DataGrid control which is perhaps the most widely used Data Bound control

Creating and using a datagrid control:

Setting up the Datagrid:

Lets first set up our datagrid.

1. Drag and Drop the datagrid control from your toolbox to the webform.
2. The datagrid will appear as a simple table.
3. You can make the datagrid pretty by selecting the Auto format features.

Okay your datagrid is set up, lets add some columns.

Adding the Bound Columns:

Adding the bound colums in the datagrid is pretty simple.

1. Right click on the datagrid and select Property Builder.
2. Click on the Columns tab and uncheck "Generate columns automatically".
3. Add three bound columns, give the columns some name in the column name field. And finally add the edit,update,cancel buttons which can be found under the button option.

Note: Please also note that the button type should be link button or else it wont work.

Storing the database connection

In this demo I am storing the database connection in the Web.config file. The database name is DBSnippets, which has one table known as tblPerson. Here is the web.config file.

Okay till now we have made the Datagrid and also saved the connection string in the web.config file. Now the time has come to code and handle the events.

Lets first make the BindData method which will retrieve the contents from the database and bind it on the screen. This will be one of the most important methods since it will be called whenever the page is loaded for the first time.

private void Page_Load(object sender, System.EventArgs e)
{
if(!Page.IsPostBack)
{
BindData();
}
}

As you see the BindData method is called when the page is not posted back. Now lets see the BindData method in details.

public void BindData()
{
SqlCommand myCommand = new SqlCommand("SP_SELECT_PERSONS",myConnection);
myCommand.CommandType = CommandType.StoredProcedure;
SqlDataAdapter myAdapter = new SqlDataAdapter(myCommand);
DataSet ds = new DataSet();
myAdapter.Fill(ds,"tblPerson");
myConnection.Open();
myCommand.ExecuteNonQuery();
myDataGrid.DataSource = ds;
myDataGrid.DataBind();
myConnection.Close();
}

Explanation of the BindData method:

1. First we make a SqlCommand object and named it myCommand. The SqlCommand object takes a stored procedure as an input and the SqlConnection.
2. We feed the command object to the DataAdapter object named as myAdapter.
3. A dataset is declared which is filled with the result of the Stored procedure.
4. myDataGrid.DataBind() binds the datagrid to the page. Don't forget to bind the grid or else it won't be displayed.
5. Later we opened the connection and execute the query.

Now Lets see the stored procedure.