需要动态生成文本框和删除按钮

Question

当我点击添加按钮时，我需要有文本框及其删除按钮。最后，当我点击动态生成的删除按钮时，

它必须在asp.net c ###

中删除其相应的文本框和按钮本身

  `     <div id="TextBoxContainer">
              <asp:panel ID="panel1" runat="server">  </asp:panel>
                            <div class="clearfix"></div>
         </div>

       =========================this is Aspx page which include Master 
        Page==========

         ************Now Aspx.cs (Code Behind) Page)Code********************


public partial class AddControl : System.Web.UI.Page
    {
       public static int buttonclick = 0;
   protected void btnSubmt_Click(object sender, EventArgs e)
        {
           buttonclick++;
           int count = buttonclick;
        int Total = Convert.ToInt32(count.ToString());
        int i;
        int j = 0;
        for (i = 0; i < Total; i++)
        {
            TextBox tb = new TextBox();
            tb.ID = i.ToString();
            panel1.Controls.Add(tb);

            Button btn = new Button();
            btn.Text = "Remove";
            btn.Click += new System.EventHandler(btn_Click); 
            panel1.Controls.Add(btn);
            j++;
        }
    }
    protected void btn_Click(object sender, EventArgs e)
    {

    }
} 

Answer 1

您正在使用网络表单。这将使这非常乏味。原因是，因为服务器将呈现您的内容，但除非文本框的每个“添加”或“删除”都可以在跟踪提供的文本框集合时执行回发，否则将创建一个笨重甚至断开连接的界面。

我建议的路线，完整的客户端代码并呈现JavaScript模板以插入代码。

<div>
     <input type="button" onclick="createField();">Create</input>
     <div data-rel="template-container">
          <input type="text" data-rel="appended-field" />
          <input type="button" onclick="removeField(this)">Button</input>
     </div>

     <input type="button" onclick="submitTextbox();">Submit</input>
</div>

<script id="dynamic-textbox" type="text/template">
     <div data-rel="template-container">
          <input type="text" data-rel="appended-field" />
          <input type="button" onclick="removeField(this)">Button</input>
     <div>
</script>

<script type="text/javascript">
     function createField() {
          var template = $('#dynamic-textbox').html();
          $('[data-rel="template-container"]').append(template);
     }

     function removeField(element) {
         element.parent('[data-rel="template-container"]').toggle();
     }

     function submitTextbox() {
         var textboxes = $('[data-rel="appended-field"]).val();
         // Push to web-service, and save to database.
     }
</script>

您要推送到Web服务的原因，因为如果Web表单没有进行回发并且您从后面的代码手动创建文本框，那么它将不会将其附加到表单。

这种方法将在代码隐藏和前端之间保留一层抽象。当您与他们合作时，前端开发人员会欣赏这一点。

Answer 2

由于您的要求否定了JavaScript，您可以通过以下方式执行此操作：

<asp:UpdatePanel id="upContent" runat="server">
     <ContentTemplate>
          <asp:Button id="btnCreateTextbox" runat="server" onclick="btnCreateTextbox_Click" Text="Create"></asp:Button>
          <asp:Repeater id="rpFormField" runat="server" ClientIdMode="Static">
               <ItemTemplate>
                    <asp:Textbox id='<% Eval("Name") %>' runat="server" />
                    <asp:LinkButton id='btnDelete' runat="server" onclick='btnRemoveField_Click' CommandArgument='<% Eval(Name) %>'>Remove Field</LinkButton>
               </ItemTemplate>
          </asp:Repeater>
     </ContentTemplate>
</asp:UpdatePanel>

protected void btnCreateTextbox_Click(object sender, EventArgs e)
{
     int counter = 1;
     foreach(RepeaterItem item in rptFormField.Items)
     {
          var collection = new List<string>();
          Textbox textbox = (Textbox)item.FindControl("txtField");
          while(textbox != null)
          {
              collection.Add(textbox.Id);
              textbox = (Textbox)item.FindControl($"txtField-{counter}");
              counter++;
          }

          collection.Add($"txtField-{counter}");

          rpFormField.DataSource = collection;
          rpFormField.DataBind();
     } 
}

protected void btnRemoveField_Click(object sender, EventArgs e)
{
     var collection = new List<string>();
     foreach(RepeaterItem item in rptFormField.Items)
          collection.Add(item.Id);

     string item = ((LinkButton)e).CommandArgument;
     collection.Remove(item);

     rpFormField.DataSource = collection;
     rpFormField.DataBind();
}

代码可能有一些错误，因为我没有验证它。特别是Eval("Name")区域。另外，您需要在页面加载中实际设置初始内容/数据绑定，并确保存在!Postback逻辑。假设完成所有代码是直截了当的。

每次点击“创建”按钮或删除时，它实质上都会重新填充转发器以将内容绑定到页面。

Answer 3

   public partial class _Default : System.Web.UI.Page
   {

    protected void Page_Init(object sender, EventArgs e)
    {
        List<string> keys = Request.Form.AllKeys.Where(key => 
        key.Contains("txtDynamic")).ToList();
        int i = 1;
        foreach (string key in keys)
        {
            this.CreateTextBox("Dynamic" + i);
            i++;
        }
    }


    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void btnDefault_Click(object sender, EventArgs e)
    {
        int index = plc.Controls.OfType<TextBox>().ToList().Count + 1;
        this.CreateTextBox("Dynamic" + index);
        btnValue.Visible = true;
    }

    private void CreateTextBox(string id)
    {
        TextBox txt = new TextBox();
        txt.ID = "txt" + id;
        plc.Controls.Add(txt);

        Button btn = new Button();
        btn.ID = "btn" + id;
        btn.Text = "Remove";
        btn.Click += new EventHandler(dynamicButton_Click);
        plc.Controls.Add(btn);

        Literal lt = new Literal();
        lt.Text = "<br />";
        plc.Controls.Add(lt);
    }

    protected void dynamicButton_Click(object sender, EventArgs e)
    {
        Button button = sender as Button;
        string id = button.ID;
        string controlID = id.Substring(10, id.Length - 10);
        Control ctlTextbox = plc.FindControl("txtDynamic" + controlID);
        plc.Controls.Remove(ctlTextbox);

        Control ctlButton = plc.FindControl("btnDynamic" + controlID);
        plc.Controls.Remove(ctlButton);
    }

    protected void btnValue_Click(object sender, EventArgs e)
    {
        string message = "";
        foreach (TextBox textBox in plc.Controls.OfType<TextBox>())
        {
                message += textBox.ID + " : " + textBox.Text + "<br>";
        }
        lblMessage.Text = message;
    }


}