自定义控件的构建(4)

最新推荐文章于 2024-06-03 18:31:31 发布

cqujfclnu90923045

最新推荐文章于 2024-06-03 18:31:31 发布

阅读量81

点赞数

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

构建混合控件

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

 namespace MyCompositeControls

///

    /// 构建混合控件

///

    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()进行了改写，实现

对控件进行布局的，因为在Web标准中，更支持对

的使用

 //重写布局

        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("
");

        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》

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/25284529/viewspace-684566/，如需转载，请注明出处，否则将追究法律责任。

请登录后发表评论登录

全部评论

<%=items[i].createtime%>

<%=items[i].content%>

<%if(items[i].items.items.length) { %>

<%for(var j=0;j

<%=items[i].items.items[j].createtime%> 回复

<%}%> <%if(items[i].items.total > 5) { %>

还有<%=items[i].items.total-5%>条评论 ) data-count=1 data-flag=true>点击查看

<%}%>

转载于:http://blog.itpub.net/25284529/viewspace-684566/

关注