如何自动添加文本框

Posted 2023-02-22

【中文标题】如何自动添加文本框

【英文标题】：How to automatically add textbox

【发布时间】：2012-03-17 18:39:58

【问题描述】：

我有这 8 个文本框，但是当我开始认为它在我的页面上非常混乱时。所以，我在想如何实现一个按钮，当用户点击它时可以添加文本框。这里有没有人有想法或解决方案可以帮助我？我会很感激的。谢谢。

【问题讨论】：

Jquery - Create hidden form element on the fly 的可能重复项。还是你想要它的服务器端？然后以here 为例。

试试看这里：***.com/questions/4630095/…

如果可能的话，我希望按钮生成两个文本框。 1 表示费用类型，另外 1 表示价格。 tq

你想用javascript完成吗？或者您可以接受回发并使其成为服务器端吗？

我更喜欢回发。我使用 javascript 标签是因为大多数自动生成的文本框都使用了 java。谢谢

【参考方案1】：

执行此操作的最佳方法可能是将两个文本框都放在用户控件中。然后，此用户控件可以封装属于两个文本框的所有逻辑；它可以计算两个值之间的差异，例如，封装所有的验证等等等等。你只需要写一次！

在页面中添加占位符；给它一个“DynamicControlHolder”或类似的ID。您还需要一个隐藏字段 - DynamicControlCount - 您可以使用它来存储您添加的动态控件的数量。

两个最重要的概念是：

在right 时间添加dynamic controls 试试maintain id 在回发之间，因此 ASP.Net 自动填充值 从 ViewState 为您服务。否则，你将不得不管理这个 自己。

所以，当页面第一次加载时，你可以在Page_Init中做如下的事情，例如：

  MyUserControl control = Page.LoadControl("~/path_to_my_usercontrol");
  control.ID = "MyUserControl1";
  DynamicControlCount.Value = "1";

  DynamicControlHolder.Controls.Add(control);

如果您的页面上有一个按钮“添加控件”，那么在点击处理程序中：

  int controlCount = Convert.ToInt32(DynamicControlCount.Value);
  controlCount++;

  //This section will add as many controls as i.
  for(i = 1; i <= controlCount; i++)
  
      MyUserControl control = Page.LoadControl("~/path_to_my_usercontrol");
      control.ID = String.Format("MyUserControl0", i);          
      DynamicControlHolder.Controls.Add(control);           
  

  DynamicControlCount.Value = Convert.ToString(controlCount); //Note this is problematic

控制第二部分的最简单方法是使用UpdatePanel。这样做的主要原因是，当您更新您拥有的控件计数时，您是在页面生命周期的后期执行此操作，并且在完整的回发中，该值可能不会以您期望的回发方式增加。如果整个页面不只是为了修改它的一小部分而发回，它对用户来说也看起来更好。

这些只是帮助您入门的一些想法。这种事情的一个很好的参考是在这里：

Truly Understanding Dynamic Controls

您应该阅读相关内容，因为视图状态、页面生命周期、客户端呈现和其他因素的组合使得它成为 ASP.Net 中最棘手但最有趣的技术之一

【参考方案2】：

如果您考虑使用 jquery，事情可能非常简单：

<div id="text_box_container"> </div>

<input type="button" value="text box inserter" id="text_box_inserter" />

现在是 javascript/jquery 部分

$('#text_box_inserter').click(function()
    $('#text_box_container').append('<input type="text" />');
)

【参考方案3】：

这将创建一个文本框并将其添加到带有id="divFirstName" 的div。 div 应该有 runat="server"

TextBox tbFirstName = new TextBox();
tbFirstName.ID = "tbFirstName";
tbFirstName.Attributes.Add("Name", "tbFirstName");

divFirstName.Controls.Add(tbFirstName);

然后只需将代码放在您的点击事件中。 （我知道我的命名很烂，纯粹是为了更好地理解）。

【讨论】：

谢谢。但是我可以知道，在点击事件中添加什么吗？

我不确定我理解你的意思。如果您有一个应该添加更多文本框的按钮，那么只需将上面的代码放在按钮的单击事件方法中。如果我现在让您感到困惑，请告诉我，我将编辑我的原始答案。

大声笑。我想，也许我应该睡一觉。我只是花了大约 8 个小时在我的笔记本电脑上毫无头绪地主演。但无论如何，谢谢！一旦我尝试了你的编码就会更新:)