下面的函数每执行一次就生成一个TextBox(其实是<input type="Text">)


   var i=0;
    function changeIt()
    {
    if(i<5)
    {
        i=i+1;
        skils='skill'+i;
        my_div.innerHTML = my_div.innerHTML +" <input type='text' id='" + skils + "'>";
    }
    else
    {
    }
    }

我们来之行它:点击以下就添加一个TB:

        <a id="addSkills" href="javascript:changeIt();">Add More</a>

好,文本框是显示出来了,但它是在客户端生成的,不能保存状态,跟服务端无法直接沟通,它们的值我们怎么来取呢?——Hidden Field,老办法。。。

        <asp:HiddenField ID="Skills" runat="server" />

    function getValues()
    {
        document.getElementById("Skills").value=document.getElementById('skill1').value+"|";
        document.getElementById("Skills").value+=document.getElementById('skill2').value+"|";
        document.getElementById("Skills").value+=document.getElementById('skill3').value+"|";
        document.getElementById("Skills").value+=document.getElementById('skill4').value+"|";
        document.getElementById("Skills").value+=document.getElementById('skill5').value+"|";
        window.alert(document.getElementById("Skills").value);
    }

这样,就把这些TEXTBox们的值存入了Hidden Field,我们在服务端取一下看看:

        <asp:Button ID="Button3" OnClientClick="javascript:getValues();" runat="server" 
            Text="get from client-side" onclick="Button3_Click"/>
    protected void Button3_Click(object sender, EventArgs e)
    {
        string val=this.Skills.Value;
        Response.Write(val);
    }

取出来了:

全部代码在此:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>     <script language="javascript" type="text/javascript">
    var i=0;
    function changeIt()
    {
    if(i<5)
    {
        i=i+1;
        skils='skill'+i;
        my_div.innerHTML = my_div.innerHTML +" <input type='text' id='" + skils + "'>";
    }
    else
    {
    }
    }
    function getValues()
    {
        document.getElementById("Skills").value=document.getElementById('skill1').value+"|";
        document.getElementById("Skills").value+=document.getElementById('skill2').value+"|";
        document.getElementById("Skills").value+=document.getElementById('skill3').value+"|";
        document.getElementById("Skills").value+=document.getElementById('skill4').value+"|";
        document.getElementById("Skills").value+=document.getElementById('skill5').value+"|";
        window.alert(document.getElementById("Skills").value);
    }
    </script> </head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:HiddenField ID="Skills" runat="server" />
        <a id="addSkills" href="javascript:changeIt();">Add More</a>
        <asp:Button ID="Button3" OnClientClick="javascript:getValues();" runat="server" 
            Text="get from client-side" onclick="Button3_Click"
           />
        <div id="my_div">
        </div>
    </div>
    </form>
</body>
</html>
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq; public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {     }
    protected void Button3_Click(object sender, EventArgs e)
    {
        string val=this.Skills.Value;
        Response.Write(val);
    }
}
 
 

