ASP 企业级应用开发

ASP.net 企业级应用开发 信息工程系：罗明刚

第九章　用户控件和自定义控件

回顾 • 在 .NET 中，Web 窗体 DataGrid 控件派生自类System.Web.UI.WebControls.DataGrid • 使用 DataSource 和 DataMember 属性可将 DataGrid 绑定到数据源 • TemplateColumn 允许指定在列中出现的控件TemplateColumn 的页眉、页脚、项目和编辑项目等 4 项定义了模板列的内容和外观 • 可使用 Select、Edit、Update、Cancel 和 Delete 等 ButtonColumns 来选择、更新和删除 DataGrid 中的记录 • 对 DataGrid 进行分页使用户能按页显示指定数量的记录 • DataGrid 的“属性生成器”对话框定义了用于自定义 DataGrid 的页眉、页脚、列、分页及各种其他设置

目标 • 明确创建自定义控件的必要性 • 使用ASP.NET 创建简单的控件 • 使用 C# 创建复合控件

用 .ascx 文件表示 不出现在工具箱中支持缓存提供有限的支持用 .DLL 文件表示出现在工具箱中不支持缓存提供全面支持用户控件和自定义控件之间的差别用户控件自定义控件 .ascx 文件 .DLL 文件

创建用户控件 4-1 用户控件 ASP.NET 页面用户控件用户控件不能独立存在和使用，它要求将 ASP.NET 页面作为容器

创建用户控件 4-2 • 在 VS.NET 中创建用户控件： • 创建一个 ASP.NET Web 应用程序项目 UserControlDemo • 移动到“项目”菜单，选择“添加 Web 用户控件”，命名为Head.ascx • 在Head.ascx上添加控件 • 新建一个Web窗体，命名为TestUserControl.aspx，在解决方案资源管理器里把Head.ascx控件拖放到TestUserControl.aspx页面的涉及视图里 • 编译并在浏览器里浏览TestUserControl.aspx

<%@ Control Language="c#" AutoEventWireup="false" Codebehind="Head.ascx.cs" Inherits ="UserControlDemo.Head" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%> <TABLE id="Table1" cellSpacing="1" cellPadding="1" width="640" border="0"> <TR> <TD colSpan="5"><IMG src="logo.jpg"></TD> </TR> <TR> <TD bgColor="#0000ff"> <asp:HyperLink id="HyperLink1" ForeColor="White" runat="server"> 关于我们</asp:HyperLink></TD> <TD bgColor="#0000ff"> <asp:HyperLink id="HyperLink2" ForeColor="White" runat="server">最新动态 </asp:HyperLink></TD> <TD bgColor="#0000ff"> <asp:HyperLink id="HyperLink3" ForeColor="White" runat="server">ACCP </asp:HyperLink></TD> <TD bgColor="#0000ff"> <asp:HyperLink id="HyperLink4" ForeColor="White" runat="server">BENET </asp:HyperLink></TD> <TD bgColor="#0000ff"> <asp:HyperLink id="HyperLink5" ForeColor="White" runat="server">BTEST </asp:HyperLink></TD> </TR> </TABLE> 创建用户控件 4-3 可以象普通的ASP.NET页面一样，在用户控件上放置Web控件

创建用户控件 4-4 <%@ Register TagPrefix="uc1" TagName="Head" Src="Head.ascx" %> <%@ Page language="c#" Codebehind="TestUserControl.aspx.cs" AutoEventWireup="false" Inherits="UserControlDemo.TestUserControl" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML> <HEAD> <title>WebForm1</title> <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR"> <meta content="C#" name="CODE_LANGUAGE"> <meta content="JavaScript" name="vs_defaultClientScript"> <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema"> </HEAD> <body MS_POSITIONING="GridLayout"> <form id="Form1" method="post" runat="server"> <uc1:Head id="Head1" runat="server"></uc1:Head> <h1>测试用户控件</h1> </form> </body> </HTML> 在Web页中使用自定义控件，把自定义控件拖放到Web页面即可运行结果

//被允许的字符组成的字符串属性 public string ValidString { get { return _validString; } set { _validString = value; } } //控件加载时要执行的代码 private void UltraTextBox_Load(object sender, EventArgs e) { //设定文本框输入文本时要调用的Javascript函数 this.Attributes.Add( "onkeypress", "return CheckInput('" + ValidString + "');" ); //得到文本框所在的页面对象 System.Web.UI.Page page = this.Page; //如果Javascript函数已经被注册到页面，则返回 if( page.IsStartupScriptRegistered( "UltraTextBoxScript" ) ) { return; } … 使用 C#创建自定义控件 //注册Javascript函数 string scriptString = ""; scriptString += "<script language=\"javascript\">\n\n</script>"; scriptString += "\n"; page.RegisterStartupScript( "UltraTextBoxScript", scriptString ); } } } using System; using System.Web.UI; using System.Web.UI.WebControls; using System.ComponentModel; namespace CustomerControls { [DefaultProperty("Text"), ToolboxData("<{0}:UltraTextBox runat=server></{0}:UltraTextBox>")] public class UltraTextBox : System.Web.UI.WebControls.TextBox { string _validString = ""; [Bindable(true), Category("Appearance"), DefaultValue("")] public UltraTextBox() { //关联加载控件时要执行的代码 this.Load += new EventHandler( UltraTextBox_Load ); } … • 建立自定义控件步骤 • 在 VS.NET 的“新建项目”选项中，在模板列表中选择“Web 控件库”模板选项，把项目命名为CustomerControls。Visual Studio .NET 将创建包含单一自定义控件的代码的项目 • 添加一个新项，在模板里选择自定义控件，命名为UltraTextBox。移至“生成”选项，单击“生成 Repeater.cs”将 Repeater.cs 编译成 .dll 文件，以便可以用于 .aspx 页面中 • 在由设计器生成的代码模板 UltraTextBox.cs 中编写代码

