In this tutorial of Week 6 we will be learning about Overview of List-Bound Controls, Creating a Repeater Control, Creating a DataList Control, Introduction to the DataGrid, Setting Up the DataGrid , Using Advanced DataGrid Features and Adding Advanced Features.
Overview of List-Bound Controls
As we have seen in the previous tutorials that Asp.net ships with many controls. We already discussed different types of buttons, validation controls and the calendar controls. But the most power of Asp.net comes with the Databound controls. Databound controls are those controls which can be binded to any data source. They are also known as complex controls as well as databound controls. In this tutorial we will see some of the most widely used databound controls.
Creating a Repeater Control(Sample1.aspx)
Let's start with the Repeator control. Also keep in mind that all these controls are also known as the templated controls since their design is based on templates. Repeator control is used when we like to do our own formatting which means it is used in the cases where we like to make our own databound design control which may contain controls that we like.
In order to use the Repeator control you can just drag and drop the control on the webform. When you drop it will look something like this:
Now as you see that the repeator control is also telling you that if you don't like what you see now you can always change it by using the html view of the page
Let's see how we can do that so I went in the html view and changed the Repeator html code to this.
ItemTemplate tells the repeator control that what each item will be like in the repeator control. In the ItemTemplate we declared a button. Now switch back to the design view and you will see this:
So you see it just created several buttons for you since they were placed in the item template. There are also other types of templates like AlternatingItem and HeaderTemplate and FooterTemplate. Let's see an example where we use all of them:
This is the Header
This is the footer
This is the Header
This is the footer
Now let's see when I switch back to the design view what will I see:
