ASP.NET自定义控件组件开发 第五章 模板控件开发_.NET_编程开发_程序员俱乐部

     

     其实开发一个模板控件比开发一个组合控件更加简单，所以这章不难。

 

     开发一个模板控件一般都继承CompositeControl，因为继承这个基类后，我们就省却了很多的麻烦。所以本章我们开

 

发的模板控件也继承于CompositeControl。大家应该还记得我们上章开发那个登录Login控件吧，如下：

     

 

          以上就是我们之前开发的登录控件，现在我们来改造它。我们的现在的这个登录控件的输入用户名和密码的控件是

 

TextBox,我们有时候可能想把TextBox 换成DropdownList，或者其他的控件。也就说，我们想定制这个登录的控件。那

 

么，我们就要模板了。

 

     首先来看看我们本章实现控件的最后效果：

 

 

 

 

     

 

 

          大家看见没，这样我们就可以定制这个控件了。好了，我们来实现吧。

 

     

          首先，我们让我们的模板控件继承上章的那个组合的Login控件：

 

 

class="cnblogs_code_copy"> Code
1 public class TemplateLoginControl:Login

 

 

          然后，我们就声明我们的模板：

 

 

Code
 1  #region//声明模板
 2         private ITemplate loginUserNameTemplate;
 3 
 4         [Browsable (false )]//我们不想在属性窗口中看见它
 5         [TemplateContainer (typeof(TemplateLoginControl ))]//我们的模板是包含在找个控件中的，
 6         [PersistenceMode (PersistenceMode.InnerProperty )]//模板中内容很复杂的，比如你可以拖入很多的控件
 7         public ITemplate LoginUserNameTemplate
 8         {
 9             get
10             {
11                 return loginUserNameTemplate;
12             }
13             set
14             {
15                 loginUserNameTemplate = value;
16             }
17 
18         }
19 
20         private ITemplate loginUserPasswardTemplate;
21         [Browsable(false)]//我们不想在属性窗口中看见它
22         [TemplateContainer(typeof(TemplateLoginControl))]//我们的模板是包含在找个控件中的，
23         [PersistenceMode(PersistenceMode.InnerProperty)]//模板中内容很复杂的，比如你可以拖入很多的控件
24         public ITemplate LoginUserPasswardTemplate
25         {
26             get
27             {
28                 return loginUserPasswardTemplate;
29             }
30             set
31             {
32                 loginUserPasswardTemplate = value;
33             }
34         }
35         #endregion

 

               正如前面所说的，我们只是想定制两个输入信息的模板，大家可以根据需要，声明更多的模板。如，大家还可以

 

把显示的用户名的那些Label换成模板定制。

 

               其实编写模板控件比编写一个组合控件更加的简单。大家稍后就可以体会到了。

          

               好了，声明完了模板之后，我们的控件写了一大半了，还差一点。大家想想是什么？？？

 

          

               对了，就是应用这些模板了。如下：

 

              

Code
 1  protected override void CreateChildControls()
 2         {
 3             Controls.Clear();
 4             if (loginUserNameTemplate != null)
 5                 loginUserNameTemplate.InstantiateIn(this);
 6             else
 7                 base.CreateChildControls();
 8             if(loginUserPasswardTemplate!=null )
 9                 loginUserPasswardTemplate .InstantiateIn(this);
10             else
11                 base.CreateChildControls();
12 
13             ChildControlsCreated = true;
14 
15 
16         }

 

                    我想，大家对这个方法不陌生。因为我们之前的组合控件也是重写了这个方法。到这里，就写完了。

          

                    大家可能还有疑问，为什么这样重写 CreateChildControls()方法后，就会达到我们的效果？

 

                    下面，我就来将这个方法和之前的那个组合控件的 CreateChildControls()方法比较一下，也顺便讲下

 

模板的内幕。

 

          先看组合控件的 CreateChildControls()方法，见下：

              

