DreamwaverMX and ASP.NET(4)
Author：Eve Cole
Update Time：2009-05-31 21:06:17
4. Use the DataList component to display the data set
Related introduction:
DataList is an enhanced Repeater control. In addition to the original functions of Repeater, it can also set the number of data displayed in a single line (RepeatColumn), the selected template (SelectedItemTemple), and the edited item template (EditTemplate). However, DataList will arrange the output data in a table and output it, while Repeater is more loyal to the definition of the template and will not add any HTML tags. (Note: In order to display the code, all the following codes have spaces after "<" and before ">". We apologize for the inconvenience!)
STEP 1Create page
The page we want to create is as shown below. When we click the hyperlink of Detail, the detailed information will pop up, as shown in the first item. When you click Close, the details will be closed and restored to their original appearance.
[Figure 1-1 Page Demonstration]
Start by selecting the data you want to display. In order to display the data of Europe (i.e. Region_ID=3), we can choose to filter the data of Region_ID=3 in the Dataset settings.
[Figure 1-2 Data screening]
Use the Datalist control to create a page that briefly displays data. Let's first create a page without data. Then select Server behavior in the Application panel. Click "+" and select DataList.
[Figure 1-3 DataList selection page]
In the dialog box that pops up, we can add page templates where needed.
u Header: header template
u Item: Data item template
u Alternating Item: Cross display template
u Edit Item: Modify the template ((not displayed by default, it must be displayed through event response)
u Selected Item: The template displayed after selection (it must also be displayed through event response)
u Separator: separate template
u Footer: table bottom template
[Figure 1-4 Edit DataList dialog box]
We can make the required template by adding HTML code to Contents, and we can also click
button to add data items. After clicking the button, the data item dialog box will pop up allowing you to select the required data. And add it in the Contents input box
< %# DataBinder.Eval(Container.DataItem, "data item") % >
The code is used to display the data.
[Figure 1-5 Adding data items]
In order to achieve the preview effect, first add the code: Location Name to the Header. Used to display the title. Add code to Item:
< %# DataSet1.FieldValue("LOCATION_NAME", Container) % >, use Location_name as the title of each item.
Add code to Alternating Item
< fontcolor="#0000FF" >< %#DataSet1.FieldValue("LOCATION_NAME",Container)% >< /font >
Display data in different font colors.
Although the Selected Item cannot be displayed immediately, we should also write down the code for later call. as follows:
Address:
< %# DataSet1.FieldValue("ADDRESS", Container) % >
<BR>
City:
< %# DataSet1.FieldValue("CITY", Container) % >
<BR>
Telephone:
< %# DataSet1.FieldValue("TELEPHONE", Container) % >
<BR>
Click OK, and then preview the page. The picture below is the effect of the above code. We will implement the effect of displaying the Selected Item in a moment.
[Figure 1-6 initial preview]
One difference between DataList and Repeater is that you can set a single row to display multiple data, which can be set in the DataList editing window.
[Figure 1-7 Set up a single line to display multiple data]
Selecting the Use Line Breaks option simply has a <BR> tag to separate the data. Select Use a Table to output in table form, and you can determine the number of data displayed in a single row by setting Table Columns.
STEP2 Write code
Selected Item needs to be displayed through events, so we need to create a button to start the event.
j Add LinkButton to generate events. Move the cursor between <ItemTemplate> and </ItemTemplate> in the source code window, click more tags
, select the asp:LinkButton control in the pop-up dialog box.
[Figure 2-1 Tag Chooser dialog box]
In the Edit LinkButton dialog box, set the properties of the LinkButton. Enter the name:Detail in the ID input box.
Enter "Detail" in the Command Name for the command that generates the event, and enter Detail in the Text dialog box (will be displayed)
[Figure 2-2 LinkButton edit box]
Then select the desired color in Layout and click OK to generate code.
< asp:LinkButton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:LinkButton >
In order to have this effect in the cross display, we need to insert the same code in <AlternatingItemTemplate> and </AlternatingItemTemplate>.
At the same time, in order to close the pop-up selection template, a command also needs to be generated, so one more Linkbutton needs to be added. This requires inserting code in <SelectedItemTemplate></SelectedItemTemplate>:
< asp:LinkButton BackColor="#FFFFFF" CommandName="Close" ForeColor="#000000" ID="Close" runat="server" Text="Close" >< /asp:LinkButton >
kWith the command, we also need to use a program to interpret the command. In fact, the process is not complicated, and only a small amount of code needs to be added. Add the following code in < head ></ /head >:
< script language="VB" runat="server" >
Sub DataList_ItemCommand(sender as Object,e as DataListCommandEventArgs)
If e.CommandSource.CommandName="Detail" Then
DataList1.SelectedIndex=e.Item.ItemIndex
ElseIf e.CommandSource.CommandName="Close" Then
DataList1.SelectedIndex=-1
End If
DataList1.DataBind()
End sub
</ /script >
The program can obtain the command (CommandName) when you click the LinkButton to determine the program to be executed. When the SelectedIndex property of the DataList is set to e.Item.ItemIndex, the SelectedItemTemplate page will be opened. If the command is Close and the SelectedIndex property of the DataList is set to -1 (that is, no data item is selected), the DataList will use the ItemTemplate item template to display this item of data.
Also add the code snippet in < asp:DataList >
OnItemCommand="DataList_ItemCommand"
To declare the relationship with the program segment DataList_ItemCommand.
Press "F12" to preview, and the page will display the expected effect.
[Figure 2-3 Final preview version]
Attached is the source code of the main program segment:
Sub DataList_ItemCommand(sender as Object,e as DataListCommandEventArgs)
If e.CommandSource.CommandName="Detail" Then
DataList1.SelectedIndex=e.Item.ItemIndex
ElseIf e.CommandSource.CommandName="Close" Then
DataList1.SelectedIndex=-1
End If
DataList1.DataBind()
End sub
< form runat="server" >
< asp:DataList id="DataList1"
runat="server"
RepeatColumns="1"
RepeatDirection="Vertical"
RepeatLayout="Flow"
DataSource="< %# DataSet1.DefaultView % >"
OnItemCommand="DataList_ItemCommand" >
<HeaderTemplate>
Location Name < /HeaderTemplate >
<ItemTemplate>
< %# DataSet1.FieldValue("LOCATION_NAME", Container) % >
< asp:linkbutton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:linkbutton >
< /ItemTemplate >
< AlternatingItemTemplate >< font color="#0000FF" >
< %# DataSet1.FieldValue("LOCATION_NAME", Container) % >
< /font >
< asp:linkbutton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:linkbutton >< /AlternatingItemTemplate >
<SelectedItemTemplate>Address:
< %# DataSet1.FieldValue("ADDRESS", Container) % >
<BR>
City:
< %# DataSet1.FieldValue("CITY", Container) % >
<BR>
Telephone:
< %# DataSet1.FieldValue("TELEPHONE", Container) % >
<BR>
< asp:LinkButton BackColor="#FFFFFF" CommandName="Close" ForeColor="#000000" ID="Close" runat="server" Text="Close" >< /asp:LinkButton >
< /SelectedItemTemplate >
< /asp:DataList >
< /form>
DataList also has a template for Edit Item, which is mainly used for data updates. This book will be introduced in a later section.
