码迷,mamicode.com
首页 > Web开发 > 详细

ASP.NET 动态创建文本框 TextBox (add TextBox to page dynamically)

时间:2015-08-21 21:24:48      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:

 

下面的函数每执行一次就生成一个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)

标签:

原文地址:http://www.cnblogs.com/armyfai/p/4748933.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!