<%Reponse.Write ("Hello World")%> |
<input type="text" runat="server" id="textBox1" value="some text"> |
控件 | 对应的标记 |
HtmlAnchor | <a> |
HtmlButton | <button> |
HtmlSelect | <select> |
HtmlTextArea | <textarea> |
HtmlInputButton | <input type="button"> |
HtmlInputCheckBox | <input type="check"> |
HtmlInputRadioButton | <input type="radio"> |
HtmlInputText | <input type="text"> 和 <input type="password"> |
HtmlInputHidden | <input type="hidden"> |
HtmlInputImage | <input type="image"> |
HtmlInputFile | <input type="file"> |
HtmlForm | <form> |
HtmlImage | |
HtmlTable | <table> |
HtmlTableRow | <tr> |
HtmlTableCell | <td> |
HtmlGenericControl | 任何其它没有对应控件的标记,如 <span>、<div> 等 |
对于现有的ASP程序,如果向ASP.net移植,毫无疑问HTML控件将发挥最大的作用。
2.4 Web 控件
ASP.net 框架中的第二组服务器控件称为 Web 控件。这些控件位于 System.Web.UI.WebControls 命名空间中,是从 WebControl 基类中直接或间接派生出来的。图 2 说明了 Web 控件的类层次结构。
Web 控件中包括传统的表单控件,如 TextBox 和 Button ,以及其它更高抽象级别的控件,如 Calendar 和 DataGrid 控件。它们提供了一些能够简化开发工作的特性,其中包括:
丰富而一致的对象模型:WebControl 基类实现了对所有控件通用的大量属性,这些属性包括 ForeColor、BackColor、Font、Enabled 等。属性和方法的名称是经过精心挑选的,以提高在整个框架和该组控件中的一致性。通过这些组件实现的具有明确类型的对象模型将有助于减少编程错误。
对浏览器的自动检测:Web 控件能够自动检测客户机浏览器的功能,并相应地调整它们所提交的 HTML,从而充分发挥浏览器的功能。
数据绑定:在 Web 窗体页面中,可以对控件的任何属性进行数据绑定。此外,还有几种 Web 控件可以用来提交数据源的内容。
在 HTML 标记中,Web 控件会表示为具有命名空间的标记,即带有前缀的标记。前缀用于将标记映射到运行时组件的命名空间。标记的其余部分是运行时类自身的名称。与 HTML 控件相似,这些标记也必须包含 runat="server" 属性。下面是一个声明的示例:
<asp:TextBox id="textBox1" runat="server" Text="基督山伯爵"> </asp:TextBox> |
<asp:Label runat="server" Text="Label1" Font-Italic="true"> </asp:Label> |
<asp:TextBox runat="server" Text="TextBox1"></asp:TextBox> |
<asp:TextBox runat="server" Mode="Multiline" Rows="3"> TextBox1 </asp:TextBox> |
<asp:TextBox runat="server" Mode="Password"></asp:TextBox> |
<asp:CheckBox runat="server" Text="CheckBox1" Checked="True"> </asp:CheckBox> |
<asp:RadioButton runat="server" Text="RadioButton1" GroupName="Group1" Checked="true"> </asp:RadioButton> <asp:RadioButton runat="server" Text="RadioButton2" GroupName="Group1"></asp:RadioButton> |
图像显示
Image 控件能够在页面上显示图像:
<asp:Image runat="server" ImageUrl="net.gif"></asp:Image> |
版面控件
Panel 控件常用作简单的组合控件以及动态创建的控件的容器。(请注意,Panel 控件通常不具有可见的外观。)
<asp:Panel runat="server"></asp:Panel> |
Table 控件与相关的 TableRow 和 TableCell 控件相结合,可以用来以编程的方法创建表或表式版面布局:
<asp:Table runat="server" GridLines="Both" BorderWidth="1px"> <asp:TableRow> <asp:TableCell>[0,0]</asp:TableCell> <asp:TableCell>[0,1]</asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell>[1,0]</asp:TableCell> <asp:TableCell>[1,1]</asp:TableCell> </asp:TableRow> </asp:Table> |
日期选择
Calendar 控件能够让用户浏览日期并进行日期选择(包括选择日期范围):
<asp:Calendar runat=server DayNameFormat="FirstLetter" ...> <property name=SelectedDayStyle> <asp:TableItemStyle Font-Bold="True" BackColor="#CCCCFF"/> </property> ... </asp:Calendar> |
列表绑定控件
列表绑定控件用于显示与其相关联的数据源或列表的内容。它们提供了创建多种自定义及标准版式的能力。关于数据邦定,我们会用一个章节的内容来完整的说它。
Repeater 控件是一个简单的列表绑定控件,它使用模板(即用于设定版式的 HTML 代码片断)来以一种"朴实无华"的,即没有预定义外观的方式显示数据源的内容:
<asp:Repeater runat="server"> <template name="HeaderTemplate"> <ol> </template> <template name="ItemTemplate"> <li> <a runat="server" href='<%"SiteURL") %>'> <%"SiteName") %> </a> </li> </template> <template name="FooterTemplate"> </ol> </template> </asp:Repeater> |
DataList 控件也使用模板来显示与之绑定的数据源的内容。此外,它还提供了自定义外观格式和布局的功能:
<asp:DataList runat="server"> <template name="ItemTemplate"> <%"PersonName") %> ... </template> ... </asp:DataList> |
DataGrid 控件能够创建格式丰富的列表版式,用来显示与之绑定的数据源的内容。它提供了对排序、编辑和分页的支持。
<asp:DataGrid runat="server" ...> <property name="Columns"> <asp:BoundColumn HeaderText="ID" ../> ... </property> ... </asp:DataGrid> |
<asp:AdRotator runat="server" AdvertisementFile="AdsList.xml"> </asp:AdRotator> |
2.5 HTML 控件,WEB控件,都可以产生一样的效果,到底谁优谁劣?
在开发这些控件时,我们反复地问自己,是否真的有必要同时提供具有一些重复功能的 HTML 控件组和 Web 控件组。您肯定也想了解 HTML 控件和 Web 控件究竟有什么异同,以及它们各自适用的场合。
这两组控件的异同可以通过以下方面来比较。
控件抽象
HTML 控件不具备任何抽象能力。每种控件与 HTML 标记都是一一对应的(请参见表 1)。
Web 控件创建了更高级别的抽象,它们没有任何对应的 HTML 标记(如 Calendar 和 DataGrid)。因为它们不直接映射为 HTML 标记,所以 Web 控件还能够在适当的场合起到合并功能的作用(例如用一个 TextBox 控件来代替多个标记)。这种抽象为使用第三方提供的种类丰富的控件工具箱打开了方便之门。
对象模型
HTML 控件提供了以 HTML 为中心的对象模型。每种控件都包括一个属性集,可以使用该属性集来控制标记的属性。这个属性集使用了字符串名/值对,并且不是强类型的。
在使用 HTML 控件时,您的编程方式与使用传统的 ASP 进行编程十分类似。因而,HTML 控件提供了一条快捷的移植途径 - 可以通过添加一个 runat="server" 属性来将一个标记转变为一个服务器控件。
Web 控件提供了基于表单的、类似于 Visual Basic 的编程模式。它们也提供了属性集,但它们的主要目标在于提供一种格式丰富、类型安全且具有一致性的对象模型。每种 Web 控件都包含一组标准的属性,如 ForeColor、BackColor、Font 等。
这种对象模型还在像 Visual Studio .NET 这样的设计工具中提供了更丰富的设计时体验。
目标浏览器
HTML 控件不会自动检测请求页面的浏览器的能力,也不会修改它们提供的 HTML。在使用这组控件时,您要负责确保您的页面能同时在高级和低级浏览器上工作。
Web 控件能够自动对它们生成的结果进行调整,以确保输出结果在高级浏览器和低级浏览器上的工作同样出色。Web 控件还能够针对不同的浏览器提供不同的行为,从而充分发挥浏览器的潜力。例如,validation 控件还可以通过客户端的脚本来创建用于高级浏览器的具有高度交互性的页面。
对生成的 HTML 的控制
HTML 控件允许您完全控制所显示的内容以及发送到客户机浏览器的内容。
Web 控件提供了更为丰富的对象模型,以及适应多种浏览器的能力。因而,它们没有提供对输出结果的相同程度的控制能力。
在您开发 Web 应用程序时,您可以根据这两组控件的能力以及您的需求来从中进行选择。您还可以选择在同一页上混合使用这两组控件,使用一种类型的控件并不妨碍您同时使用另一种类型的控件。
2.6 修饰和打扮你的控件
<span style="font: 12pt verdana; color:orange;font-weight:700" runat="server"> This is some literal text inside a styled span control </span> |
<button style="font: 8pt verdana;background-color:lightgreen;border-color:black;width:100" runat="server">Click me!</button> |
<input type="text" value="One, Two, Three" style="font: 14pt verdana;background-color:yellow;border-style:dashed;border-color:red;width:300;" runat="server"/> |
<form runat="server"> <ASP:Calendar runat="server" BackColor="Beige" ForeColor="Brown" BorderWidth="3" BorderStyle="Solid" BorderColor="Black" Height="450" Width="450" Font-Size="12pt" Font-Name="Tahoma,Arial" Font-Underline="false" CellSpacing=2 CellPadding=2 ShowGridLines=true /> </form> |
<ASP:Calendar CssClass="calstyle" runat="server" BackColor="Beige" ForeColor="Brown" BorderWidth="3" BorderStyle="Solid" BorderColor="Black" Height="450" Width="450" Font-Size="12pt" Font-Name="Tahoma,Arial" Font-Underline="false" CellSpacing=2 CellPadding=2 ShowGridLines=true TitleStyle-BorderColor="darkolivegreen" TitleStyle-BorderWidth="3" TitleStyle-BackColor="olivedrab" TitleStyle-Height="50px" DayHeaderStyle-BorderColor="darkolivegreen" DayHeaderStyle-BorderWidth="3" DayHeaderStyle-BackColor="olivedrab" DayHeaderStyle-ForeColor="black" DayHeaderStyle-Height="20px" DayStyle-Width="50px" DayStyle-Height="50px" TodayDayStyle-BorderWidth="3" WeekEndDayStyle-BackColor="palegoldenrod" WeekEndDayStyle-Width="50px" WeekEndDayStyle-Height="50px" SelectedDayStyle-BorderColor="firebrick" SelectedDayStyle-BorderWidth="3" OtherMonthDayStyle-Width="50px" OtherMonthDayStyle-Height="50px" /> |