技术资料 > .Net专区 > Asp.Net开发 : 细细品味ASP.NET (四)

细细品味ASP.NET (四)

March 25,2004

Web控件
　
你可能会担心，象 <asp:TextBox>这样的控件代表了一套需要你熟练运用的全新控件。不过，它们并不难学，因为它们在HTML中都有对应者。例如，对于一个很简单的文本框，在HTML 中，你是这样做的：
<input type=“text” value=“Your Name”></input>
而相应的Web 控件是这样的：
<asp:TextBox Text=“Your Name” runat=“server” />
在这两者中，你立刻就能注意到的是Web 控件通过代码“asp:”名称空间来识别，并且同在XML中一样，使用斜线来结束元素。你不是必须使用XML的格式，你也可以使用HTML格式，用一个分号来结束标记：</asp:TextBox>。但是你会发现，XML格式被用在许多代码举例中，并且代码字数也较简洁。名称空间必须要使用，它负责识别文本框TextBox 控件来自哪里。所有的标准Web控件都是 ASP名称空间的一部分。当编写自己的控件时，这一点变得很重要。
TextBox控件相对于标准的输入框好象没有多少优势，但是你应该考虑一下面的三个输入控件：
<input type=“text” ...>
<input type=“password” ...>
<textarea rows=“5" ...>
它们都是用于HTML输入的，但是并没有一致性。但是如果使用下面的，是不是更简单一些呢？
<asp:TextBox runat=“server” ...>
<asp:TextBox TextBoxMode=“Password” ...>
<asp:TextBox Rows=“5" ...>
你可以看到，一个简单控件包含了HTML中三个控件的功能，而且更易记忆、更易编码。
ASP.NET携带了5大类 Web控件：
• 与HTML相对应的固有控件
• 在页面上提供数据流的列表控件
•提供更丰富的UI（用户界面）内容和功能的Rich控件
• 完成各种表单验证的确认控件
• 为 WAP设备封装WML的移动控件
固有的服务器控件与 HTML控件相同，但是更加合理了，可提供更为一致的用途。这些控件包括LinkButton（链接按钮）、ImageButton（图象按钮）、HyperLink（超级链接）、TextBox（文本框）、CheckBox（复选框）、RadioButton（单选框）、DropDownList（下拉列表）、ListBox（列表框）、Image（图象）、Label（标签）、Panel（面板）、Table（表格）、TableRow（表格行）、TableCell（表格单元）。
列表控件包括Repeater（转发器）、DataList（数据列表）和DataGrid（数据栅格）。列表控件还包括RadioButtonList（单选框列表）和 CheckBoxList（复选框列表），这样就使创建单选框和复选框的列表变得简单。
Rich控件包括Calendar（日历）和AdRotator（广告旋转）。Calendar控件为低级的浏览器输出纯HTML，为高级浏览器输出DHTML（如 Internet Explorer 5.0）。AdRotator输出图象，它有内置的旋转代码。
确认控件包括RequiredFieldValidator（请求域确认）、 Compare Validator（比较确认）、RangeValidator（范围确认）、RegularExpressionValidator（规范表达确认）、CustomValidator（顾客确认）和ValidationSummary（确认摘要）。这些控件为开发人员在表单处理中建立确认提供了简单的途径。
有关移动控件的信息现在还没有发布，但是可以肯定它们有助于构造激活WAP的Web站点。
　
编写新的控件
　
你并不一定只局限于使用这些系统提供的控件，自己编写控件也相当简单。例如，如果想要一个控件来封装两个文本框（可能是名和姓的输入域），就可以这样来编写代码：
<asp:Panel runat=“server”>
<asp:Textbox id=“txtFirstName” text=“First Name” runat=“server” />
<asp:Textbox id=“txtLastName” text=“Last Name” runat=“server” />
</asp:Panel>
可以把这个代码保存在文件 Name.aspc （注意这个新扩展名）中，并将其作为一个Web表单控件来对待。接着，就可以向 Web表单中增加以下内容：
<%@ Register TagName=“NameControl” TagPrefix=“Foo” Src=“Name.aspc” %>
<form>
<foo:NameControl runat=“Server”/>
</form>
这样你就可以很容易地创建可以再利用的控件了。这真实很美好 ;-) 你还可以直接在Visual Basic或 C#中创建控件，允许它们成为其它控件的子类，并且呈现任何它们所要求的输出。因为控件是用名称空间来识别的，因此在控件之间应该是没有冲突的。实际上，控件甚至可以使用同一个名字，只要它们在不同的名称空间中就行。你会感觉到，这使得 ASP.NET非常具有扩展性，并且使编程环境变得越来越丰富。实际上有一个很大的提供丰富控件的第三方市场。
　
数据捆绑控件
　
新的Web控件之一是数据栅格DataGrid，这是用于显示成套数据的内置支持控件。为了从SQL生成的数据中产生一个 HTML表格，你只需要创建 ADO+对象，并执行指令来获取数据以作为栅格的数据源，比如下面的表4代码：
表 4 DaveSGrid1.aspx
<%@ Import Namespace=“System.Data.SQL” %>
<html>
<script language=“VB” runat=“server”>
Sub Page_Load(Sender As Object, E As EventArgs)
Dim myCommand As SQLCommand
myCommand = New SQLCommand(Òselect * from products”,
ÒServer=localhost; Database=AdvWorks; UID=sa”)
DataGrid1.DataSource = myCommand.Execute
DataGrid1.DataBind
End Sub
</script>
<body>
<ASP:DataGrid id=“DataGrid1" runat=“server” />
</body>
</html>
所需要做的就是将数据捆绑到数据栅格，然后就生成了一个整洁的HTML表格： </P><P>
数据捆绑并不局限于来自数据库的数据，你还可以捆绑到hash表格、数组、其它服务器控件、页面的适当层，几乎什么都可以。如果默认的栏目不合适，还可以对其进行定制，让其显示你所感兴趣的部分：
<asp:DataGrid id=“DataGrid1"
AutoGenerateColumns=“false” runat=“server”>
<property name=“Columns”>
<asp:BoundColumn HeaderText=“ Name” DataField=“ProductName”/>
<asp:BoundColumn HeaderText=“Description”
DataField=“ProductDescription”/>
</property>
</asp:DataGrid>
使用 BoundColumn 控件选择一个简单的栏目，并指定栏的标题和这栏要捆绑到哪里。 AutoGenerate=“false” 属性负责确保栅格不会为你创建所有的栏目。如果想更复杂一些，也可以为这个栏目使用一个模板。
此前提到的Repeater和DataList控件也支持模板，这样就允许对控件的外观进行定制。Repeater实际上并没有外观，你必须要提供 UI，这就意味着必须要使用一个模板。相反，DataList控件是一个捆绑到数据的列表，有一个默认的外观和丰富的行为。为这两个控件添加模板的方法是一样的：
<asp:DataList is=“DataList1" runat=“server”>
<template name=“HeaderTemplate”>
Here”s your list of titles<br>
</template>
<template name=“ItemTemplate”>
<%# DataBinder.Eval(Container.DataItem, “Title”) %> <br>
</template>
</asp:DataList>
有了这个模板template，你就可以指定用哪些 HTML控件来组成数据捆绑控件的每一部分。有5个模板的名字可以与 DataList控件一起使用：HeaderTemplate用于控件的最顶端部分，ItemTemplate 用于各个项目，Alternating-Item-Template用于其它项目，SeparatorTemplate用于各个项目之间的区域，FooterTemplate用于控件的底部。
这个系统的好处在于：对于如何显示界面，有大量的控件可以使用。进一步使用产品列表，你就能用表7中的代码来生成下图所示的输出： </P><P>
表 7 DaveSGrid2.aspx
<asp:DataList id=“MyDataList” RepeatColumns=“2" runat=“server”>
<template name=“itemtemplate”>
<table cellpadding=10 style=“font: 10pt verdana”>
<tr>
<td width=1 bgcolor=“BD8672"/>
<td valign=“top”>
<img align=“top”
src=“<%# DataBinder.Eval(Container.DataItem,“ProductImageURL”) %>“ >
</td>
<td valign=“top”>
<b>Name: </b>
<%# DataBinder.Eval(Container.DataItem,”ProductName”) %><br>
<b>Description: </b>
<%# DataBinder.Eval(Container.DataItem,“ProductDescription”) %><br>
<b>Price: </b>
<%# DataBinder.Eval(Container.DataItem,”ProductPrice”, “$ {0}”) %>
</td>
</tr>
</table>
</template>
</asp:DataList>
这个代码相当简单，除了前面显示的 DataList代码外，不再需要更多的东西。代码里有一点值得注意，就是你可以规定出现的栏数，列表会自动处理栏的包装。这样就只需要一点格式化代码，Web页面就得到了极大的改进，而不再使用以前Web 页面上的传统栅格。