Ajax动态添加文本框

 

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

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

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

废话少说，代码如下：

后台代码

 1 protected void add(object sender, EventArgs e)
 2     {
 3         add_line("sss");
 4     }
 5 protected void add_line(string name)
 6     {
 7         HtmlGenericControl div = (HtmlGenericControl)this.FindControl("ddd");
 8         int i = 1, flag = 0;
 9         if (Request.Params["sss0"] == "")
10             flag = 1;
11         for (i = 1; Request.Params["sss" + i] != null; i++)
12         {
13             TextBox tbx = new TextBox();
14             tbx.ID = name + i;
15             tbx.TabIndex = 24;
16             tbx.Text = Request.Params["sss" + i];
17             if (tbx.Text == "")
18                 flag = 1;
19 
20             Literal r = new Literal();
21             r.Text = "<br />";
22             div.Controls.AddAt(i * 2, r);
23 
24             div.Controls.AddAt(i * 2 + 1, tbx);
25         }
26 
27         if (flag == 0)
28         {
29             TextBox tbx = new TextBox();
30             tbx.ID = name + i;
31             tbx.TabIndex = 24;
32 
33             Literal r = new Literal();
34             r.Text = "<br/>";
35             div.Controls.AddAt(i * 2, r);
36 
37             div.Controls.AddAt(i * 2 + 1, tbx);
38         }
39     }

 

前台代码

1 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
2             <ContentTemplate>
3                 <div id="ddd" runat="server">
4                     <asp:TextBox ID="sss0" runat="server"></asp:TextBox>
5                     <br />
6                 <asp:Button ID="Button1" runat="server" Text="+" OnClick="add"></asp:Button></div>
7             </ContentTemplate>
8         </asp:UpdatePanel>

另外附上js的解决版本

js

 1 function add_line(name)
 2     {
 3         var i=0;
 4         for(i=0;document.getElementById(name+i)!=null;i++)
 5         {}
 6         
 7         var element1=document.createElement("input");
 8         element1.type="text";
 9         element1.className="txtbx";
10         element1.id=name+i;
11         var element2=document.createElement("br");
12         var refChild=document.getElementById('Button1');
13         var div1=document.getElementById('ddd');
14         div1.insertBefore(element2,refChild);
15         div1.insertBefore(element1,refChild);
16     }

 

转载于:https://www.cnblogs.com/Sue2013/archive/2013/05/02/3055025.html