ASP.NET 动态创建文本框 TextBox (add TextBox to page dynamically)的更多相关文章

  1. Asp.net中使用文本框的值动态生成控件的方法

    这篇文章主要介绍了Asp.net中使用文本框的值动态生成控件的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下 看到一个网友,有论坛上问及,动态的生成checkbox控件,在文本框中输入一个“花 ...

  2. 使用Htmlhelper,创建文本框TextBox

    下面通过HtmlHelper帮助类,创建文本框. 首先新建一个实体类,做为下面的例子: using System; using System.Collections.Generic; using Sy ...

  3. MVC动态添加文本框,后台使用FormCollection接收

    在"MVC批量添加,增加一条记录的同时添加N条集合属性所对应的个体"中,对于前台传来的多个TextBox值,在控制器方法中通过强类型来接收.使用FormCollection也可以接 ...

  4. SSRS动态设置文本框属性

    SSRS可以通过表达式动态设置文本框所有的属性,比如字体,字号,是否加粗,如下图所示: 汉字和数字英文字母占用的空间不一样,一个汉字占用两个数字和英文字母的空间,VB里有LENB取得字节数,这SSRS ...

  5. JS实现动态提示文本框可输入剩余字数(类似发表微博数字提示)

    一.实现效果: 为了更直观的体现用户在文本框输入文本时能看到自己输入了多少字,项目中需要通过判断提示文本框剩余可输入字数. html & JS: <div> <textare ...

  6. word中创建文本框

    word中创建文本框         在插入中点击"文本框"选项卡,例如以下图所看到的:        手工加入自己想要的文本框格式,然后选择所创建的文本框,在工具栏处会发现多了一 ...

  7. HTML创建文本框的3种方式

    我的第一个随笔,记录主要用来整理学习的知识点 1.input 创建单行文本框 <input type="text" size="10" maxlength ...

  8. ASP.Net动态创建GridView

    1.创建Field BoundField requestitem = new BoundField();//注意Field可以是ButtonField,TemplateField,...等等GridV ...

  9. iOS学习之根据文本内容动态计算文本框高度的步骤

    在视图加载的过程中,是先计算出frame,再根据frame加载视图的,所以在设计计算高度的方法的时候,设计成加号方法; //首先给外界提供计算cell高度的方法 + (CGFloat)heightFo ...

随机推荐

  1. UI设计,使用感知分层技术

    页面设计时使用感知分层技术:不同的元素用不同的颜色表示,让它看起来是位于独立的一层之上.人们在无意识的状态下,只会感知到自己关注的元素,将其他元素排除在意识之外.

  2. 【Django】 积累

    ■ 数据库的长连接 众所周知,数据库的长连接可以在一定程度上提高整个应用的读写效率,节省创建和销毁数据库连接的成本.Django在1.6版本之后就已经支持了长连接的设置,是在settings中的DAT ...

  3. h5 rem

    <script> (function(){ setRem(); window.addEventListener('orientation' in window?"deviceor ...

  4. JS 二维数组排序

    <script> //测试方法 var a = [ {name:'hdj', age:128}, {name:'hdj1', age:28}, {name:'hdj1', age:78}, ...

  5. 总结这两天连续干掉的bug In 创新实训 智能自然语言交流系

    临近项目合并,在pre合并中出现相当多的hug,遂记之 ps:这只是总结一下提纲,具体的方法在前文的博文中都详细记录.总结了. 平台的移植兼容性,虽然是跨平台的java,但是依旧有很多的意外: 1.从 ...

  6. 在kali linux之下安装wps之后 报错字体缺失

    启动WPS for Linux后,出现提示"系统缺失字体" . 出现提示的原因是因为WPS for Linux没有自带windows的字体,只要在Linux系统中加载字体即可. 第 ...

  7. Git 初始化项目、创建合并分支、回滚等常用方法总结

    就在刚才查看资料时候, 看见一句话, 写的特别好: 当我的才华撑不起我的梦想的时候, 应该安静下来学习 配上我最喜欢动漫的一个角色: 红莲 1. Git 初始化项目 1). 创建新的知识库 echo ...

  8. MySQL 先按某字段分组,再取每组中前N条记录

    按 gpcode每组 取每组 f4 最大的那条记录: 方法一: select * from calcgsdataflash a where gscode = 'LS_F' and ymd >= ...

  9. e606. Determining Which Component or Window Has the Focus

    // null is returned if none of the components in this application has the focus Component compFocusO ...

  10. 记一次艰难的IBM X3850重装系统和系统备份经验

    [贴心话] 刚刚把一切都搞定了,回到电脑前立马就写下的这篇文章,写的很细节,大家就耐心看看,有些细节是网上没有的,共享一下,仅供参考,以减少大家装机时遇到的困难. [面临处境] 机器型号:IBM X3 ...