Migrate from ASP to ASP + -- convert HTML tables to ASP + Data lists

Convert an HTML table to an ASP + data list (DataList)
Author: yuchen

The data we retrieve from the data storage will be used to display the next two courses provided by eVille. Based on the page design considerations, the standard table is not suitable here. Data must be displayed in a custom format to display the course name, course description, and registration Link (Session_ID is transmitted through QueryString ). The following is a loop created by the original ASP page using the ADO record set, which creates a new row for each record.

<Table width = "100%" border = "0">

<Tr>

<Td class = "headerRow"> Upcoming Events </td>

</Tr>

<% Do While Not rsUpcoming. EOF %>

<Tr>

<Td> <p> <B> <% = rsUpcoming ("Title") %> </B> <br>

<% = RsUpcoming ("Description") %> </p>

<P> <a href = "enroll. asp? SessionID = <% = rsUpcoming ("Session_ID") %> ">

Enroll Now! </A> </p> <br>

</Td>

</Tr>

<%

RsUpcoming. MoveNext

Loop

%>

</Table>

In ASP +, we use the new server control, DataList. ASP + DataList is a new control used to create custom page la S. These la s are table-based. DataList creates rows and columns of a table based on the attributes you grant, and uses a Template to control the layout. In the following example, we use ItemTemplate to format the layout of each row. This templates controls the layout of each displayed unit (one record to one unit ):

<Tr>

<Td class = "headerRow"> Upcoming Events </td>

</Tr>

</Table>

<Asp: DataList id = "dlUpcoming" width = "100%" runat = "server">

<Template name = "ItemTemplate">

<P> <B> <% # Container. DataItem ("Title") %> </B> <br/>

<% # Container. DataItem ("Description") %> </p>

<P> <a href = "enroll. asp? SessionID = <% # Container. DataItem ("Session_ID") %> ">

Enroll Now! </A> </p> <br/>

</Template>

</Asp: DataList>

By default, DataList creates a single column table. You can change its attributes to create multiple columns:

<Asp: DataList id = "dlUpcoming" width = "100%"

RepeatDirection = "Horizontal"

RepeatColumns = "2"

Runat = "server">

Other data display controls include the DataGrid (standard table layout) and Repeater (fully custom layout ).

If we look at the page now, nothing in the table will be displayed. This is because data is not provided even though layout is designed. We must explicitly bind the data (A DataView in DataSet) to the ASP + DataList control. By setting the DataSource property, call the DataBind () method of the control to display data, we can do this.

Since ASP + web applications are compiled before running, we do not need to follow the linear processing process on the page. Even if the DataList ID is not determined until the central part of the page code (when we actually put the control on the page), we can still specify the control in the Page_Load event at the beginning of the page. In this way, when the page is loaded, the data has been bound to the control.

<Script language = "vb" runat = server>

Sub Page_Load (Source As Object, E As EventArgs)

...

CmdUpcoming. FillDataSet (dsUpcoming, "Upcoming ")

DlUpcoming. DataSource = dsUpcoming. Tables ("Upcoming"). DefaultView

DlUpcoming. DataBind ()

End Sub

</Script>

The use of ASP + server controls such as DataList allows us to access the control in a planned manner. In this way, we can write code for its attributes and methods. In the first row, we set the DataSource attribute of DataList to DataView (a separate data table) in DataSet ). We set it to the default view of the Upcoming table in the DataSet table set ). After DataSource is set, call the DataBind () method of the DataList control to bind the SQL query result to the DataList control.