第二章
ASP.NET2.0 服务器控件
课程目标
q ASP.NET服务器控件种类
q 各ASP.NET服务器控件特性
q ASP.NET服务器控件内容绑定
体验项目——<通讯录管理 >
程序实现的功能:
(1)在通讯录中添加人员的信息,如记录人员的名字、性别、电话、分组、照片的。
(2)在通讯录左侧列出所有人员的姓名,当点击姓名时,可以获得相关人员的详细信息。
(3)选择个人信息后,才能对其信息进行修改和删除。
(4)通过“Reset”按钮可以取消修改和删除的状态,进入增加记录状态。
2.1什么是服务器控件
q服务器控件就是页面上能够被服务器端代码访问和操作的任何控件。
q所有的服务器控件都有一个id属性和runat=“server”的标记,id属性是服务器端代码访问和操作该控件的惟一标识。
qASP.NET服务器控件都是页面上的对象,采用事件驱动的编程模型,客户端触发的事件可以在服务器端来处理。
服务器控件示例2-1
四个服务器控件:<form runat=server>、<asp:textbox runat=server>、 <asp:dropdownlist runat=server>和<asp:button runat=server>
服务器控件示例2-2
<%@ Page Language="C#" AutoEventWireup="true" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div>名字:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
类别:<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>干部</asp:ListItem>
<asp:ListItem>工人</asp:ListItem>
<asp:ListItem>农民</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="提交" />
</div>
</form>
</body>
</html>
2.1 ASP.NET 2.0服务器控件的种类
q ASP.NET 2.0服务器控件分:
Ø HTML服务器控件
Ø Web服务器控件
q HTML服务器控件就是将普通HTML元素加上id属性和runat=“server”属性之后的控件,这样服务器端就可以访问和操作该控件了。HTML服务器控件对应一个HTML元素。
q Web服务器控件是包装了复杂功能的控件,生成的HTML代码较为复杂,功能也比HTML服务器控件复杂的多。
2.2.1 HTML服务器控件
HTML服务器控件提供以下功能:
(1)可在服务器上使用熟悉的面向对象的技术对其进行编程的对象模型。每个服务器控件都公开一些属性(Property),开发人员可以使用这些属性(Property)在服务器代码中以编程方式来操作该控件的标记属性(Attribute)。
(2)提供一组事件,开发人员可以为其编写事件处理程序,方法与在基于客户端的窗体中大致相同,所不同的是事件处理是在服务器代码中完成的。
(3)在客户端脚本中处理事件的能力。
(4)自动维护控件状态。在页到服务器的往返行程中,将自动对用户在HTML服务器控件中输入的值进行维护并发送回浏览器。
(5)与ASP.NET验证控件进行交互,因此开发人员可以验证用户是否已在控件中输入了适当的信息。
(6)数据绑定到一个或多个控件属性。
(7)支持样式(如果在支持级联样式表的浏览器中显示ASP.NET网页)。
(8)直接可用的自定义属性。开发人员可以向HTML服务器控件添加所需的任何属性,页框架将呈现这些属性而不会更改其任何功能。这允许开发人员向控件添加浏览器特定属性。
HTML服务器控件列表2-1
HTML服务器控件列表2-2
HTML服务器控件示例
<%@ Page Language="C#" AutoEventWireup="true" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
message.InnerHtml = userName.Value;
}
protected void Submit1_Click(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
span1.InnerText = "请输入用户名:";
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>HTML控件示例</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<span id="span1" runat="server"></span>
<input id="userName" runat="server" type="text" />
<input id="Submit1" runat="server" type="submit" value="提交"
onclick="return confirm('你确定吗?');" onserverclick="Submit1_Click" /><br />
<div id="message" runat="server" style="width: 162px; height: 29px;
color: red;">
</div>
</div>
</form>
</body>
</html>
HTML服务器控件事件说明
值得注意:
HtmlInputButton控件可以执行服务器端的Click事件是onserverclick事件。默认的onclick事件是客户端事件(Web服务器控件正好相反,onclick事件是服务器事件,要执行客户端事件要注明是OnClientClick)。
页面添加HTML服务器控件
添加HTML服务器控件:
(1)在设计视图下从工具箱中的“HTML”面板中拖入或者在源代码视图键入要用作控件的元素的HTML语法。包含该元素的常规HTML语法。
(2)将该控件的ID属性设置为对于该页唯一的值,除非控件是复杂控件的组成部分并且将重复出现(如在Repeater、DataList和GridView控件中)。
(3)设置runat="server"属性以将元素转换为控件。
2.2.2 Web服务器控件
q HTML控件虽然比HTML标记进步了不少,但它显然只是一个过渡产品,因为它一般只提供属性的读取和修改,不具备“方法调用”和“事件驱动”的能力,也就是说不具备完全的面向对象的特性,这显然不符合ASP.NET的发展要求。
q ASP.NET还提供了另一类服务器控件,即Web控件,每一个Web控件,都是一个对象,有自己的属性、方法和事件,与 VB或 VC中使用的控件极为类似。
Web 控件
q Web 控件和HTML 控件不一样,HTML 控件是将HTML 标注对象化,让我们的程序代码比较好控制以及管理这些控件;不过基本上它还是转成相对应的HTML 标注。
q 而Web 控件的功能比较强,它会依Client 端的状况产生一个或多个适当的HTML 控件,它可以自动侦测Client端浏览器的种类,并自动调整成适合浏览器的输出。
q Web 控件还拥有一个非常重要的功能,那就是支持数据捆绑(Data Binding);可以和资料源连结,用来显示或修改数据源的数据。
WEB服务器控件的基本格式2-1
使用Web 控件,只要在标记中加上ASP:,并指定Web 控件的类别名称即可。
如:
<ASP:Label Id="Label1" Text="这是一个Label 类别的Web 控件"
Runat="Server" />
WEB服务器控件的基本格式2-2
<asp:ControlType
Id=“idname”
attribute1=value1
attribute2=value2
…..
attributeN=valueN
runat=“server”>
</asp:ControlType>
1.WEB服务器控件的属性4-1
控件的基础属性
基础属性就是所有的Web 控件共同都有的属性。
1.WEB服务器控件的属性4-2
q AccessKey属性:用来为控件指定键盘的快速键,这个属性的内容为数字或是英文字母。例如设置为“A”,那么使用时用户按下Alt+A组合键就会制动将焦点移动到这个控件的上面。只有Internet Explorer 4.0或者更高的版本才支持这个特性。
q Backcolor属性用于设置对象的背景色,其属性的设定值为颜色名称或是#RRGGBB 的格式。
q 边框属性包括有BorderWidth、BorderColor、BorderStyle等几个属性。其中,BorderWidth属性可以用设定Web控件的边框宽度,单位是像素计算。
q Enabled属性用于设置禁止控件还是使能控件。当该属性值为False时,控件为禁止状态。当该属性值为True时控件为使能状态,对于有输入焦点的控件,用户可以对控件执行一定的操作
WEB服务器控件的属性4-3
q Font属性有以下几个子属性,分别表现不同的字体特性:Font-Bold:如果属性值设定为True,则会变成粗体显示。Font-Italic:如果属性值设定为True,则会变成斜体显示。Font-Names:设置字体的名字。 Font-Size:设置字体大小,共有九种大小可供选择Smaller、Larger、XX-Small、X-Small、Small、Medium、Large、X-Large或者XX-Large。Font-Strikeout:如果属性值设定为True,则文字中间显示一条删除线。Font-Underline:如果属性值设定为True,则文字下面显示一条底线。
q TabIndex属性用来设置Tab按钮的顺序。当用户使用者按下Tab键时,输入焦点将从当前控件跳转到下一个可以获得焦点的控件,TabIndex键就是用于定义这种跳转顺序的。合理的使用TabIndex属性,可以使用户使用程序时更加轻松,使得程序更加人性化。
WEB服务器控件的属性4-4
q ToolTip属性用于设置控件的提示信息。在设置了该属性值后,当鼠标停留在Web 控件上一小段时间后就会出现ToolTip属性中设置的文字。
q Visible 属性决定了控件是否会被显示,如果属性值为true将显示该控件,否则将隐藏该控件。
q Height和Width属性分别用于设置控件的高度和宽度,单位是pixel(像素)。
WEB服务器控件分类
Web服务器控件的种类也很多,按照功能可以分为:
q标准服务器控件(本章主要讲解)
q验证控件
q数据控件
q导航控件
q登录控件
qWeb部件
q自定义控件
2. Label 服务器控件
qLabel Web服务器控件为开发人员提供了一种以编程方式(动态)显示ASP.NET网页中文本的方法。
q使用说明:如果要显示静态文本,可以使用HTML标记呈现它;不需要使用Label控件。仅当需要在服务器代码中更改文本的内容或其他特性时,才使用Label控件。
Label控件的常用用法
<asp:Label
id=“控件名称"
Text=“显示文本"
Font-Name=“宋体”
Font-Size="10.5pt"
Width="200px“
BorderStyle="solid“
BorderColor="#cccccc"
runat="server"/>
3.TextBox Web 服务器控件
TextBox Web服务器控件为用户提供了一种向页面中键入信息(包括文本、数字和日期)的输入框。
根据TextMode属性设置的不同,将会生成:
Ø 普通单行文本输入框(SingleLine)
Ø 密码输入框(Password)
Ø 多行输入框(MultiLine)
TextBox 的属性和事件
使用文本输入控件
4.控制权转移控件
Button 控件 –显示标准 HTML 窗体按钮
ImageButton 控件 - 显示图像窗体按钮
LinkButton 控件 - 在按钮上显示超文本链接
Hyperlink 控件 - 在某些文本上显示超文本链接
Button 的属性和事件
ImageButton 的属性和事件
LinkButton 的属性和事件
超链接属性
使用控制权转移控件
使用控制权转移控件
提交其他页面进行处理
qPostBackUrl属性将页面提交到指定的页面,接受页面使用PreviousPage对象来执行对源页面的引用。
例:<asp:Button ID="Button2" runat="server"
PostBackUrl="~/MyServerControl/Button2Demo.aspx" Text="提交下一页" /><br />
接受页获得数值代码:
Label1.Text = ((Label)PreviousPage.FindControl("Label1")).Text;
Label1.Text += ((TextBox)PreviousPage.FindControl("TextBox1")).Text;
向Button控件添加客户端脚本
因为Button控件是提交表单按钮,经常要调用客户端脚本事件,那下面就具体说明向Button Web 服务器控件添加客户端脚本事件。主要有一下几种方式:
(1)以声明方式向 Button服务器控件添加客户端事件处理程序
(2)以编程方式向Button 控件添加客户端事件处理程序
(3)向Button按钮控件添加客户端Onclick事件
以声明方式向 Button服务器控件添加客户端事件
<script type="text/javascript">
var previousColor;
function ChangeIsRed()
{
previousColor = window.event.srcElement.style.color;
window.event.srcElement.style.color = "#FF0000";
}
function RestoreColor()
{
window.event.srcElement.style.color = previousColor;
}
</script>
……
<asp:Button ID="Button1" runat="server"
Text="注意鼠标移动的编号哦"
onmouseover="ChangeIsRed();"
onmouseout="RestoreColor();"/>
以编程方式向Button 控件添加客户端事件处理程序
protected void Page_Load(object sender, EventArgs e)
{
Button1.Attributes.Add("onmouseover","ChangeIsRed();");
Button1.Attributes.Add("onmouseout","RestoreColor();");
}
Button 控件客户端click事件和服务器click
q 服务器端click
protected void Button1_Click(object sender, EventArgs e)
{
}
q 客户端click
<asp:Button ID="Button1" runat="server" Text="Button" OnclientClick="check('TextBox2')" onmouseover="check('TextBox2')" OnClick="Button1_Click" />
5.HyperLink
q HyperLink服务器控件,提供一个页面中的超连接
<asp:HyperLink ID=“控件标识” runat=“server” Text=“文本“ border='0'>">
</asp:HyperLink>
l HyperLink控件没有click事件
l HyperLink控件必须添加navigateurl属性后才曾现为超连接形式。
l HyperLink控件的text属性可以输入文本也可以书写为标记:比如<img>;
l HyperLink控件imageUrl属性定义一个图片链接;
5.HyperLink 控制图片大小2-1
在HyperLink服务器控件中,无法通过设置控件的Width和Height属性来控制ImageUrl中图片的大小,要控制图片的大小,还需要以下几个方法来实现。替代办法主要有以下几种:
l 将图片写在Text属性中
<asp:HyperLink ID="HyperLink2" runat="server" Text="<img src='images/banner1.jpg' width='200' border='0'>">
</asp:HyperLink>
l 使用Image服务器控件
<asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="http://www.tsinghuait.net.cn" Target="_blank">
<asp:Image ID="Image1" runat="server" Height="37px"
ImageUrl="~/images/banner1.jpg" Width="224px" />
</asp:HyperLink>
l 编程在呈现事件中进行修改
HyperLink 控制图片大小2-2
……
protected void HyperLink1_PreRender(object sender, EventArgs e)
{
Image img = new Image();
img.Width = HyperLink1.Width;
img.Height = HyperLink1.Height;
img.ImageUrl = HyperLink1.ImageUrl;
img.Attributes.Add("border", "0");
HyperLink1.Controls.AddAt(0, img);
HyperLink1.ImageUrl = System.String.Empty;
}
……
<asp:HyperLink ID="HyperLink1" runat="server“ ImageUrl="~/images/banner1.jpg" NavigateUrl="http://www.tsinghuait.net.cn" Target="_blank" ToolTip="清华大学IT培训" Height="36px" Width="224px" OnPreRender="HyperLink1_PreRender"></asp:HyperLink>
……
HyperLink 控制图片大小2-2
q Hyperlink就是提供一个服务器端可控制的超链接;
q 如果不需要服务器端的控制,可以直接使用超链接标记<a></a>
DropdownList 属性
DropdownList 事件
ListBox:属性和事件
DropDownList和ListBox服务器控件项增加列表的方式
(1)在设计时添加静态项
通过“编辑项”或者Items属性来添加列表项,并且可以设置每一个列表项的Text、Value、Selected、Enabled属性。
例: <asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Value="student">学生</asp:ListItem>
<asp:ListItem Value="employee">职员</asp:ListItem>
<asp:ListItem Value="official" Selected="True">公务员</asp:ListItem>
<asp:ListItem Value="other">其他</asp:ListItem>
</asp:DropDownList>
(2)以编程方式添加项
Ø 创建ListItem类型的新对象,设置其Text属性和Value属性。
Ø 调用控件的Items集合的Add方法,并将新对象传递给它。
例:if (!Page.IsPostBack) //判断是否是首次建立页面
{
ListBox1.Items.Add(new ListItem("C语言程序设计","S1-001"));
ListBox1.Items.Add(new ListItem("SQLServer数据库", "S1-002"));
ListBox1.Items.Add(new ListItem("C#编程语言", "S1-003"));
ListBox1.Items.Add(new ListItem("JAVA用户界面设计", "S2-001"));
ListBox1.Items.Add(new ListItem("XML编程", "S3-005"));
}
(3)从数据源填充列表控件
Ø 通过设置数据源向导
例:<asp:DropDownList ID="DropDownList2" runat="server"
DataSourceID="SqlDataSource1"
DataTextField="job_desc" DataValueField="job_id" AppendDataBoundItems="true">
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ConnectionStrings:pubsConnectionString %>"
SelectCommand="SELECT [job_id], [job_desc] FROM [jobs] "
+"ORDER BY [job_id], [job_desc] DESC">
</asp:SqlDataSource>
Ø 开发人员可以编写代码,绑定到数据源上。
例:
try{
SqlConnection conn = new SqlConnection();
conn.ConnectionString =
ConfigurationManager.ConnectionStrings[
"pubsConnectionString"].ConnectionString;
SqlCommand cmd = new SqlCommand("SELECT [job_id], [job_desc] FROM"
+"[jobs] ORDER BY [job_id], [job_desc] DESC", conn);
conn.Open();
SqlDataReader reader = cmd.ExecuteReader(
CommandBehavior.CloseConnection);
ListBox2.DataSource = reader;
ListBox2.DataTextField = "job_desc";
ListBox2.DataValueField = "job_id";
ListBox2.DataBind();
reader.Close();
}catch (Exception ex){
Response.Write(ex.ToString());
}
获取及设置数值
CheckBox和CheckBoxList Web服务器控件
q两种控件都为用户提供了一种输入布尔型数据(真或假、是或否)的方法。
qCheckBox服务器控件用来在页面上创建单个复选框 。
qCheckBoxList可以生成一组复选框,特别是数据来自与数据库应用此控件更加方便。
qCheckBoxList工作方式与ListBox、DropDownList、RadioButtonList和BulletedList Web服务器控件非常相似。
CheckBoxList数据绑定示例
protected void Page_Load(object sender, EventArgs e)
{ //设置控件HTML属性
CheckBox1.InputAttributes.Add("onmouseover","this.style.backgroundColor = 'red'");
CheckBox1.InputAttributes.Add("onmouseout","this.style.backgroundColor = 'white'");
CheckBox1.LabelAttributes.Add("onmouseover", "this.style.color='blue'");
CheckBox1.LabelAttributes.Add("onmouseout", "this.style.color='black'");
if (!Page.IsPostBack)
{ //数据绑定
ArrayList courses = new ArrayList();
courses.Add("Java面向对象语言");
courses.Add("Java用户界面设计");
courses.Add("JSP/Servlet编程");
courses.Add("SQLServer数据库编程");
courses.Add("数据结构");
CheckBoxList1.RepeatDirection =
RepeatDirection.Horizontal;
CheckBoxList1.DataSource = courses;
CheckBoxList1.DataBind();
}
}
8.RadioButton和RadioButtonList 服务器控件
q这两种控件都允许用户从一小组互相排斥的预定义选项中进行选择。
q这些控件允许开发人员定义任意数目带标签的单选按钮,并将它们水平或垂直排列。
q RadioButton控件通常是将两个或多个单独的按钮组合在一起,并通过设置GroupName进行分组。
qRadioButtonList控件不允许开发人员在按钮之间插入文本,但如果想将按钮绑定到数据源,使用这类控件要方便得多。
8. RadioButtonList数据绑定示例
ICollection CreateDataSource(){
DataTable dt = new DataTable();
DataRow dr;
dt.Columns.Add(new DataColumn("FavID", typeof(Int32)));
dt.Columns.Add(new DataColumn("FavTitle", typeof(string)));
string[ ] Fruits = { "苹果", "香蕉", "草莓", "芒果", "荔枝", "猕猴桃", "西瓜", "梨", "柿子", "枣" };
for (int i = 0; i < 9; i++){
dr = dt.NewRow();
dr[0] = i;
dr[1] = Fruits[i];
dt.Rows.Add(dr);
}
DataView dv = new DataView(dt);
return dv;
}
protected void Page_Load(object sender, EventArgs e)
{
RadioButton1.LabelAttributes.Add("style", "color:red");
RadioButton1.InputAttributes.Add("style", "background-color:read");
if (!IsPostBack)
{
RadioButtonList1.DataSource = CreateDataSource();
RadioButtonList1.DataTextField = "FavTitle";
RadioButtonList1.DataValueField = "FavID";
RadioButtonList1.DataBind();
RadioButtonList1.Items.FindByText("西瓜").Selected = true;
}
}
9. Image 服务器控件
q用来在客户端生成img元素,以显示图像。
q可以在设计时或运行时以编程方式为Image对象指定图形文件。
q将控件的ImageUrl属性绑定到一个数据源,以根据数据库信息显示图形。
q与大多数其他Web服务器控件不同,Image控件不支持任何事件。
9. ImageMap Web服务器控件
qImageMap服务器控件是在页面上创建显示图像的控件。该图像包含许多用户可以单击的区域,这些区域称为作用点。单击在ImageMap控件内定义的作用点区域时,该控件生成到服务器的回发或导航到指定的URL。
qImageMap控件主要由两个部分组成:
Ø第一个是图像,它可是任何标准Web图形格式的图形,如.gif、.jpg或.png文件。
Ø第二个元素是作用点控件的集合。
ImageMap示例-1
<asp:imagemap id="Buttons" imageurl="~/images/hotspot.jpg"
alternatetext="Navigate buttons Example" runat="Server">
<asp:RectangleHotSpot hotspotmode="Navigate"
NavigateUrl="http://www.tsinghua.edu.cn"
Target="_blank"
alternatetext="清华大学"
top="30"
left="175"
bottom="110"
right="355">
</asp:RectangleHotSpot>
<asp:RectangleHotSpot hotspotmode="Navigate"
NavigateUrl="http://www.tsinghuait.net.cn"
alternatetext="清华IT学习认证中心"
top="155"
left="175"
bottom="240"
right="355">
</asp:RectangleHotSpot>
</asp:imagemap>
ImageMap示例-2
下面示例点击对于作用点区域后提交服务器回发,在ImageMap的Clicked事件中通过不同作用点对应的PostBackValue值来区分作用来,示例如下。
ImageMap示例-2
下面示例点击对于作用点区域后提交服务器回发,在ImageMap的Clicked事件中通过不同作用点对应的PostBackValue值来区分作用来,示例如下。
11.Table Web服务器控件
qTable服务器控件用来在页面上生成表格。Table控件允许开发人员生成HTML表并以直接方式指定其属性。可以用给定的静态内容在设计时生成表,但Table Web服务器控件的威力通常在用动态内容以编程方式生成表时才会体现出来。
qTable表中的行将作为TableRow 服务器控件创建,而每行中的单元格则作为TableCell 服务器控件来实现。
q当开发人员希望在运行时通过代码向表中添加行和单元格(列)时,可以使用Table Web 服务器控件。
Table Web服务器控件示例
以下示例动态生成表,在页面上添加一个PlaceHolder控件,ID命名为“PlaceHolder1”。在代码Page_Load事件中添加如下代码:
Table Web服务器控件示例
q生成的每行和没列都需要单独创建对象
列表控件和Table控件的差异
q列表控件主要指Repeater、DataList 和GridView控件
q列表控件和Table控件之间的差异包括:
l 列表控件是数据绑定控件。列表控件只对数据源起作用,而Table控件可以显示HTML文本和控件的任意组合,与它们是否绑定数据无关。
l 列表控件使用模板来指定元素的布局。Table控件支持TableCell子控件,开发人员可以像处理任意HTML <td>元素一样填充TableCell子控件。
12. BulletedList Web服务器控件
qBulletedList Web服务器控件创建一个无序或有序(带编号)的项列表,它们分别呈现为HTML ul或ol元素。
qDisplayMode属性指定BulletedList中列表项的显示行为。定义的显示行为可以是Text、HyperLink和LinkButton。
qBulletStyle属性设置显示列表项的项目符号类型。下表列出了可用的项目符号样式。
HiddenField Web服务器控件
q HiddenField Web服务器控件用来在页面上呈现一个隐藏域,即<input type=”hidden”/>,可以在不同的页面传递值。
q 当浏览器呈现页面时,不会显示HiddenField控件中的信息,但用户可以通过查看页面的源文件看到此控件的内容。因此,不要在HiddenField控件中存储敏感信息,如用户ID、密码或信用卡信息。
Literal Web服务器控件
qLiteral服务器控件用来在从后台可控制的向前台页面上传递静态文字内容。
q该控件与Label控件很类似,但由于该控件在客户端产生的结果可以控制。
qLiteral控件不允许对所显示的文本应用样式。
qLiteral服务器控件经常用来混合显示客户端脚本中的片断。
qMode属性用来指定如何呈现Text属性指定的内容,默认设置为Transform。Mode属性是System.Web.UI.WebControls.LiteralMode枚举值之一
Literal 控件示例
由于Literal服务器控件不在客户端呈现出任何HTML标记,比较适合将服务器端的变量传递到客户端脚本中的一部分
Calendar Web服务器控件2-1
qCalendar服务器控件是一个用来在页面上生成日历的比较复杂的服务器控件
q可以使用Calendar Web服务器控件执行下面的操作:
Ø 显示和选择日期
Ø 在日历网格中显示约会或其他信息。
Calendar Web服务器控件2-2
q 获取选择的日期值
例:
q Label1.Text=Calendar1.SelectedDate.ToShortDateString();
q foreach (DateTime d in Calendar1.SelectedDates)
{
msg += d.ToShortDateString() + "/";
}
AdRotator Web服务器控件
qAdRotator Web服务器控件用来在页面上生成随机广告性质的元素。
q该控件会从数据源(通常是XML文件或数据库表)提供的广告列表中自动读取广告信息,如图形文件名和目标URL。
qAdRotator控件会随机选择广告,每次刷新页面时都将更改显示的广告。广告可以加权限以控制广告条的优先级别,这可以使某些广告的显示频率比其他广告高。
AdRotator 控件示例
q 设置包含广告信息的XML文件
<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
<Ad>
<ImageUrl>~/images/banner1.gif</ImageUrl>
<NavigateUrl>http://www.tsinghua.edu.cn</NavigateUrl>
<AlternateText>清华大学</AlternateText>
<Keyword>清华,清华大学</Keyword>
<Impressions>180</Impressions>
</Ad>
<Ad>
<ImageUrl>~/images/banner2.gif</ImageUrl>
<NavigateUrl>http://www.tsinghuait.net.cn</NavigateUrl>
<AlternateText>清华IT学习认证中心</AlternateText>
<Keyword>清华IT,清华it,清华IT工程师</Keyword>
<Impressions>120</Impressions>
</Ad>
</Advertisements>
q 设置AdRotator的AdvertisementFile 属性
<asp:AdRotator ID="AdRotator1" runat="server"
AdvertisementFile="~/MyServerControl/ads.xml"
Height="95px" Width="700px" />
FileUpload Web服务器控件
q 使用FileUpload控件,为用户提供一种将文件从用户的计算机发送到服务器的方法。
q 该控件在允许用户上载图片、文本文件或其他文件。
q FileUpload主要属性如下:
l FileBytes属性从使用FileUpload控件指定的文件返回一个字节数组;
l FileContent属性获取Stream对象,它指向要使用FileUpload控件上载的文件;
l FileName属性获取客户端上使用FileUpload 控件上载的文件的名称;
l HasFile属性指示FileUpload控件是否包含文件;
l PostedFile属性获取使用FileUpload控件上载的文件的基础HttpPostFile对象;
l SaveAs方法将上载的文件内容保存到Web服务器上的指定路径下。
FileUpload 控件示例
服务器端处理上传代码:
……
if (FileUpload1.HasFile)
{
string FileAndExtName = FileUpload1.FileName;
string ExtName = "";
string FileName = "";
string ContentType = FileUpload1.PostedFile.ContentType;
int FileSize = FileUpload1.PostedFile.ContentLength;
if (System.IO.Path.HasExtension(FileAndExtName))
{
ExtName = System.IO.Path.GetExtension(FileAndExtName);
FileName = FileAndExtName.Replace(ExtName, "");
}
else
{
FileName = FileAndExtName;
}
Response.Write("<li>您上载的文件全名称:" + FileAndExtName);
Response.Write("<li>您上载的文件名:" + FileName);
Response.Write("<li>您上载的文件扩展名:" + ExtName);
Response.Write("<li>您上载的文件类型:" + ContentType);
Response.Write("<li>您上载的文件大小:" + FileSize.ToString() + " 字节");
FileUpload1.SaveAs(Server.MapPath("~") +"/images/Upload/" + FileAndExtName);
}
FileUpload 控件修改上传大小
q 上传文件的大小受配置文件的限制,默认上传文件不得超过4MB,如果要上传大文件,则需要修改应用程序配置文件Web.Config里的设置。
<configuration>
<system.web>
<httpRuntime maxRequestLength="4000" enable = "True"
executionTimeout="45"/>
</system.web>
</configuration>
q 图片上传并存入数据库,参考教材示例。
Wizard Web服务器控件
qWizard Web服务器控件提供导航和用户界面,以实现跨多个步骤的信息收集。
qWizard控件提供了一种简单的机制,允许轻松地生成步骤、添加新步骤或重新安排步骤。
q无需编写代码即可生成线性和非线性的导航,并自定义控件的用户导航。
演练创建基本Wizard控件 4-1
(1)创建一个文件系统网站
(2)切换到Default.aspx的“设计”视图。
(3)从“工具箱”的“标准”组中,将Wizard控件拖到该页上,如右图所示。
(4)在图中,右侧是Wizard任务的智能标记。通过右击“Wizard”控件选择“显示智能标记”。该控件即显示在页上,并具有两个默认步骤。单击这两个步骤可对该步骤期间显示的文本和控件进行编辑。
(5)编辑Wizard步骤,拖动“Wizard”控件边沿的控制柄之一,将该控件放大到大约其默认大小的两倍。单击“Wizard”控件中带下划线的文本“步骤1”。
演练创建基本Wizard控件 4-2
(6)单击“Wizard”控件的编辑区域。现在即可编辑该步骤的显示区域。如右图所示。
(7)在图中的可编辑该步骤的显示区域。键入“名称:”,将TextBox控件拖到向导活动区域中刚键入的文本旁边。
(8)点击“Step 2”,进入可编辑区域,键入“电子邮箱:”,拖入一个TextBox控件到向导“Step 2”的活动区域中。
(9)添加完成步骤。右击“Wizard”控件选择“显示智能标记”。在“向导任务”对话框中,选择“添加/移除向导步骤”。如左图所示。
演练创建基本Wizard控件 4-3
(10)在图2-26中从“添加”按钮上的“添加”下拉列表中,选择“向导步骤”。现在“属性”区域显示该新步骤,将“标题”属性设置为“已完成”,将“StepType”属性设置为“完成”,单击“确定”。
(11)右击“Wizard”控件选择“显示智能标记”。在“向导任务”对话框中,使用“步骤”下拉列表选择“已完成”步骤。
(12)将Label控件拖到向导上,保留默认名称Label1,将另一个Label控件拖到向导上,保留默认名称Label2,保存该文件。如图所示。
演练创建基本Wizard控件 4-4
(13)在当前页面的Page_Load事件中,键入以下代码:
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = TextBox1.Text;
Label2.Text = TextBox2.Text;
}
(14)运行程序,查看运行结果。
20.MultiView和View 服务器控件
qView服务器控件用作一组控件的容器,MultiView服务器控件用作View服务器控件的容器。
q使用MultiView服务器控件可定义一组View服务器控件,其中每个View服务器控件都包含不同的子控件。
20.MultiView和View 服务器控件
qView:多页中的一个页;
qActiveViewIndex:当前的活动页。
MultiView和View Web控件示例
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
姓名:
<asp:TextBox ID="TxtName" runat="server">
</asp:TextBox><br />
邮箱:
<asp:TextBox ID="TxtMail" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server"
CommandName="NextView" Text="下一步" /></asp:View>
<asp:View ID="View2" runat="server">
性别:
<asp:RadioButton ID="RbnMale" runat="server"
GroupName="sex" Text="男" Checked="True" />
<asp:RadioButton ID="RbnFemale" runat="server"
GroupName="sex" Text="女" /><br />
出生日期:
<asp:TextBox ID="TxtBirthday" runat="server"
Width="117px"></asp:TextBox>
<asp:Button ID="Button2" runat="server"
CommandName="PrevView" Text="上一步" />
<asp:Button ID="Button3" runat="server"
CommandName="NextView" Text="下一步" /></asp:View>
<asp:View ID="View3" runat="server">
可选项:<asp:CheckBox ID="ChbSelect" runat="server" /><br />
籍 贯:
<asp:TextBox ID="TxtBirthPalce" runat="server"
Width="132px"></asp:TextBox>
<asp:Button ID="Button4" runat="server" Text="完成"
OnClick="Button4_Click" /></asp:View>
</asp:MultiView>
21.Panel Web服务器控件
qPanel Web服务器控件在页面内为其他控件提供一个容器。
q通过将多个控件放入一个Panel控件,可将它们作为一个单元进行控制,如隐藏或显示它们。
q可以使用Panel控件为一组控件创建独特的外观。
Panel 控件几个特征和用途
q Panel服务器控件主要具备以下几个特征和用途。
(1)对控件和标记进行分组
(2)具有默认按钮的窗体
(3)动态生成的控件的容器
(4)完全自定义区域
l 添加滚动条
l 创建一个带标题的分组框,可设置GroupingText属性来显示标题。
l 在页上创建具有自定义颜色或其他外观的区域
PlaceHolder Web 服务器控件
qPlaceHolder Web服务器控件不在页面上产生任何输出,只为其他动态创建的控件提供定位(占位符)。
q和Literal服务器控件类似,但Literal服务器控件只为文本内容提供位置,PlaceHolder服务器控件只为控件提供位置 ;
qPlaceHolder的集合controls用来添加指定的控件:
this.PlaceHolder.Controls.Add(this……..);
PlaceHolder 控件示例
前台……
<asp:PlaceHolder ID="PlaceHolder1" runat="server">
</asp:PlaceHolder>
后台……
protected void Page_Load(object sender, EventArgs e)
{
Button Button1 = new Button();
Button1.Text = "Button 1";
PlaceHolder1.Controls.Add(Button1);
Button1.Click +=new EventHandler(Button1_Click);
Literal Literal1 = new Literal();
Literal1.Text = "<br>";
PlaceHolder1.Controls.Add(Literal1);
Button Button2 = new Button();
Button2.Text = "Button 2";
PlaceHolder1.Controls.Add(Button2);
}
protected void Button1_Click(object sender, EventArgs e)
{
Response.Write("你点击了Button1按钮!");
}
Substitution Web服务器控件
qSubstitution控件指定输出缓存的网页上不进行缓存的部分。
q使用Substitution控件可以在输出缓存的网页上指定希望用动态内容替换控件的部分。
q此控件用在配置为需要进行缓存的ASP.NET网页上。允许开发人员在页上创建一些区域,这些区域可以用动态方式进行更新,然后集成到缓存页。
实践项目——<通讯录管理 >
参考以上控件以及C#面向对象编程,程序实现的功能:
(1)在通讯录中添加人员的信息,如记录人员的名字、性别、电话、分组、照片的。
(2)在通讯录左侧列出所有人员的姓名,当点击姓名时,可以获得相关人员的详细信息。
(3)选择个人信息后,才能对其信息进行修改和删除。
(4)通过“Reset”按钮可以取消修改和删除的状态,进入增加记录状态。
Localize Web服务器控件介绍
qLocalize Web服务器控件在网页上保留显示本地文本的位置。
qLocalize控件与Literal控件相同,并且类似于Label控件。Label控件允许向显示的文本应用样式,而Localize控件则不允许这样做。通过设置从Literal控件继承的Text属性,开发人员可以以编程方式控制在Localize控件中显示的文本。
本章总结
q ASP.NET服务器控件种类
q 各ASP.NET服务器控件特性
q ASP.NET服务器控件内容绑定
q 各个标准控件的使用
q ASP.NET内置对象的应用