16
ASP.net ASP.net 企企企企企企企 企企企企企企企 信信信信信 信信信

ASP 企业级应用开发

Embed Size (px)

DESCRIPTION

ASP.net 企业级应用开发. 信息工程系:罗明刚. 第九章 . 用户控件和自定义控件. 回顾. 在 .NET 中,Web 窗体 DataGrid 控件派生自类System.Web.UI.WebControls.DataGrid 使用 DataSource 和 DataMember 属性可将 DataGrid 绑定到数据源 TemplateColumn 允许指定在列中出现的控件TemplateColumn 的页眉、页脚、项目和编辑项目等 4 项定义了模板列的内容和外观 - PowerPoint PPT Presentation

Citation preview

Page 1: ASP  企业级应用开发

ASP.net ASP.net 企业级应用开发企业级应用开发

信息工程系:罗明刚

Page 2: ASP  企业级应用开发

第九章 

用户控件和自定义控件

Page 3: ASP  企业级应用开发

3

回顾 在 .NET 中,Web 窗体 DataGrid 控件派生自类

System.Web.UI.WebControls.DataGrid 使用 DataSource 和 DataMember 属性可将 DataGrid 绑定到数据源

TemplateColumn 允许指定在列中出现的控件TemplateColumn 的页眉、页脚、项目和编辑项目等 4 项定义了模板列的内容和外观

可使用 Select、 Edit、 Update、 Cancel 和 Delete 等ButtonColumns 来选择、更新和删除 DataGrid 中的记录

对 DataGrid 进行分页使用户能按页显示指定数量的记录 DataGrid “ ” 的 属性生成器 对话框定义了用于自定义

DataGrid 的页眉、页脚、列、分页及各种其他设置

Page 4: ASP  企业级应用开发

4

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

Page 5: ASP  企业级应用开发

5

用户控件和自定义控件之间的差别

用 .ascx 文件表示不出现在工具箱中支持缓存提供有限的支持

用 .DLL 文件表示出现在工具箱中不支持缓存提供全面支持

用户控件用户控件 自定义控件自定义控件

.ascx文件

.ascx文件

.DLL 文件.DLL

文件

Page 6: ASP  企业级应用开发

6

创建用户控件 4-1

用户控件 用户控件ASP.NET

页面

用户控件不能独立存在和使用,它要求将 ASP.NET 页面作为容器用户控件不能独立存在和使用,

它要求将 ASP.NET 页面作为容器

Page 7: ASP  企业级应用开发

7

创建用户控件 4-2在 VS.NET 中创建用户控件:

创建一个 ASP.NET Web 应用程序项目 UserControlDemo

移动到“项目”菜单,选择“添加 Web 用户控件”,命名为 Head.ascx

在 Head.ascx 上添加控件新建一个 Web 窗体,命名为 TestUserControl.aspx ,

在解决方案资源管理器里把 Head.ascx 控件拖放到TestUserControl.aspx 页面的涉及视图里

编译并在浏览器里浏览 TestUserControl.aspx

Page 8: ASP  企业级应用开发

8

创建用户控件 4-3

可以象普通的 ASP.NET 页面一样,在用户控件上放置 Web 控件

<%@ 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>

Page 9: ASP  企业级应用开发

9

创建用户控件 4-4

在 Web 页中使用自定义控件,把自定义控件拖放到 Web 页面即可<%@ 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>

运行结果

Page 10: ASP  企业级应用开发

10

使用 C# 创建自定义控件建立自定义控件步骤

在 VS.NET 的“新建项目”选项中,在模板列表中选择“ Web 控件库”模板选项,把项目命名为 CustomerControls 。 Visual Studio .NET 将创建包含单一自定义控件的代码的项目

添加一个新项,在模板里选择自定义控件,命名为 UltraTextBox 。移至“生成”选项,单击“生成 Repeater.cs” 将 Repeater.cs 编译成 .dll 文件,以便可以用于 .aspx 页面中

