经常我们在开发中可能需要动态创建一些控件,如果动态创建web控件又很麻烦,本文介绍给你如何利用JS创建html控件并在后台取值,废话少说,上菜:
Code1
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GetHtmlCtrValue.aspx.cs"2
Inherits="RoadShow.Web.GetHtmlCtrValue" %>3
4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">5
<html xmlns="http://www.w3.org/1999/xhtml">6
<head runat="server">7
<title>无标题页</title>8
9
<script language="javascript" type="text/javascript">10
function CreateInputTxt()11
{12
document.getElementById("Count").value++;13
var i=0;14
if(i<5)15
{16
i++;17
div1.innerHTML=div1.innerHTML + "<input type='text' name='text"+i+"' style='270px;' MaxLength='20' ><br>";18
} 19
if(i>6)20
{21
alert("选项不应超过6个");22
} 23
}24
</script>25
26
</head>27
<body>28
<form id="form1" runat="server">29
<div id="div1">30
<input type="text" name="txtFile" />31
<a href="javascript:CreateInputTxt();">添加新的text</a>32
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />33
</div>34
<asp:HiddenField ID="Count" runat="server" Value="0" />35
</form>36
</body>37
</html>38
后台代码:
Code1
using System;2
using System.Collections;3
using System.Configuration;4
using System.Data;5
using System.Linq;6
using System.Web;7
using System.Web.Security;8
using System.Web.UI;9
using System.Web.UI.HtmlControls;10
using System.Web.UI.WebControls;11
using System.Web.UI.WebControls.WebParts;12
using System.Xml.Linq;13
14
namespace RoadShow.Web15
{16
public partial class GetHtmlCtrValue : System.Web.UI.Page17
{18
protected void Page_Load(object sender, EventArgs e)19
{ 20
21
}22
23
protected void Button1_Click(object sender, EventArgs e)24
{ 25
//获得text的个数26
int i = int.Parse(this.Count.Value);27
//Response.Write(i);28
//定义个数组,用来接受text的值29
string[] strArray = new string[i];30
for (int j = 0; j < i; j++)31
{ 32
strArray[j] = Request.Form["text" +(j+1)]; 33
34
}35
foreach (string str in strArray)36
{37
//测试strArray里有没有值38
Response.Write(str);39
}40
//for (i = 1; i < 6; i++)41
//{42
// Response.Write(Request.Form["text" + i]);43
//}44
}45
}46
}47