::细细品味ASP.NET (四)::-优快云博客

本文介绍了ASP.NET中的Web控件，包括与HTML对应的固有控件、提供数据流的列表控件、增强UI功能的Rich控件、表单验证的确认控件以及为WAP设备设计的移动控件。此外还探讨了自定义控件的编写方法及数据绑定控件的应用。

细细品味ASP.NET (四)

青苹果工作室（编译）

01-5-21 上午 09:50:43

Web控件



你可能会担心，象这样的控件代表了一套需要你熟练运用的全新控件。不过，它们并不难学，因为它们在HTML中都有对应者。例如，对于一个很简单的文本框，在HTML 中，你是这样做的：

而相应的Web 控件是这样的：

在这两者中，你立刻就能注意到的是Web 控件通过代码“asp:”名称空间来识别，并且同在XML中一样，使用斜线来结束元素。你不是必须使用XML的格式，你也可以使用HTML格式，用一个分号来结束标记：。但是你会发现，XML格式被用在许多代码举例中，并且代码字数也较简洁。名称空间必须要使用，它负责识别文本框TextBox 控件来自哪里。所有的标准Web控件都是 ASP名称空间的一部分。当编写自己的控件时，这一点变得很重要。

TextBox控件相对于标准的输入框好象没有多少优势，但是你应该考虑一下面的三个输入控件：