把自定义控件添加到工具箱

使用自定义控件-1 <%@ Page language="c#" Codebehind="TestUltraTextBox.aspx.cs" AutoEventWireup="false" Inherits="TestCustomerControl.TestUltraTextBox" %> <%@ Register TagPrefix="cc1" Namespace="CustomerControls" Assembly= "CustomerControls" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML> <HEAD> <title>WebForm1</title> <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR"> <meta content="C#" name="CODE_LANGUAGE"> <meta content="JavaScript" name="vs_defaultClientScript"> <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema"> </HEAD> <body MS_POSITIONING="GridLayout"> <form id="Form1" method="post" runat="server"> <cc1:ultratextbox id="txtNumber" runat="server" ValidString="1234567890."> </cc1:ultratextbox> <cc1:ultratextbox id="txtLetter" runat="server" ValidString="abcdefghijklmnopqrstuvwxyz"></cc1:ultratextbox> </form> </body> </HTML> • 在 VS.NET 中创建用户控件： • 新建一个Web工程，命名为TestCustomerControl，用来测试UltraTextBox控件 • 在TestCustomerControl工程添加一个页面，命名为TestUltraText.aspx • 添加控件续…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML> <HEAD> <title>WebForm1</title> <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR"> <meta content="C#" name="CODE_LANGUAGE"> <meta content="JavaScript" name="vs_defaultClientScript"> <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema"> </HEAD> <body MS_POSITIONING="GridLayout"> <form name="Form1" method="post" action="testultraTextBox.aspx" id="Form1"> <input type="hidden" name="__VIEWSTATE" value="dDwtMTIxMjQ2MDI0MDt0PDtsPGk8MT47PjtsPHQ8O2w8aTwxPjtpPDI+Oz47bD x0PHA8O3A8bDxvbmtleXByZXNzOz47bDxyZXR1cm4gQ2hlY2tJbnB1dCgnMTIzNDU2 Nzg5MC4nKVw7Oz4+Pjs7Pjt0PHA8O3A8bDxvbmtleXByZXNzOz47bDxyZXR1cm4gQ2h lY2tJbnB1dCgnYWJjZGVmZ2hpamtsbW5vcHFyc3R1dnd4eXonKVw7Oz4+Pjs7Pjs+Pjs+P js+HxcE5E4BUISQfuZZM3omAyNESE4=" /> <input name="txtNumber" type="text" id="txtNumber" onkeypress= "return CheckInput('1234567890.');" /> <input name="txtLetter" type="text" id="txtLetter" onkeypress= "return CheckInput('abcdefghijklmnopqrstuvwxyz');" /> <script language="javascript">  </script> </form> </body> </HTML> 使用自定义控件-2 • 程序运行只能输入字母浏览器产生的Javascript 只能输入数字

复合控件 2-1 复合控件自定义控件 Windows 控件复合控件

复合控件 2-2 Composite.cs 如果在一个页面上放置多个控件实例，就需要这样做 using System; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace CompositeControl { public class Composite : Control , INamingContainer { public int Val { get { this.EnsureChildControls(); return Int32.Parse (((TextBox) Controls[1]). Text); } set { this.EnsureChildControls(); ((TextBox)Controls[1]).Text = value.ToString(); } } protected override void CreateChildControls() { this.Controls.Add(new LiteralControl(“<h3>值：")); TextBox box = new TextBox(); box.Text = "0"; this.Controls.Add(box); this.Controls.Add(new LiteralControl("</h3>")); } } } private void btnIncrement_Click(Object sender, EventArgs e) { Composite1.Val = Composite1.Val + 1; } private void btnDecrement_Click(Object sender, EventArgs e) { Composite1.Val = Composite1.Val - 1; } 输出结果与前面已创建的任何其他自定义控件一样，在 aspx 页面上可以使用这个控件 <% @Register TagPrefix="CompositeControl" Namespace="CompositeControl" Assembly="CompositeControl" %> <HTML> <title>复合控件</title> <body> <form method="post" action="ThisPage.aspx" runat= "server" ID="Form1"> <CompositeControl:Composite id="Composite1" runat="server" /> </form> </body> </HTML> 该属性设置和返回在复合控件的文本框中包含的值应写入 Codebehind文件中的代码

总结 • 使用用户控件和自定义控件可以实现界面的重用 • 用户控件的扩展名是 .ascx，该控件可在一个应用程序中使用，但不能跨应用程序 • 自定义控件被编译成 .dll 文件，可以放置在工具箱里，它可以是继承于已有的Web控件，也可以是完全自定义。自定义控件可以跨应用程序域 • 复合自定义控件将一个或多个服务器或 HTML 控件组合在一个 Control 类中，该类可与其他控件类一起编译，以创建一个程序集

ASP 企业级应用开发

ASP 企业级应用开发

Presentation Transcript