3. Use the Repeater component to display the data set
Related introduction
There are various ways to display data in ASP.NET, among which Repeater is another existing component. DataGrid will always display data in a "table". When we want to display data in a more free way, we will definitely use the Repeater control.
It defines the data output format in the form of Template.
STEP 1. Create a page. We can create a Repeater component to display data by changing the original page. Rename Location1.htm to Location1.aspx. Delete the original part of the page and create a Dataset as in the previous chapter, filtering Region_IDEnterValue=1. Let's use the Repeater control to create dynamic pages.
jIn order to use templates to define the output format, first create a table. We can see it through the ApplicationàDatabases page
The structure of the database.
[Figure 3-1 Database structure]
Based on the structure of the database, design the following tables.
[Figure 3-2 Template diagram]
kThe data needs to be bound to the table below. Drag the data item from Bindings in the Application panel into its position.
[Figure 3-3 Binding dialog box]
After data binding, you get the following page:
[Figure 3-4 Page after data binding]
It feels a bit like déjà vu, as Dreamwaver MX continues the UltraDev tradition of highlighting data. ③ The data representation form can also be selected in the Binding dialog box. After clicking the data item on the page, the data representation form can be selected for the corresponding data in the Binding.
[Figure 3-5 Data representation form]
If you want to use this table as a template to display all data items, you need to select all of this table. Click the "+" in the Server Behaviors item in the Application panel and select the Repeat Region item
[Figure 3-6 Select Repeat Region] [Figure 3-7 Select repeat method]
Determine the method you want to repeat in Repeat Region and click OK. Now you can press "F12" to preview the page.
STEP 2 Analyze the code (Note: In order to display the code, all the following codes have spaces after "<" and before ">". We apologize for the inconvenience!)
< ASP:Repeater runat="server" DataSource='< %# DataSet1.DefaultView % >' >
<ItemTemplate>
< table width="75%" border="0" >
<tr>
< td width="18%" >Location Name< /td >
< td colspan="3" > < %# DataSet1.FieldValue("LOCATION_NAME", Container) % > </ /td >
< /tr >
<tr>
< td >City< /td >
< td width="35%" > < %# DataSet1.FieldValue("CITY", Container) % > </ /td >
< td width="19%" >Address< /td >
< td width="28%" > < %# DataSet1.FieldValue("ADDRESS", Container) % > </ /td >
< /tr >
<tr>
< td >State</ /td >
< td > < %# DataSet1.FieldValue("STATE_COUNTRY", Container) % > < /td >
< td >Code< /td >
< td > < %# DataSet1.FieldValue("CODE", Container) % > < /td >
< /tr >
<tr>
< td >Telephone< /td >
< td > < %# DataSet1.FieldValue("TELEPHONE", Container) % > < /td >
< td >Fax< /td >
< td > < %# DataSet1.FieldValue("FAX", Container) % > < /td >
< /tr >
< /table >
< /ItemTemplate >
< /ASP:Repeater >
ASP.net displays all data repeatedly by creating an ItemTemple template, so if you want to set the Repeater style, you can do it by setting the template.
We can also add other templates to achieve the effect we want.
AlternatingItemTemplate: Implements cross-display data. Cross-display data with the template of the original ItemTemplate
SepartorTemplate: Separator template. Can be used to separate rows of data.
HeaderTemplate: Header template. Shown at the top with all data.
FooterTemplate: Footer template. Shown at the bottom with all data.
Its design form is the same as ItemTemplate. Just surround the part you want to template with markers.
There are shortcuts for inserting code through Dreamwaver MX. Click the ASP.NET tab of the Insert panel, then click mark, the mark adding dialog box will pop up. Select the Templates project in ASP.NET Tags. You can then select the code you want to add. Dreamwaver MX will add the code at the position where your original input cursor was.
[Figure 2-1 Add Marker Dialog Box]
The following is the code for AlternatingItemTemplate, SepartorTemplate, HeaderTemplate, and FooterTemplate, which can be inserted into < ASP:Repeater > < /ASP:Repeater >.
< headertemplate >< font color="#666666" size="4" >All
Location< /font >< /headertemplate >
<AlternatingItemTemplate>
< table width="75%" border="0" bgcolor="#CCCCCC" >
<tr>
< td width="17%" >Location Name< /td >
< td colspan="3" bgcolor="#CCCCCC" >
< %# DataSet1.FieldValue("LOCATION_NAME", Container) % >
</ /td >
< /tr >
<tr>
< td >City< /td >
< td width="34%" > < %# DataSet1.FieldValue("CITY", Container) % > </ /td >
< td width="24%" >Address< /td >
< td width="25%" > < %# DataSet1.FieldValue("ADDRESS", Container) % > </ /td >
< /tr >
<tr>
< td >State</ /td >
< td > < %# DataSet1.FieldValue("STATE_COUNTRY", Container) % > < /td >
< td >Code< /td >
< td > < %# DataSet1.FieldValue("CODE", Container) % > < /td >
< /tr >
<tr>
< td >Telephone< /td >
< td > < %# DataSet1.FieldValue("TELEPHONE", Container) % > < /td >
< td >Fax< /td >
< td > < %# DataSet1.FieldValue("FAX", Container) % > < /td >
< /tr >
< /table >
< /AlternatingItemTemplate >
< separatortemplate >< hr width="70%" align="left" >
< /separatortemplate >
< footertemplate >< font color="#666666" size="4" >End< /font >< /footertemplate >
When IIS parses the code, it will put the template into the relative position based on the keywords and obtain the originally requested page.
The page generated by the above program is as follows:
[Figure 2-1 Final page]
The Repeater component can create a more free page, but each row can only display one set of data. If you want to create a more free page, let's go to the next section and use the DataList control to display data.