Code
 1 protected override void CreateChildControls()
 2         {
 3             Controls.Clear();
 4 
 5            //初始化控件lbUserName
 6             lbUserName = new Label();
 7             lbUserName.Text = "用户名：";
 8             lbUserName.ID = "lbUserName";
 9             //把控件添加到我们的组合控件中
10             Controls.Add(lbUserName);
11 
12             //初始化控件lbUserPassward
13             lbUserPassward = new Label();
14             lbUserPassward.Text = "密  码：";
15             lbUserPassward.ID = "lbUserPassward";
16             Controls.Add(lbUserPassward);
17            
18 
19             txtUserName = new TextBox();
20             txtUserName.ID = "txtUserName";
21             txtUserName.Width = Unit.Percentage(60);
22             Controls.Add(txtUserName);
23 
24             txtUserPassward = new TextBox();
25             txtUserPassward.ID = "txtUserPassward";
26             txtUserPassward.Width = Unit.Percentage(60);
27             Controls.Add(txtUserPassward);
28 
29             submitButton  = new Button();
30             submitButton.Text = "提交";
31             submitButton.CommandName = "Validate";
32             Controls.Add(submitButton);
33 
34             ChildControlsCreated = true;
35         }

 

                         1.首先，在之前的组合控件中，我们是把那个TextBox,Label硬编码到了生成和初始化控件的方法

 

CreateChildControls（）中。而在模板控件中，我们没有这样做，我们只是简单的调用了模板的一个方法：

 

InstantiateIn（）。实际上，这个方法是个晚绑定。

 

                    为什么是晚绑定？先来看看下面：

 

                         

 

          

          假设我们想用个下拉框来输入用户名，我们肯定要设计下拉框的属性，如 name，id，等等，当我们设置好

 

后，就形如这样了：

 

 

 

Code
1 <asp:DropDownList ID="mylist" runat="server" BackColor ="red" ></asp:DropDownList>

 

          其实这样和在 CreateChildControls（）中声明是一样的，形如：

 

          

Code
1  DropDownList mylist = new DropDownList();
2             mylist.ID = "mylist";
3             mylist.Items = new ListItemCollection();
4             Controls.Add(mylist);
5 

 

                    其实模板控件的方法InstantiateIn（）就是将之前的那个<ASp:dropdownlist....>代码转换为

 

 

DropDownList mylist=new DropDownList()...

 

                    不知道大家清楚，说到底就是个晚绑定！！！

 

                    到这里，模板控件完了，大家编译后，就后看到下面的控件：

     

               

 

                    然后，我们就在html代码开发声明：如下：

                    

 

Code
1  <cc1:TemplateLoginControl ID="TemplateLoginControl1" runat="server">
2             <LoginUserNameTemplate >
3               
4             </LoginUserNameTemplate>
5             <LoginUserPasswardTemplate>
6             
7             </LoginUserPasswardTemplate>
8         </cc1:TemplateLoginControl>
9     

 

               很多时候，我们不喜欢这样，因为我们更加喜欢图形化的设置，如下：

          

 

               这样更加友好些。其实这也不难，只要加个设计器就可以了。

 

               设计器是个类。在ASP.NET有很多的设计器，如ControlDesigner,CompositeControlDesigner.等等。

 

               我们的设计器的一般都继承已有的设计器类。在这里我不多讲，大家需要的话，我专们用一章来讲。

          

               

Code
 1public class MyLoginDesigner : CompositeControlDesigner
 2    {
 3        public override void Initialize(IComponent component)
 4        {
 5            base.Initialize(component);
 6            SetViewFlags(ViewFlags.TemplateEditing, true);
 7        }
 8
 9        public override string GetDesignTimeHtml()
10        {
11            TemplateLoginControl control = Component as TemplateLoginControl;
12            if (control != null)
13            {
14                if (control.LoginUserNameTemplate == null)
15                {
16                    return CreatePlaceHolderDesignTimeHtml("请您编辑用户名的模板");
17
18                }
19
20                if (control.LoginUserPasswardTemplate == null)
21                {
22                    return CreatePlaceHolderDesignTimeHtml("请您编辑用户密码的模板");
23                }
24            }
25            return base.GetDesignTimeHtml();
26        }
27
28        private TemplateGroupCollection tempgc;
29        public override TemplateGroupCollection TemplateGroups
30        {
31            get
32            {
33                if (tempgc == null)
34                {
35
36                    tempgc = base.TemplateGroups;
37
38                    TemplateGroup loginUserNameTemplate = new TemplateGroup("UserNameTemplate");
39                    loginUserNameTemplate.AddTemplateDefinition (new TemplateDefinition (this,"UserNameTemplate",
40                        Component,"UserNameTemplate",false ));
41                    tempgc.Add (loginUserNameTemplate );
42
43                    TemplateGroup loginPasswardNameTemplate = new TemplateGroup("UserPasswardTemplate");
44                    loginPasswardNameTemplate.AddTemplateDefinition(new TemplateDefinition(this, "UserPasswardTemplate",
45                        Component,"UserPasswardTemplate",false ));
46                    tempgc.Add(loginPasswardNameTemplate);
47                }
48                return tempgc;
49            }
50        }
51    }

 

               然后在这样：

               

