站长论坛

标题: Asp.net关于动态输出服务器控件的应用 [打印本页]

作者: superadmin 时间: 2009-4-11 12:53
标题: Asp.net关于动态输出服务器控件的应用
使用Asp.net进行开发时，因为某些需求原因，需要在页面中动态添加控件。当然，这些控件可以是普通的html标签，也可以是Asp.net独有的服务器端控件。关于动态写入html标签控件，大家都熟悉，这里就不再表述。本文讨论的重点是：如何动态写入服务器端控件，并且在页面PostBack到Server端时，在Server端来获取被动态写入的服务器端控件的各种属性。

这里，我来通过一个Demo来说明这个应用。

需求：

1. 用户在UI上输入一个数值(比如：5)，系统动态为用户加载这个数值的Url Address输入域;

2. 用户输入的Url Address内容需要通过Url格式验证;

3. 用户提交输入内容后，系统给出提交的结果

设计如下：

1. Css样式设置：

  <style type="text/css">

      .item
      {
      margin:10px;
      border-bottom:solid 1px #CCC;
      }

      .item2
      {
      margin:5px;
      }

      .input
      {
      width:200px;
      }
</style>
2．前台页面代码：
      <div>
         <div class="item">
            Please input a number:
            <asp:TextBox runat="server" CssClass="item" ID="txtTextCount"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtTextCount" ValidationGroup="CreateTextBox" Display="Dynamic"
                  ErrorMessage="Required to input content!"></asp:RequiredFieldValidator>
            <asp:RegularExpressionValidator ID="RegularExpressionValidator1" ControlToValidate="txtTextCount" ValidationGroup="CreateTextBox" Display="Dynamic"
                  runat="server" ErrorMessage="Only number is valid!" ValidationExpression="^\d+$"></asp:RegularExpressionValidator>  
            <asp:Button runat="server" ID="btnCreate" Text="Create TextBox List" ValidationGroup="CreateTextBox"
                  onclick="btnCreate_Click" />  
            <asp:Button runat="server" ID="btnOK" Text="Get TextBox Content" ValidationGroup="ShowListContent"
                  onclick="btnOK_Click" />
         </div>
         <div runat="server" id="divControls" class="item"></div>
         <div runat="server" id="divMessage">
         </div>
      </div>

2．前台页面代码：

   <div>

         <div class="item">
            Please input a number:
            <asp:TextBox runat="server" CssClass="item" ID="txtTextCount"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtTextCount" ValidationGroup="CreateTextBox" Display="Dynamic"
                  ErrorMessage="Required to input content!"></asp:RequiredFieldValidator>
            <asp:RegularExpressionValidator ID="RegularExpressionValidator1" ControlToValidate="txtTextCount" ValidationGroup="CreateTextBox" Display="Dynamic"
                  runat="server" ErrorMessage="Only number is valid!" ValidationExpression="^\d+$"></asp:RegularExpressionValidator>  
            <asp:Button runat="server" ID="btnCreate" Text="Create TextBox List" ValidationGroup="CreateTextBox"
                  onclick="btnCreate_Click" />  
            <asp:Button runat="server" ID="btnOK" Text="Get TextBox Content" ValidationGroup="ShowListContent"
                  onclick="btnOK_Click" />
         </div>
         <div runat="server" id="divControls" class="item"></div>
         <div runat="server" id="divMessage">
         </div>
      </div>

说明，动态创建的TextBox们将装载到divControls中。

3．后台代码：

   ///<summary>

      /// Create textbox list
      ///</summary>
      ///<param name="num">textbox list count</param>
      private void CreateTextBoxList(int num)
      {
         HtmlGenericControl div;
         HtmlGenericControl span;
         TextBox txt;
         RegularExpressionValidator rev;

         for (int i = 0; i < num; i++)
         {
            //创建div
            div = new HtmlGenericControl();
            div.TagName = "div";
            div.ID = "divTextBox" + i.ToString();
            div.Attributes["class"] = "item2";

            //创建span
            span = new HtmlGenericControl();
            span.ID = "spanTextBox" + i.ToString();
            span.InnerHtml = "Url Address" + (i+1).ToString() + ":";

            //创建TextBox
            txt = new TextBox();
            txt.ID = "txt" + i.ToString();
            txt.CssClass = "input";

            //创建格式验证控件，并且将其关联到对应的TextBox
            rev = new RegularExpressionValidator();
            rev.ID = "rev" + i.ToString();
            rev.ControlToValidate = txt.ID;
            rev.Display = ValidatorDisplay.Dynamic;
            rev.ValidationGroup = "ShowListContent";
            rev.ValidationExpression = @"(http(s)?://)?([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?";
            rev.ErrorMessage = "Invalid url Address!";

            //添加控件到容器
            div.Controls.Add(span);
            div.Controls.Add(txt);
            div.Controls.Add(rev);
            divControls.Controls.Add(div);
         }
      }

      protected void Page_Load(object sender, EventArgs e)
      {
         if (this.IsPostBack)
         {
            int txtCount = int.Parse(txtTextCount.Text);

            // 注意：每次PostBack时，都需要重新动态创建TextBox
            CreateTextBoxList(txtCount);
         }
      }

      protected void btnCreate_Click(object sender, EventArgs e)
      {
         txtTextCount.Enabled = false;
         btnCreate.Enabled = false;
      }

      protected void btnOK_Click(object sender, EventArgs e)
      {
         TextBox txt;
         StringBuilder sbResult = new StringBuilder() ;
         int txtCount = int.Parse(txtTextCount.Text);

         //遍历获取动态创建的TextBox们中的Text值
         for (int i = 0; i < txtCount; i++)
         {
            //注意：这里必须通过上层容器来获取动态创建的TextBox，才能获取取ViewState内容
            txt = divControls.FindControl("txt" + i.ToString()) as TextBox;

            if (txt != null && txt.Text.Trim().Length > 0)
            {
                  sbResult.AppendFormat("Url Address{0}: {1}.<br />", i+1, txt.Text.Trim());
            }
         }

         divMessage.InnerHtml = sbResult.ToString();
      }

4.    效果图：

欢迎光临站长论坛 (http://www.tzlink.com/bbs/)