</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>它们都是用于HTML输入的，但是并没有一致性。但是如果使用下面的，是不是更简单一些呢？</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><asp:TextBox runat=“server” ...></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><asp:TextBox TextBoxMode=“Password” ...></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><asp:TextBox Rows=“5" ...></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>你可以看到，一个简单控件包含了HTML中三个控件的功能，而且更易记忆、更易编码。</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>ASP.NET携带了5大类 Web控件：</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>• 与HTML相对应的固有控件</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>• 在页面上提供数据流的列表控件</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>•提供更丰富的UI（用户界面）内容和功能的Rich控件</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>• 完成各种表单验证的确认控件</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>• 为 WAP设备封装WML的移动控件</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>固有的服务器控件与 HTML控件相同，但是更加合理了，可提供更为一致的用途。这些控件包括LinkButton（链接按钮）、ImageButton（图象按钮）、HyperLink（超级链接）、TextBox（文本框）、CheckBox（复选框）、RadioButton（单选框）、DropDownList（下拉列表）、ListBox（列表框）、Image（图象）、Label（标签）、Panel（面板）、Table（表格）、TableRow（表格行）、TableCell（表格单元）。</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>列表控件包括Repeater（转发器）、DataList（数据列表）和DataGrid（数据栅格）。列表控件还包括RadioButtonList（单选框列表）和 CheckBoxList（复选框列表），这样就使创建单选框和复选框的列表变得简单。</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>Rich控件包括Calendar（日历）和AdRotator（广告旋转）。Calendar控件为低级的浏览器输出纯HTML，为高级浏览器输出DHTML（如 Internet Explorer 5.0）。AdRotator输出图象，它有内置的旋转代码。</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>确认控件包括RequiredFieldValidator（请求域确认）、 Compare Validator（比较确认）、RangeValidator（范围确认）、RegularExpressionValidator（规范表达确认）、CustomValidator（顾客确认）和ValidationSummary（确认摘要）。这些控件为开发人员在表单处理中建立确认提供了简单的途径。</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>有关移动控件的信息现在还没有发布，但是可以肯定它们有助于构造激活WAP的Web站点。</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14> </TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><B><FONT size=4>编写新的控件</FONT></B></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14> </TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>你并不一定只局限于使用这些系统提供的控件，自己编写控件也相当简单。例如，如果想要一个控件来封装两个文本框（可能是名和姓的输入域），就可以这样来编写代码：</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><asp:Panel runat=“server”></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><asp:Textbox id=“txtFirstName” text=“First Name” runat=“server” /></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><asp:Textbox id=“txtLastName” text=“Last Name” runat=“server” /></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14></asp:Panel></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>可以把这个代码保存在文件 Name.aspc （注意这个新扩展名）中，并将其作为一个Web表单控件来对待。接着，就可以向 Web表单中增加以下内容：</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><form></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><foo:NameControl runat=“Server”/></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14></form></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>这样你就可以很容易地创建可以再利用的控件了。这真实很美好 ;-) 你还可以直接在Visual Basic或 C#中创建控件，允许它们成为其它控件的子类，并且呈现任何它们所要求的输出。因为控件是用名称空间来识别的，因此在控件之间应该是没有冲突的。实际上，控件甚至可以使用同一个名字，只要它们在不同的名称空间中就行。你会感觉到，这使得 ASP.NET非常具有扩展性，并且使编程环境变得越来越丰富。实际上有一个很大的提供丰富控件的第三方市场。</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14> </TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><B><FONT size=4>数据捆绑控件</FONT></B></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14> </TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>新的Web控件之一是数据栅格DataGrid，这是用于显示成套数据的内置支持控件。为了从SQL生成的数据中产生一个 HTML表格，你只需要创建 ADO+对象，并执行指令来获取数据以作为栅格的数据源，比如下面的表4代码：</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>表 4 DaveSGrid1.aspx</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><html></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><script language=“VB” runat=“server”></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>Sub Page_Load(Sender As Object, E As EventArgs)</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>Dim myCommand As SQLCommand</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>myCommand = New SQLCommand(Òselect * from products”,</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>ÒServer=localhost; Database=AdvWorks; UID=sa”)</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>DataGrid1.DataSource = myCommand.Execute</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>DataGrid1.DataBind</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>End Sub</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14></script></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><body></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><ASP:DataGrid id=“DataGrid1" runat=“server” /></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14></body></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14></html></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>所需要做的就是将数据捆绑到数据栅格，然后就生成了一个整洁的HTML表格：</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><P align=center><SPAN lang=EN-US style="FONT-SIZE: 11pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 10.0pt; mso-fareast-font-family: 宋体; mso-bidi-font-family: 'Times New Roman'; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA"><?XML:NAMESPACE PREFIX = V /><V:SHAPETYPE id=_x0000_t75 coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f"><V:STROKE joinstyle="miter"></V:STROKE><V:FORMULAS><V:F eqn="if lineDrawn pixelLineWidth 0"></V:F><V:F eqn="sum @0 1 0"></V:F><V:F eqn="sum 0 0 @1"></V:F><V:F eqn="prod @2 1 2"></V:F><V:F eqn="prod @3 21600 pixelWidth"></V:F><V:F eqn="prod @3 21600 pixelHeight"></V:F><V:F eqn="sum @0 0 1"></V:F><V:F eqn="prod @6 1 2"></V:F><V:F eqn="prod @7 21600 pixelWidth"></V:F><V:F eqn="sum @8 21600 0"></V:F><V:F eqn="prod @7 21600 pixelHeight"></V:F><V:F eqn="sum @10 21600 0"></V:F></V:FORMULAS><V:PATH o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"></V:PATH><?XML:NAMESPACE PREFIX = O /><O:LOCK v:ext="edit" aspectratio="t"></O:LOCK></V:SHAPETYPE><V:SHAPE id=_x0000_i1025 style="WIDTH: 6in; HEIGHT: 217.5pt" type="#_x0000_t75"><V:IMAGEDATA src="file:///C:/DOCUME~1/XUXIAN~1/LOCALS~1/Temp/msohtml1/01/clip_image001.png" o:title=""></V:IMAGEDATA></V:SHAPE><IMG height=290 src="http://www.ccw.com.cn/htm/app/aprog/01_5_21_2a.jpg" width=576 v:shapes="_x0000_i1025"></SPAN><FONT size=2> </FONT></P></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>数据捆绑并不局限于来自数据库的数据，你还可以捆绑到hash表格、数组、其它服务器控件、页面的适当层，几乎什么都可以。如果默认的栏目不合适，还可以对其进行定制，让其显示你所感兴趣的部分：</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><asp:DataGrid id=“DataGrid1"</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>AutoGenerateColumns=“false” runat=“server”></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><property name=“Columns”></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><asp:BoundColumn HeaderText=“ Name” DataField=“ProductName”/></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><asp:BoundColumn HeaderText=“Description”</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>DataField=“ProductDescription”/></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14></property></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14></asp:DataGrid></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>使用 BoundColumn 控件选择一个简单的栏目，并指定栏的标题和这栏要捆绑到哪里。 AutoGenerate=“false” 属性负责确保栅格不会为你创建所有的栏目。如果想更复杂一些，也可以为这个栏目使用一个模板。</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>此前提到的Repeater和DataList控件也支持模板，这样就允许对控件的外观进行定制。Repeater实际上并没有外观，你必须要提供 UI，这就意味着必须要使用一个模板。相反，DataList控件是一个捆绑到数据的列表，有一个默认的外观和丰富的行为。为这两个控件添加模板的方法是一样的：</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><asp:DataList is=“DataList1" runat=“server”></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><template name=“HeaderTemplate”></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>Here”s your list of titles<br></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14></template></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><template name=“ItemTemplate”></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14> <br></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14></template></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14></asp:DataList></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>有了这个模板template，你就可以指定用哪些 HTML控件来组成数据捆绑控件的每一部分。有5个模板的名字可以与 DataList控件一起使用：HeaderTemplate用于控件的最顶端部分，ItemTemplate 用于各个项目，Alternating-Item-Template用于其它项目，SeparatorTemplate用于各个项目之间的区域，FooterTemplate用于控件的底部。</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>这个系统的好处在于：对于如何显示界面，有大量的控件可以使用。进一步使用产品列表，你就能用表7中的代码来生成下图所示的输出：</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><P align=center><SPAN lang=EN-US style="FONT-SIZE: 11pt; COLOR: black; FONT-FAMILY: Arial; mso-bidi-font-size: 10.0pt; mso-fareast-font-family: 宋体; mso-bidi-font-family: 'Times New Roman'; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA"><V:SHAPETYPE id=_x0000_t75 coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f"><V:STROKE joinstyle="miter"></V:STROKE><V:FORMULAS><V:F eqn="if lineDrawn pixelLineWidth 0"></V:F><V:F eqn="sum @0 1 0"></V:F><V:F eqn="sum 0 0 @1"></V:F><V:F eqn="prod @2 1 2"></V:F><V:F eqn="prod @3 21600 pixelWidth"></V:F><V:F eqn="prod @3 21600 pixelHeight"></V:F><V:F eqn="sum @0 0 1"></V:F><V:F eqn="prod @6 1 2"></V:F><V:F eqn="prod @7 21600 pixelWidth"></V:F><V:F eqn="sum @8 21600 0"></V:F><V:F eqn="prod @7 21600 pixelHeight"></V:F><V:F eqn="sum @10 21600 0"></V:F></V:FORMULAS><V:PATH o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"></V:PATH><O:LOCK v:ext="edit" aspectratio="t"></O:LOCK></V:SHAPETYPE><V:SHAPE id=_x0000_i1025 style="WIDTH: 375.75pt; HEIGHT: 211.5pt" type="#_x0000_t75"><V:IMAGEDATA src="file:///C:/DOCUME~1/XUXIAN~1/LOCALS~1/Temp/msohtml1/01/clip_image001.png" o:title=""></V:IMAGEDATA></V:SHAPE><IMG height=282 src="http://www.ccw.com.cn/htm/app/aprog/01_5_21_2b.jpg" width=501 v:shapes="_x0000_i1025"></SPAN><FONT size=2> </FONT></P></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>表 7 DaveSGrid2.aspx</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><asp:DataList id=“MyDataList” RepeatColumns=“2" runat=“server”></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><template name=“itemtemplate”></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><table cellpadding=10 style=“font: 10pt verdana”></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><tr></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><td width=1 bgcolor=“BD8672"/></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><td valign=“top”></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><img align=“top”</TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>src=““ ></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14></td></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><td valign=“top”></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><b>Name: </b></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><br></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><b>Description: </b></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><br></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14><b>Price: </b></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14></td></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14></tr></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14></table></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14></template></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14></asp:DataList></TD></TR></TBODY></TABLE><TABLE width=620 align=center><TBODY><TR><TD class=a14>这个代码相当简单，除了前面显示的 DataList代码外，不再需要更多的东西。代码里有一点值得注意，就是你可以规定出现的栏数，列表会自动处理栏的包装。这样就只需要一点格式化代码，Web页面就得到了极大的改进，而不再使用以前Web 页面上的传统栅格。</TD></TR></TBODY></TABLE><br><br><p id="TBPingURL">Trackback: http://tb.blog.youkuaiyun.com/TrackBack.aspx?PostId=5697</p>		<br>	</div>