Code
1 [Designer (typeof (MyLoginDesigner ))]
2     public class TemplateLoginControl:Login

 

 

          一切就OK了，写的有些催促，大家有问题我一定回复。

 

          完整代码如下：

          

          

Code
  1using System;
  2using System.Collections.Generic;
  3using System.Text;
  4using System.Web;
  5using System.Web.UI;
  6using System.Web.UI.WebControls;
  7using System.ComponentModel;
  8using System.Web.UI.Design;
  9using System.Web.UI.Design.WebControls ;
 10using System.Collections ;
 11
 12
 13
 14
 15namespace LoginControl
 16{
 17    [Designer (typeof (MyLoginDesigner ))]
 18    public class TemplateLoginControl:Login
 19    {
 20        //声明模板#region//声明模板
 21        private ITemplate loginUserNameTemplate;
 22
 23        [Browsable (false )]//我们不想在属性窗口中看见它
 24        [TemplateContainer (typeof(TemplateLoginControl ))]//我们的模板是包含在找个控件中的，
 25        [PersistenceMode (PersistenceMode.InnerProperty )]//模板中内容很复杂的，比如你可以拖入很多的控件
 26        public ITemplate LoginUserNameTemplate
 27        {
 28            get
 29            {
 30                return loginUserNameTemplate;
 31            }
 32            set
 33            {
 34                loginUserNameTemplate = value;
 35            }
 36
 37        }
 38
 39        private ITemplate loginUserPasswardTemplate;
 40        [Browsable(false)]//我们不想在属性窗口中看见它
 41        [TemplateContainer(typeof(TemplateLoginControl))]//我们的模板是包含在找个控件中的，
 42        [PersistenceMode(PersistenceMode.InnerProperty)]//模板中内容很复杂的，比如你可以拖入很多的控件
 43        public ITemplate LoginUserPasswardTemplate
 44        {
 45            get
 46            {
 47                return loginUserPasswardTemplate;
 48            }
 49            set
 50            {
 51                loginUserPasswardTemplate = value;
 52            }
 53        }
 54        #endregion
 55        重写创建控件的方法#region 重写创建控件的方法
 56
 57        protected override void CreateChildControls()
 58        {
 59            Controls.Clear();
 60            if (loginUserNameTemplate != null)
 61                loginUserNameTemplate.InstantiateIn(this);
 62            else
 63                base.CreateChildControls();
 64            if(loginUserPasswardTemplate!=null )
 65                loginUserPasswardTemplate .InstantiateIn(this);
 66            else
 67                base.CreateChildControls();
 68
 69            ChildControlsCreated = true;
 70
 71           
 72
 73        }
 74
 75        #endregion
 76
 77
 78
 79    }
 80
 81    public class MyLoginDesigner : CompositeControlDesigner
 82    {
 83        public override void Initialize(IComponent component)
 84        {
 85            base.Initialize(component);
 86            SetViewFlags(ViewFlags.TemplateEditing, true);
 87        }
 88
 89        public override string GetDesignTimeHtml()
 90        {
 91            TemplateLoginControl control = Component as TemplateLoginControl;
 92            if (control != null)
 93            {
 94                if (control.LoginUserNameTemplate == null)
 95                {
 96                    return CreatePlaceHolderDesignTimeHtml("请您编辑用户名的模板");
 97
 98                }
 99
100                if (control.LoginUserPasswardTemplate == null)
101                {
102                    return CreatePlaceHolderDesignTimeHtml("请您编辑用户密码的模板");
103                }
104            }
105            return base.GetDesignTimeHtml();
106        }
107
108        private TemplateGroupCollection tempgc;
109        public override TemplateGroupCollection TemplateGroups
110        {
111            get
112            {
113                if (tempgc == null)
114                {
115
116                    tempgc = base.TemplateGroups;
117
118                    TemplateGroup loginUserNameTemplate = new TemplateGroup("UserNameTemplate");
119                    loginUserNameTemplate.AddTemplateDefinition (new TemplateDefinition (this,"UserNameTemplate",
120                        Component,"UserNameTemplate",false ));
121                    tempgc.Add (loginUserNameTemplate );
122
123                    TemplateGroup loginPasswardNameTemplate = new TemplateGroup("UserPasswardTemplate");
124                    loginPasswardNameTemplate.AddTemplateDefinition(new TemplateDefinition(this, "UserPasswardTemplate",
125                        Component,"UserPasswardTemplate",false ));
126                    tempgc.Add(loginPasswardNameTemplate);
127                }
128                return tempgc;
129            }
130        }
131    }
132}