zoukankan      html  css  js  c++  java
  • Asp.net关于动态输出服务器控件的应用

        使用Asp.net进行开发时,因为某些需求原因,需要在页面中动态添加控件。当然,这些控件可以是普通的html标签,也可以是Asp.net独有的服务器端控件。关于动态写入html标签控件,大家都熟悉,这里就不再表述。本文讨论的重点是:如何动态写入服务器端控件,并且在页面PostBackServer端时,在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>&nbsp;&nbsp;

                    <asp:Button runat="server" ID="btnCreate" Text="Create TextBox List" ValidationGroup="CreateTextBox"

                        onclick="btnCreate_Click" />&nbsp;&nbsp;

                    <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- ./?%&amp;=]*)?";

                    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.       效果图:

    5. 源码下载:https://files.cnblogs.com/Langzi127/WebApplication1.zip

  • 相关阅读:
    checkbox美化
    JS 之简单计算器
    python实现简单用户认证和角色制授权
    搭建高性能web服务
    纯JS实现fadeIn 和fadeOut
    纯CSS实现气泡框
    javascript之对象(二)&& 继承问题
    JavaScript之对象(一)
    Web发展史
    [LeetCode 256] Paint House
  • 原文地址:https://www.cnblogs.com/Langzi127/p/1432018.html
Copyright © 2011-2022 走看看