自定义控件的构建(4)

Share

    在自定义控件的构建(3)中，我们构建了组合控件，实际上，在大部分构建组合控件时，同时会指定其子控件的布局

构建混合控件

  下面的代码是设计为一个登录控件，同时指定其布局

 namespace MyCompositeControls
{    
    /// <summary>
    /// 构建混合控件
   /// </summary>
    public class Login : CompositeControl
    {
        private TextBox txtUserName;
        private TextBox txtPassword;
        public string UserName
        {
            get 
            {
                EnsureChildControls();
                return txtUserName.Text;
            }
            set
            {
                EnsureChildControls();
               txtUserName.Text=value;
            }
        }
        public string Password
        {
            get
            {
                EnsureChildControls();
                return txtPassword.Text;
            }
            set
            {
                EnsureChildControls();
                txtPassword.Text = value;
            }
        }
        protected override void CreateChildControls()
        {
            txtUserName = new TextBox();
            txtUserName.ID = "txtUserName";
            this.Controls.Add(txtUserName);
            txtPassword = new TextBox();
            txtPassword.ID = "txtPassword";
            this.Controls.Add(txtPassword);
        }
        protected override void RenderContents(HtmlTextWriter writer)
        {
            writer.RenderBeginTag(HtmlTextWriterTag.Tr);
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            writer.AddAttribute(HtmlTextWriterAttribute.For, txtUserName.ClientID);
            writer.RenderBeginTag(HtmlTextWriterTag.Label);
            writer.Write("User Name:");
            writer.RenderEndTag();
            writer.RenderEndTag();
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            txtUserName.RenderControl(writer);
            writer.RenderEndTag();
            writer.RenderEndTag();
            writer.RenderBeginTag(HtmlTextWriterTag.Tr);
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            writer.AddAttribute(HtmlTextWriterAttribute.For, txtPassword.ClientID);
            writer.RenderBeginTag(HtmlTextWriterTag.Label);
            writer.Write("Password:");
            writer.RenderEndTag();
            writer.RenderEndTag();
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            txtPassword.RenderControl(writer);
            writer.RenderEndTag();
            writer.RenderEndTag();
        }
        protected override HtmlTextWriterTag TagKey
        {
            get { return HtmlTextWriterTag.Table; }
        }
}
    }

 可以看到RenderContents()内部被重写为两个TextBox的布局顺序，TextBox是通过调用各自的RenderContents()生成的

运行后查看界面源码

 <table id="Login1">
  <tr>
    <td><label for="Login1_txtUserName">User Name:</label></td><td><input name="Login1$txtUserName" type="text" id="Login1_txtUserName" /></td>
  </tr><tr>
    <td><label for="Login1_txtPassword">Password:</label></td><td><input name="Login1$txtPassword" type="text" id="Login1_txtPassword" /></td>
  </tr>
</table>    

可见TextBox是生成在一个表格中的。

默认的RenderContents()只调用每个子控件的RenderContents()，通过重写控件的RenderContents()可以对子控件的布局进行更多的控制

下面的代码对RenderContents()进行了改写，实现<div>对控件进行布局的，因为在Web标准中，更支持对<div>的使用

 //重写布局
        protected override void RenderContents(HtmlTextWriter writer)
        {
            writer.AddStyleAttribute("float", "left");
            writer.RenderBeginTag(HtmlTextWriterTag.Div);
            writer.AddStyleAttribute(HtmlTextWriterStyle.Padding, "3px");
            writer.RenderBeginTag(HtmlTextWriterTag.Div);
            writer.AddAttribute(HtmlTextWriterAttribute.For, txtUserName.ClientID);
            writer.RenderBeginTag(HtmlTextWriterTag.Label);
            writer.Write("User Name:");
            writer.RenderEndTag();
            writer.RenderEndTag();       
           
            writer.AddStyleAttribute(HtmlTextWriterStyle.Padding, "3px");
            writer.RenderBeginTag(HtmlTextWriterTag.Div);
            writer.AddAttribute(HtmlTextWriterAttribute.For, txtPassword.ClientID);
            writer.RenderBeginTag(HtmlTextWriterTag.Label);
            writer.Write(" Password:");
            writer.RenderEndTag();
            writer.RenderEndTag();
            writer.RenderEndTag();
           
            writer.AddStyleAttribute("float", "left");
            writer.RenderBeginTag(HtmlTextWriterTag.Div);
            writer.AddStyleAttribute(HtmlTextWriterStyle.Padding, "3px");
            writer.RenderBeginTag(HtmlTextWriterTag.Div);
            txtUserName.RenderBeginTag(writer);        
            writer.RenderEndTag();
           
            writer.RenderBeginTag(HtmlTextWriterTag.Div);
            writer.AddStyleAttribute(HtmlTextWriterStyle.Padding, "3px");
            writer.RenderBeginTag(HtmlTextWriterTag.Div);
            txtPassword.RenderBeginTag(writer);
            writer.RenderEndTag();
            writer.RenderEndTag();
            writer.Write("<br style='clear:left'/>");
        }
        protected override HtmlTextWriterTag TagKey
        {
            get { return HtmlTextWriterTag.Div; }
        }
看看页面的Html生成

 
<div id="LoginStandard1">
  <div style="float:left;">
    <div style="padding:3px;">
      <label for="LoginStandard1_txtUserName">User Name:</label>
    </div><div style="padding:3px;">
      <label for="LoginStandard1_txtPassword"> Password:</label>
    </div>
  </div>
<div style="float:left;">
       <div style="padding:3px;">
      <input name="LoginStandard1$txtUserName" type="text" id="LoginStandard1_txtUserName" /><div>
        <div style="padding:3px;">
          <input name="LoginStandard1$txtPassword" type="text" id="LoginStandard1_txtPassword" />
        </div>
<br style='clear:left'/>
  </div>
尽管如此，在标准控件中Ms还是采用了Html表格布局方式。

本篇参考了《ASP.NET 3.5(揭秘) 卷2》