Ajax动态添加文本框

 

之前看很多文章都是在Page_load中动态添加组件，但是我需要在网页表单填写时添加。

使用js不是不可以，但是笔者是个偏执狂，既然在学Ajax，就想一定要证明Ajax的实力。。。

使用Ajax添加控件最大的麻烦在于动态生成的控件会在回发时消失T_T，受到某篇文章的启发，使用Request.Params[]可以很好的解决这个困境。

废话少说，代码如下：

protected void add(object sender, EventArgs e)
    {
        add_line("sss");
    }
protected void add_line(string name)
    {
        HtmlGenericControl div = (HtmlGenericControl)this.FindControl("ddd");
        int i = 1, flag = 0;
        if (Request.Params["sss0"] == "")
            flag = 1;
        for (i = 1; Request.Params["sss" + i] != null; i++)
        {
            TextBox tbx = new TextBox();
            tbx.ID = name + i;
            tbx.TabIndex = 24;
            tbx.Text = Request.Params["sss" + i];
            if (tbx.Text == "")
                flag = 1;

            Literal r = new Literal();
            r.Text = "<br />";
            div.Controls.AddAt(i * 2, r);

            div.Controls.AddAt(i * 2 + 1, tbx);
        }

        if (flag == 0)
        {
            TextBox tbx = new TextBox();
            tbx.ID = name + i;
            tbx.TabIndex = 24;

            Literal r = new Literal();
            r.Text = "<br/>";
            div.Controls.AddAt(i * 2, r);

            div.Controls.AddAt(i * 2 + 1, tbx);
        }
    }

 

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <div id="ddd" runat="server">
                    <asp:TextBox ID="sss0" runat="server"></asp:TextBox>
                    <br />
                <asp:Button ID="Button1" runat="server" Text="+" OnClick="add"></asp:Button></div>
            </ContentTemplate>
        </asp:UpdatePanel>

另外附上js的解决版本

function add_line(name)
    {
        var i=0;
        for(i=0;document.getElementById(name+i)!=null;i++)
        {}
        
        var element1=document.createElement("input");
        element1.type="text";
        element1.className="txtbx";
        element1.id=name+i;
        var element2=document.createElement("br");
        var refChild=document.getElementById('Button1');
        var div1=document.getElementById('ddd');
        div1.insertBefore(element2,refChild);
        div1.insertBefore(element1,refChild);
    }