Use ASP+ list binding control
nikhil kothari
Microsoft Corporation
July 2000
Abstract: Explain ASP+ Repeater, DataList and DataGrid server controls. These controls can realize a data source, HTML -based application user interface. Discuss the concepts related to these controls and summarize the basic examples of using these controls.
Table of contents
Brief introduction
How does the list binding control work?
Repeater control
DataList control
DataGrid control
Repeater, DataList or DataGrid?
Related resources
Download the example file (56 kb) related to this article.
Brief introduction
Repeater, DataList, and DataGrid control constitute the related web control sets in the name space in the system.web.webcontrols in ASP+ Page Framework. These controls make the content of the binding list or data source of the HTML display. Therefore, they collectively refer to them as "list binding controls".
Similar to other web controls in the framework, these controls provide consistent programming models and encapsulate a representative logic independent of the browser. These characteristics enable developers to program in object models without having to master the inconsistent and complex technical knowledge related to HTML.
These three controls can represent the data source content related to its related data sources according to a variety of layouts (including lists, columns/newspaper columns and stream layouts (HTML streams)). In addition, they also allow you to create a completely different or completely customized layout. In addition to the logic of the packaging, it also provides the function of processing the transmitted data, execution status management, and triggered events. Finally, they also provide different levels of support for standard operations such as selection, editing, paging and sorting. These controls can simplify several common web applications, including reports, shopping carts, product lists, query results and navigation menus.
The following will further illustrate these controls and how to use them in your web applications and how to choose controls.
How does the list binding control work?
This section is the background material of the rest of this article. Overview the working methods of these list binding controls, their common characteristics, and certain related concepts.
DataSource attribute
Each control has a DataSource attribute with its type is system.collections.icollection. In the simplest words, data sources are a list or collection of similar objects.
Several objects in this framework provides the implementation of iCollection. This collection includes system.data.dataView (it is usually used to access relational databases and XML data), general iCollection implementation (such as ArrayList and Hashtable), and array.
Unlike traditional data binding controls (they usually need ADO record sets), except for implementing the ICOLLECTION interface, these list binding controls do not strengthen any other requirements for their data sources. According to the design, the type and data structure that can be used as a valid DataSource attribute value through a large amount, and they can maximize simple and flexibility for your application code.
Project collection
Each list binding control contains a project set. The control is set into its project collection by listing the current data source of these objects. Create a single item for each object and use it to represent the object. These items are part of the control hierarchical structure contained in the list binding control.
The table below lists the type of project associated with the data source.
The default project type created by the project
AlternatingITEM is the project creation with odd bidding in the project collection
SELECTEDITEM is created for the selected project (regardless of whether the project is a alternative project)
Edititem is created for projects in the editing mode (whether it is selected or alternative)
The control will be created at the same time in the following items that will be used. However, they are not associated with data source data.
The header is used to represent the header information
The footnote is used to indicate the footable information
The separators are used to represent the content between each item shown in Figure 1, and it is only applicable to the Repeater and DataList
The paging symbol is used to indicate the pagination UI associated with the DataGrid control
Figure 1. Compared to the "Project" collection of the "control" collection
Project data binding and creation
The list binding control follows the explicit data binding model implemented in the entire ASP+ framework. This means that the control only needs to be listed when the DataBind method is called.
When the DataBind method is called, the list control will list its data source, create a project, and initialize it by extracting the value from its data source. If the status management is enabled, the control will also save all the required information to re -create its project during the return processing period of the page without re -setting the data source.
The explicit data binding model enables your application code to accurately determine when and where the data source is needed in the processing sequence. This feature makes access to database servers less and more efficient, and these accesss are usually the most consumed operation of web applications.
The general rule is that databin must be called whenever you need to re -create the project. In most cases, you will call DataBind when your page is requested to create an initial project collection for the first time. During the follow -up execution of this page, you will need to call this method in various events processing procedures that are changed by the project collection. This happens when the query used to create the initial data source may happen. This may also happen when the status of the project changes (such as changing from only to the editing mode).
style
By using style attributes on the object model, you can define all DataList and DataGrid controls and the formats and appearances it contains. These attributes are allowed to customize fonts, colors, borders and other appearance factors. The style attribute of the control itself (such as foreground color, background color, font and border style) will affect the representation of the entire control.
In addition, each control contains a large number of style attributes that matches the types of items it created, such as As Itemstyle, AlternatingItemstyle and HeadersStyle. DataGrid offers third -level style attributes that affect all cells in specific columns. Each column contains in the control can have its own HeadlderStyle, FOOTERSTYLE, and ItemStyte.
template
The style control format is displayed, while the template defines the content and representation of each item. You can think of the template as an HTML code sheet, which defines the control hierarchical structure used to represent the project.
Repeater and DataList controls are driven by your specified templates to provide various setable template properties, such as ItemTemplate, AlternatingItemTemplate, and HeadertEMPlate. Similar to style, each template corresponds to a specific type of project.
DataGrid control is not template. However, the TemplateColumns in the COLUMN collection of the control make the use of templates in DataGrid. Each cell in TemplateColum can contain a template, which is very similar to items in the Repeater or DataList control. This also makes customization in DataGrid possible.
Data binding in the template
The control hierarchical structure contained in the template definition items. By using data binding expressions, the control attributes in this level structure can be bound to the data properties associated with this project.
The logical parent -level project as a template is called "container" in the data binding expression. Each container has a attribute called Dataitem, which quotes its associated data. As a result, most of the typical data binding expressions in the template bind the control attributes on a certain property of the container.dataItem. This binding will be further explained in the following examples.
Repeater control
As mentioned earlier, the Repeater control is completely driven by the template, allowing a completely customized representation and layout. The figure below illustrates this function.
Figure 2. Link list of linked project symbols generated using the Repeater control
Excerpted from repeater1.aspx:
<%@page Language = C# SRC = Repeater1.cs Inherits = SAMPLES.Repeter1page%>
Elastic
<ASP: Repeater Runat = Server ID = linkslistrepeater
dataSource = '< %# siteelinks %>'>
<template name = Headertemplate>
<ul type = 1>
</template>
<template name = itemtemplate>
<li>
<ASP: Hyperlink Runat = Server
text = '< %# databinder.eval.eval (container.dataItem, site) %>'
navigateUrl = '< %# DataBinder.eval.eval.dataItem, SITEURL) %>'>
</asp: Hyperlink>
</li>
</template>
<template name = FOOTERTEMPLATE>
</ul>
</template>
</asp: Repeater>
This .ASPX file showed a statement of generating a Repeater control to generate a list of project symbols.
This example illustrates the statement method of setting the data source with data binding syntax (<%#...%>). When you call the DataBind method, the expression in the data binding is executed. In this case, the DataSource property of the Repeater is bound to the sitelinks property on the page, and the latter contains the URL reference to be displayed.
Repeater is the only control that allows HTML fragments to exist in its template. Combining the Repeater control and HTML fragment together will produce a good form of HTML. In this example, the list of project symbols is divided into three parts:
Started by the list of HeadertEMPlate (<ul type = 1>).
End the label (</ul>) by the list represented by FootertEMPlate.
The main body of the list is placed from the list item (<li>) generated by repeating the ItemTemplate in each object in the Sitelinks set.
You can also use these templates to specify the start mark (<TABL>) in the header, the end label (</table>) specifies the table in the footnote, and specify a single watch line in each project (<te>) Essence This replacement option will lead to the list representation.
You must specify ItemTemplate. It is the only necessary template. When other templates are not specified, the control will automatically use this itEMTEMPlate for other templates.
In the following example, ItemTemplate contains a Hyperlink Web control. This control's Text and Navigateurl attributes are bound to data properties associated with each duplicate project. This is completed by using data binding expression (immediately looking for the expression after creating a project).
Repeater1.cs:
namespace Samples {
Elastic
Public Class Repeater1Page: Page {
ProteCted Repeater LinksListrepeater;
Public iCollection siteelinks {
get {
arrayList Sites = New ArrayList ();
Sites.add (New Siteinfo (Microsoft Home,
http://www.microsoft.com);
Sites.add (New Siteinfo (MSDN Home,
http://msdn.microsoft.com);
Sites.add (New Siteinfo (MSN HOMEPAGE,
http://www.msn.com));
Sites.add (New Siteinfo (HOTMAIL,
http://www.hotmail.com));
Return Sites;
}
}
ProteCted Override Void Overoad (EventArgs E) {{
base.onload (e);
if (! Ispostback) {
// When requested the page for the first time, the data binding is performed.
// This will call each control recursively in the control hierarchical structure of this page.
databind ();
}
}
}
public sealed class siteinfo {
Private String site;
Private String siteurl;
public siteinfo (String Sitename, String Siteurl) {{
this.siteName = sitename;
this.siteurl = siteurl;
}
public string site {
get {Return site;}
}
public string siteurl {
geturn siteurl;}
}
}
}
This .cs file contains the code that appears together in the ASPX page in the previous list.
The Repeater1Page class covers the ONLOAD method of the Page class. This indicates that databind is called in the first request of this page. This will cause the data binding expression on these pages to value the data and make the Repeater control list the source of the data and create their projects. Call the DataBind method only when the first request. The reason why this can work is because the Repeater can re -create its project in the return process of preserved status before, without the need for data source instances.
This page reveals the public attributes of the type iCollection. This will be used in the data binding expression of the dataSource attribute value of the Repeater. The acquisition of attributes uses ArrayList containing a set of Siteinfo sequences. This attribute is public, because only pages of public and protection members can be used in data binding expressions.
Each Siteinfo object has two attributes: sitename and siteurl. When the data binding of the Hyperlink control in the template, access these attributes. In the binding expression of this control, Container.DataItem said that it is necessary to bind a specific item to a single siteinfo object on it. DataBinder.eval (Container.DataItem, SiteName) visits the SITENAME property of the current siteinfo object.
Repeater1 example introduces you to several basic concepts:
Definition template
Data binding grammar and data binding expression in the template
Use ArrayList's iCollection as a data source
Call the dataBind method during the initial processing page
DataList control
The DataList control is a template -oriented control that provides the ability to use style attributes to formatting its ability. It can also produce multiple columns. Figure 3 illustrates these two characteristics.
Figure 3. Examples generated from DataList's dual columns
Excerpt from DataList1.aspx:
<%@page Language = C# SRC = DataList1.cs Inherits = SAMPLES.DATALIST1PAGE%>
Elastic
<ASP: DataList runat = server id = peicaldatalist
RepeatColumns = 2 Repeatdirection = Vertical Repeatmode = Table
width = 100%>
<poperty name = AlternatingItemstyle>
<ASP: TableItemstyle Backcolor =#Elyeee/>
</Property>
<template name = itemtemplate>
<ASP: Panel Runat = Server FONT-SIZE = 12PT FONT-BOLD = TRUE>
< %# ((Person) container.dataitem) .name %>
</asp: Panel>
<asp: label runat = server width = 20px
borderStyle = solid borderWidth = 1px BorderColor = BLACK
backColor = '< %# ((Person) container.dataItem). FavoriteColor %>'>
</asp: label>
<asp: label runat = server font-size = 10pt
Text = '< %# getcolorName ((Person) container.dataItem). FavoriteColor) %>'>
</asp: label>
</template>
</asp: datalist>
This .ASPX file showed a statement of DataList used to generate this example.
In this example, the multi -column layout of DataList is achieved by setting the RepeatColumns property to "2". Setting the RepeatDirection as "Vertical" will make the project arrange from top to bottom, and then arranged from left to right. Conversely, the value set to "Horizontal" will cause the project to be arranged from left to right, and then from top to bottom.
The ASPX syntax contains settings for a few DataList style attributes. In this example, DataList's Width is set to 100%of its parent level. The AlternatingItemstyle with a gray background is to obtain a striped appearance. This example also shows that the template can contain any complex control definition to meet the needs of obtaining the ideal layout in each project.
Finally, the data binding expression in this template is binding in the early stage by converting container.dataItem into its type. This will not cause the later binding of the later binding of the later binding of the use of the DataBinder.eval (as shown in Repeater1). However, this method may produce poor readability. The following example also gives an expression example that calls the getColorName method (this method is implemented in a file supported on this page).
datalist1.cs:
namespace Samples {
Elastic
public class datalist1page: page {
Protected DataList peopleDataList;
ProteCted String GetColorName (Color C) {
Return
TypeDescriptor.getConverter (Typeof (color)). ConvertTring (C);
}
Prive Void LoadpeicalList () {
// Create a data source
PERSON [] PeOPLE = New Person [] {
New Person (Nikhil Kothari, Color.green),
New Person (Steve Millet, Color.purple), COLOR.PURPLE),
New Person (Chris Anderson, Color.blue), COLOR.BLUE,
New Person (Mike Pope, Color.orange),
New Person (Anthony Moore, Color.yllow),
New Person (Jon Jung, Color.Mediumaquamarine),
New Person (Susan Warren, Color.slateBlue),
New Person (Izzy Gryko, Color.red)
};
// Set the data source of the control
peicaldatalist.dataSource = pesple;
// And make the control use this data source to build its project
peicaldatalist.dataBind ();
}
ProteCted Override Void Overoad (EventArgs E) {{
base.onload (e);
if (! Ispostback) {
// See this page for the first time
LoadpeicalList ();
}
}
}
public sealed class person {
Private String name;
Prive color favoritecolor;
Public Person (String name, Color FavoriteColor) {{
this.Name = name;
this.favoriteColor = FavoriteColor;
}
Public Color FavoriteColor {
geturn favoritecolor;}
}
public string name {
geturn name;}
}
}
}
On this page, the DataSource attribute of the control is set through program settings, which is settled in the ASPX file. The results of the two methods are the same. What kind of method cannot be selected, you must call the DataBind method so that the control can list its data sources and create items it wants to indicate.
The data source used in this example is a simple array of Person object. Because each array implements the iCollection method, the array is suitable for the data source. This shows the flexibility that can be obtained when the data structure and type can be obtained when the data source can be obtained.
DataList1 example introduces the following concepts:
Define the rich HTML UI in the template
Use simple array as data source
Set the data source through the program
Various expressions allowed in data binding syntax