Dreamwavermx and asp.net (iv.)

asp.net 4. Displaying datasets with DataList components

Related introduction:

DataList is a function-hardening repeater control, in addition to the original function of repeater, can also set the number of lines to display data (Repeatcolumn), by the option template (selecteditemtemple), edit item template ( Edittemplate). However, DataList will arrange output data in the table, while repeater is more loyal to the template definition and does not add any HTML tags. (Note: In order to be able to display the code, all of the following code in the "<" and ">" before adding a space, inconvenience please forgive! )

Step 1 to create a page

The page we want to build is shown in the following figure. When we click on the detail hyperlink, we pop up the details, as shown in the first item. When you click Close, the details are turned off and restored to their original appearance.


[Figure 1-1 Page Demo]

Select the data you want to display first. In order to display the European data (i.e. region_id=3), we can select the filtered region_id=3 data in the dataset settings.


[Figure 1-2 Data filtering]

Use the DataList control to make a page with a brief display of data. Let's build a page with no data first. Then select the server behavior in the application panel. Click "+" to select DataList.


[Figure 1-3 DataList Select Page]

In the Bouncing out dialog, we can add the page template to where we need it.

U Header: Header template

U item: Data Item Template

U alternating Item: cross-Display template

U Edit Item: Modify Template (default is not shown and must be displayed by an event response)

U Selected Item: The template that is displayed when it is selected (also required to be displayed by an event response)

U Separator: Separator Template

U Footer: Table Bottom Template


[Figure 1-4 Edit DataList Dialog box]
We can make the required template by adding HTML code to the contents, or you can add items by clicking the button. When you click the secondary button, the Data Entry dialog box is displayed so that you can select the data you want. and add in the contents input box

<% # DataBinder.Eval (Container.DataItem, "data item")% >

Code to display the data.


[Figure 1-5 Adding data items]

To achieve the effect of the preview, first add code to the header: Location Name. Used to display the caption. Add code to item:

<% # Dataset1.fieldvalue ("Location_name", Container)%, with Location_name to do the title of each item.

Add code to alternating item

< fontcolor= "#0000FF" ><% #DataSet1. Fieldvalue ("Location_name", Container)% ></font >

Displays the data in a different font color.

Although the selected item does not appear immediately, we should also write down the code for later invocation. As follows:

Address:

<% # Dataset1.fieldvalue ("Address", Container)% >

< BR >

City:

<% # Dataset1.fieldvalue ("City", Container)% >

< BR >

Telephone:

<% # Dataset1.fieldvalue ("Telephone", Container)% >

< BR >

Click OK, then preview the page, the following figure is the effect of the above code. We'll just wait a moment to achieve the effect that shows the selected item item.


[Figure 1-6 Initial preview]
A different point of DataList difference Repeater is that you can set up a single line to display multiple data, which can be set in the DataList editing window.


[Figure 1-7 Set up a single-line display multiple data]

Selecting the use line breaks item simply has a < BR > tag to separate the data. Select Use a table is output as a table, and you can set the table columns to determine the number of pens to display the data in a single line.

STEP2 Writing 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 to the < ItemTemplate > and </itemtemplate > of the Source Code window, click More tags, and select the Asp:linkbutton control in the dialog box that pops up.


[Figure 2-1 Tag Chooser dialog box]

In the Edit LinkButton dialog box, set the properties of the LinkButton. Enter a name in the ID input box: Detail,

In command name, enter the Detail (which will be displayed) in the Text dialog box, where "Detail" is used to generate an event.


[Figure 2-2 LinkButton edit box]

Then select the desired color in the layout and click OK to generate the 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 selection after the model, the same need to produce commands, so to add a LinkButton. This requires inserting code in the < SelectedItemTemplate ></selecteditemtemplate >:

< Asp:linkbutton backcolor= ' #FFFFFF ' commandname= ' close ' forecolor= ' #000000 ' id= ' close ' runat= ' server ' text= ' close "></asp:linkbutton >

K with the command, we also need to use a program to explain the command. In fact, the process is not complex, only need to add a small number of code. Add the following code in < 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 get the command you clicked on LinkButton (CommandName) to judge the program to be executed. When the DataList SelectedIndex property is set to E.item.itemindex, the SelectedItemTemplate page is opened. If the command is close then DataList's SelectedIndex property is set to-1 (that is, no data items are selected), DataList displays this data with a ItemTemplate item template.

Add code Snippets in < Asp:datalist >

Onitemcommand= "Datalist_itemcommand"

The relationship between the Declaration and the Datalist_itemcommand of the program segment.

Press "F12" to preview, the page will show the desired effect.


[Figure 2-3 Final preview version]
The source code for the main program section is attached:

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
< 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, mainly for data updates. This book is to be introduced in a later section.