在由设计器生成的代码模板 UltraTextBox.cs 中编写代码

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 ); } …

// 被允许的字符组成的字符串属性 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; }…

// 注册 Javascript 函数 string scriptString = ""; scriptString += "<script language=\"javascript\">\n<!--" + "\n"; scriptString += "function CheckInput( validString )"; scriptString += "{"; scriptString += "for(var i = 0; i < validString.length; i++ )"; scriptString += "{"; scriptString += "if( validString.charCodeAt(i) == event.keyCode)"; scriptString += "return true;"; scriptString += "}"; scriptString += "return false;"; scriptString += "}"; scriptString += "\n-->\n</script>"; scriptString += "\n";

page.RegisterStartupScript( "UltraTextBoxScript", scriptString ); } }}

// 注册 Javascript 函数 string scriptString = ""; scriptString += "<script language=\"javascript\">\n<!--" + "\n"; scriptString += "function CheckInput( validString )"; scriptString += "{"; scriptString += "for(var i = 0; i < validString.length; i++ )"; scriptString += "{"; scriptString += "if( validString.charCodeAt(i) == event.keyCode)"; scriptString += "return true;"; scriptString += "}"; scriptString += "return false;"; scriptString += "}"; scriptString += "\n-->\n</script>"; scriptString += "\n";

page.RegisterStartupScript( "UltraTextBoxScript", scriptString ); } }}

Page 11: ASP  企业级应用开发

11

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

Page 12: ASP  企业级应用开发

12

使用自定义控件 -1

续…

在 VS.NET 中创建用户控件: 新建一个 Web 工程,命名为 TestCustomerControl ,

用来测试 UltraTextBox 控件在 TestCustomerControl 工程添加一个页面,命名为 T

estUltraText.aspx添加控件

<%@ 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>

Page 13: ASP  企业级应用开发

13

使用自定义控件 -2

程序运行

只能输入数字

只能输入字母

<!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+Oz47bDx0PHA8O3A8bDxvbmtleXByZXNzOz47bDxyZXR1cm4gQ2hlY2tJbnB1dCgnMTIzNDU2Nzg5MC4nKVw7Oz4+Pjs7Pjt0PHA8O3A8bDxvbmtleXByZXNzOz47bDxyZXR1cm4gQ2hlY2tJbnB1dCgnYWJjZGVmZ2hpamtsbW5vcHFyc3R1dnd4eXonKVw7Oz4+Pjs7Pjs+Pjs+P js+HxcE5

E4BUISQfuZZM3omAyNESE4=" /><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"><!--

function CheckInput( validString ){

for(var i = 0; i < validString.length; i++ ){

if( validString.charCodeAt(i) == event.keyCode)

return true;}return false;

}--></script>

</form></body>

</HTML>

浏览器产生的 Javascript

Page 14: ASP  企业级应用开发

14

复合控件 2-1

复合控件

Page 15: ASP  企业级应用开发

15

复合控件 2-2Composite.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>")); } }}

<% @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>

与前面已创建的任何其他自定义控件一样,在 aspx 页面上可以使用这个控件

与前面已创建的任何其他自定义控件一样,在 aspx 页面上可以使用这个控件

应写入 Codebehind 文件中的代码 应写入 Codebehind 文件中的代码

输出结果 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; }

Page 16: ASP  企业级应用开发

16

总结 使用用户控件和自定义控件可以实现界面的重用 用户控件的扩展名是 .ascx ,该控件可在一个应用程序中

使用,但不能跨应用程序 自定义控件被编译成 .dll 文件,可以放置在工具箱里,它

可以是继承于已有的 Web 控件,也可以是完全自定义。自定义控件可以跨应用程序域

复合自定义控件将一个或多个服务器或 HTML 控件组合在一个 Control 类中,该类可与其他控件类一起编译,以创建一个程序集