计算机新技术user controls论文.doc

2012计算机新技术及应用上海电力学院计算机新技术及应用论文题 目： User controls简介与应用 姓 名： 学 号： 班 级： 院 系： 专 业： 计算机科学与技术 2012 年 12 月 9 日摘要当我们需要在多个地方使用一组控件的一些常用功能时，我们可以考虑采用自己的user controls。User controls可以将一系列控件的多种功能打包在一起，方便我们在各个网站的编写中重复调用。通过user controls可以实现多个页面对数据的重调用，能够实现无刷新的页面间导航等功能，在现行的网站设计中user controls有着其强大的用户可操作性，能够提供个性化的控件封装包，帮助实现多种网页功能。关键字User control、自定义、封装控件、方便快捷、重调用、无刷新User control的背景及简介让我们想象这样一个场景，我们可能需要将一些数据表示在UI上，我们需要将这些数据在多个布局外观不同的页面上进行表示，而这些页面上不同位置需要显示的数据可能有所区别。在这样的情况下我们可以选用user control吗？答案是肯定的。为了在页面布局中灵活的运用这些控件实现数据的重用，我们需要做的就是建成一个user control的模板。User control模板内封装了我们需要的数据，模板的各种实例可以在自定义页面布局中提供灵活的数据支持。有时user control也能提供我们自定义的默认显示方式。如何实现user control的使用User control是一种简单的自定义控件，创建user control就像创建ASP.NET网页一样简单，使用visual studio的工具箱对其进行设计，在后台代码中对控件的属性和实现方法进行定义。然后这些控件就出现在你的ASP.NET页面中了，使用时只需调用共有成员的输入输出操作即可。所有的内部操作都被封装在控件中，对外部是不可见的。右击项目图标添加新项在选择模板时选择 “Web 用户控件”。给其一有意义的名称，注意到该文件的后缀是“ascx”,而一般的Web窗体的后缀是“aspx”。新创建的文件源代码中仅有一行：这里用的是Control指令，而不是Page指令。后台类的代码如下：using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class WebControls_Address : System.Web.UI.UserControl protected void Page_Load(object sender, EventArgs e) 自定义控件以WebControls_做前缀命名（后面的Address是我们给出的文件名，或可认为是控件的名称）。继承自System.Web.UI.UserControl类。在设计视图中设计用户控件：用户控件一般是一些常规控件的有意义组合，或是对常规控件应用一些格式化（如应用css或Theme）。所以在设计视图中，可使用HTML控件或服务端控件进行一些组合。在Web窗体设计中使用用户控件：工具箱中的控件我们可方便的拖拽到设计视图或源码中，但自定义的用户控件不会出现在工具箱中，我们可以直接把代表用户控件的.ascx文件拖到设计视图中（非其他视图，一定是设计视图）。之后看Web窗体的源码，其中多出了两行代码:这是首部多出的注册指令，Src指出自定义用户控件的位置。TagName指出用户控件的名字。TagPrefix指出该控件的tag前缀，这里是uc1，很容易猜想另一个自定义用户控件类的前缀可能为“uc2”。如果自定义用户控件被多个页面使用，为避免在每个页面中注册该控件，可以在配置文件中全局注册如：. 第二处多出的代码如： 。该行代码相当简单，可到属性窗体中看一看用户控件的属性（这里只有五个）：（(ID),EndableTheming,EnableViewState,runat,Visible）当然这是没有在自定义用户控件的后台类没有定义新的属性时的属性个数。当在代表用户控件的后台类定义中定义了新的属性时，用户控件在使用时，它的属性栏中会出现自定义的属性。用户控件是作为一个整体来使用的，欲访问用户控件只有通过其公共成员，如果没有在后台类中添加任何公共（public）成员，它仅向外部暴露很少的访问点。如果用户控件内部由一些标准控件组合而成，可把用户控件看做是一个逻辑容器，它封装其组成部分，向外部隐藏其内部成员的公共访问接口。我们也可以提供到内部控件的访问路由，就像Gof的门面设计模式的做法。如果你为自定义用户控件提供了公有的属性，则可在代表用户控件实例的Tag元素中设定它的属性，也可在属性栏窗体中设定新提供的属性值。但在某些情况下，比如一个你设计了几个小时的麻烦页面，你不能破坏它非常复杂的页面布局。这时，可以定义其他的属性，例如改变控件的背景或前色属性。User control的优点及其应用实例实现多个页面对数据的调用让我们假设一个情景，我们需要持有一个人的名字、姓氏、年龄，在我们网站的多个地方都要对这些信息进行显示，而每次显示的布局可能有所不同。User control模板的设计：我们需要做的第一件事是创建一个user control。一旦我们创建了user control，就必须为其提供一个placeholder控件进行存储。Placeholder控件正如其名字一样，可以提供一种默认的缺省继承，也可以为程序员提供自定义布局。在这个例子中，我们将创建一个person类，其中包括人的姓氏、名字以及年龄 第12页public class PersonItem private string firstName; private string lastName; private int age; public PersonItem(string fName, string lName, int aGe) this.firstName = fName; this.lastName = lName; this.age = aGe; public string FirstName get return firstName; set firstName = value; public string LastName get return lastName; set lastName = value; public int Age get return age; set age = value; 接下来我们需要做的就是定义一个类Container class，这个类被用作容器，可以容纳用户在自定义布局中可能用到的所有控件。定义Container类的主要目的是为了在自定义布局中提供FindControl的功能。这样我们就可以以Container类的名字来调用这个控件。这样我们就可以通过从控件类中继承这个类，来实现容器类的与外界的接口了。下面我们来创建这个类。public class PersonItemContainer : Control, INamingContainer private PersonItem person = null; public PersonItemContainer(PersonItem item) this.person = item; public PersonItem Person get return person; set person = value; 看看这个类，它包含person对象的引用，但如何将这个类作为我们user control的命名容器的那部分不是很明确。因此我们需要将这个类与刚刚创建的user control连接起来。要做到这一点，我们要在user control的代码中创建一个ITemplate类型的成员以及其公共性质。现在我们来看看完成了代码后植（code-behind）后的user control，以了解完整的逻辑：public partial class TemplateUCtrl : System.Web.UI.UserControl /the template control specific stuff private ITemplate personTemplate; /the controls data specific stuff private PersonItem personItem = null; protected void Page_Init(object sender, EventArgs e) /lets first clear the placeholders to attach then to new data this.phdPerson.Controls.Clear(); /but what if the user forgot to send the user information if (Person = null) phdPerson.Controls.Add(new LiteralControl(Please attach the control with a person object.); else /check if the templates are null we want to use simple literal /The user wants the default representation of the control if (PersonTemplate = null) /Lets show the default representation of the control phdPerson.Controls.Add(new LiteralControl(First Name: ); phdPerson.Controls.Add(new LiteralControl(Person.FirstName); phdPerson.Controls.Add(new LiteralControl(); phdPerson.Controls.Add(new LiteralControl(Last Name: ); phdPerson.Controls.Add(new LiteralControl(Person.LastName); phdPerson.Controls.Add(new LiteralControl(); phdPerson.Controls.Add(new LiteralControl(Age: ); phdPerson.Controls.Add(new LiteralControl(Person.Age.ToString(); else PersonItemContainer container = new PersonItemContainer(this.Person); this.PersonTemplate.InstantiateIn(container); phdPerson.Controls.Add(container); PersistenceMode(PersistenceMode.InnerProperty) TemplateContainer(typeof(PersonItemContainer) public ITemplate PersonTemplate get return personTemplate; set personTemplate = value; public PersonItem Person get return personItem; set personItem = value; User control模板的使用让我们看看我们现在该如何使用这个user control。我们将user control拖动到页面上，并在后台的代码中键入个人信息。protected void Page_PreInit(object sender, EventArgs e) PersonItem item = new PersonItem(one, two, 23); TemplateUCtrl1.Person = item;这将在页面中以默认方式显示如果用户未能提供个人信息怎么办。为了检查这个，我们拖动另外一个user control到页面上，并且不分配给他person对象。因此我们使用了默认的user control。现在，如果我们想自定义user control的布局结构，那么我们只要向usercontrol传递PersonTemplate信息就可以做到这一点。 Welcome Mr. Persons first Name: asp:TextBox ID=TextBox1 runat=server Text= Persons Last Name: asp:TextBox ID=TextBox2 runat=server Text= Persons Age: asp:TextBox ID=TextBox3 runat=server Text= Give our best wishes to Mrs. 后台代码如下：public partial class _Default : System.Web.UI.Page protected void Page_PreInit(object sender, EventArgs e) PersonItem item = new PersonItem(one, two, 23); TemplateUCtrl1.Person = item; TemplateUCtrl2.Person = item; protected void Page_Load(object sender, EventArgs e) Page.DataBind(); 现在我们来运行这个应用：实现无刷新的页面间导航页面间导航当然要刷新，这是无法避免的，但我们总不能把原本属于多个页面的逻辑塞在一个页面里吧，所以要想个办法把这些逻辑分开来。我们使用UserControl来作为基本的视图单位，而不使用Page，这样改变加载的UserControl也就改变了视图，相当于实现了导 航，但Page没变所以还是可以无刷新。然而怎么动态加载UserControl呢？ 这个控件只有一个属性需要关注，那就是ViewPanel.VirtualPath，你把UserControl的路径（例如/UserControls/Sample.ascx）设置给它之后它就会自动帮你加载该UserControl。在运行过程中，如果你修改了这个属性，控件自己会通过ViewState来保存该值，也就是一次修改永久有效，无论之后有多少次回送都没问题，直到你下一次再修改该值。要实现无刷新的视图间导航，你需要在UpdatePanel中放置一个ViewPanel，之后不同的视图都使用UserControl设计（其实设计起来和使用Page时差不多），通过ViewPanel动态加载这些UserControl也就实现了无刷新的视图间导航了。下面这个方案导航用的LinkButton都在UserControl外面，所以要改变 ViewPanel.VirtualPath很容易。如果你的导航控件在UserControl内，那就需要Page.FindControl来找到 ViewPanel然后再改变其VirtualPath值，这个比较麻烦。可以动态加载UserControl的ViewPanel控件（源码） using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;namespace CatChen.Cocollab.Web.UI.Controls public class ViewPanel : System.Web.UI.Control, System.Web.UI.INamingContainer private string _virtualPath; private Control _view; public string VirtualPath get return this._virtualPath; set string oldValue = this._virtualPath; this._virtualPath = value; if (this.Page != null & value != oldValue) this.ChildControlsCreated = false; this.EnsureChildControls(); public Control View get return this._view; protected override void OnInit(EventArgs e) base.OnInit(e); if (!string.IsNullOrEmpty(this.VirtualPath) this.EnsureChildControls(); protected override void LoadViewState(object savedState) Pair pair = savedState as Pair; if (pair != null) base.LoadViewState(pair.First); this.VirtualPath = pair.Second as string; protected override void CreateChildControls() this.Controls.Clear(); if (string.IsNullOrEmpty(this.VirtualPath) return; if (this.Page = null) throw new Exception(ViewPanel.Page is null.); this._view = this.Page.LoadControl(this.VirtualPath); if (this._view = null) throw new Exception(ViewVirtualPath cannot be loaded.); this._view.ID = ucView; this.ClearChildState(); this.Controls.Add(this._view); protected override object SaveViewState() return new Pair(base.SaveViewState(), this.VirtualPath); 总结当我们