如何自动添加文本框

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


可能最好的方法是将两个文本框放在用户控件中。 然后该用户控件可以封装属于两个文本框的所有逻辑; 它可以计算两个值之间的差异,例如,封装所有的验证等等等等。您只需要写一次这个位!

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

两个最重要的概念是:

  • 在适当的时间添加动态控件
  • 尝试并在回发之间维护ID,以便ASP.Net自动为ViewState填充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("MyUserControl{0}", i);          
          DynamicControlHolder.Controls.Add(control);           
      }
    
      DynamicControlCount.Value = Convert.ToString(controlCount); //Note this is problematic
    }
    

    控制第二部分的最简单方法是使用UpdatePanel。 造成这种情况的主要原因是,当您更新控件的数量时,您在页面的生命周期中做得这么晚,并且在完整回发中,该值可能无法按您期望的回发方式递增。 对于用户来说,如果整个页面没有被发回来修改其中的一小部分,它也看起来更好。

    这些只是让你开始的几个想法。 这种事情的一个很好的参考在这里:

    真正理解动态控制

    你应该仔细阅读一下,因为视图状态,页面生命周期,客户端渲染和其他因素的结合使得这是ASP.Net中最棘手但最有趣的技术之一


    如果你考虑使用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" />');
    })
    

    这将创建一个文本框,并将其添加到id="divFirstName"divdiv应该有runat="server"

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

    然后,将代码放入您的点击事件中。 (我知道我的命名很糟糕,纯粹是为了更好的理解)。

    链接地址: http://www.djcxy.com/p/83483.html

    上一篇: How to automatically add textbox

    下一篇: Add Html helpers with Jquery (Razor)