开发环境:
Microsoft Visual Studio 2005
系统:
Microsoft Windows XP SP2
一、使用 HtmlInputHidden 控件在本页面保持状态,并讨论在生成页面后通过 JavaScript 获取由HtmlInputHidden 控件生成的隐藏文本值。
先说说在本页面保持状态,我们一般采用 ViewState 可以在同一页的多个请求间保存和还原服务器控件的视图状态,这种用法一般在服务器端使用。但是如果我们需要在生成页面后(也就是说要在客户端中)的 JavaScript 函数需要使用页面保持状态的值,我们可以将这类值在服务器端处理过程中放到隐藏文本框中,然后在 JavaScript 函数中来获取隐藏文本值。
范例分别通过使用 html 服务器控件和 web 服务器控件来演示。
先简单说说 html 服务器控件和 web 服务器控件的区别。
HTML 服务器控件,服务器公开的 HTML 元素,可以通过添加 runat="server" 属性表明应将 HTML 元素作为服务器控件进行处理,还可以设置元素的 id 属性,可以通过编程方式引用控件,可以通过设置属性 (Attribute) 来声明服器控件实例上的属性 (Property) 参数和事件绑定。HTML 服务器控件公开一个对象模型,该模型十分紧密地映射到相应控件所呈现的 HTML 元素。[1]
Web 服务器控件,它比 HTML 服务器控件具有更多内置功能。Web 服务器控件不仅包括窗体控件(例如按钮和文本框),而且还包括特殊用途的控件(例如日历、菜单和树视图控件)。Web 服务器控件与 HTML 服务器控件相比更为抽象,因为其对象模型不一定反映 HTML 语法。[1]
(1)使用 html服务器控件演示
Test.aspx 代码如下:
<%
...
@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test"
%>
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
runat
="server"
>
<
title
>
无标题页
</
title
>
</
head
>
<
body
>
<
form
id
="form1"
runat
="server"
>
<
div
>
<
input
id
="HiddenValue"
type
="hidden"
value
="初始化的值为空"
runat
="server"
/>
<
br
/>
<
input
id
="txtTestValue"
type
="text"
runat
="server"
/><
br
/>
<
span
id
="Span1"
runat
="server"
>
标签:用来显示上一次隐藏文本框的值,完成保持页面状态的值功能
<
br
/>
</
span
>
<
input
id
="Submit1"
type
="submit"
value
="改变隐藏文本的值"
runat
="server"
onserverclick
="Submit1_ServerClick"
/>
<
input
id
="Button2"
onclick
="GetHideValue();"
type
="button"
value
="获得隐藏文本的值"
/></
div
>
</
form
>
</
body
>
</
html
>
Test.aspx.cs 代码如下:
using
System;
using
System.Data;
using
System.Configuration;
using
System.Collections;
using
System.Web;
using
System.Web.Security;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Web.UI.WebControls.WebParts;
using
System.Web.UI.HtmlControls;
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
public
partial
class
Test : System.Web.UI.Page
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
protected void Page_Load(object sender, EventArgs e)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
string csName = "TextScript";
Type csType = this.GetType();
ClientScriptManager cs = Page.ClientScript;
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
// 检查是否脚本是否已经被注册
if (!cs.IsStartupScriptRegistered(csType, csName))
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
string csText = @"function GetHideValue()
{
var obj = document.getElementById(""" + HiddenValue.ClientID + @""");
var str = obj.value;
alert(str);
}";
cs.RegisterStartupScript(csType, csName, csText, true);
}
if (Page.IsPostBack)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
Span1.InnerHtml = "保存上一次的值: <b>" +
HiddenValue.Value + "</b>";
}
}
protected void Submit1_ServerClick(object sender, EventArgs e)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
HiddenValue.Value = txtTestValue.Value;
}
}
(2)使用 web 服务器控件来演示
TestWebControl.aspx 代码如下:
<%
...
@ Page Language="C#" AutoEventWireup="true" CodeFile="TestWebControl.aspx.cs" Inherits="TestWebControl"
%>
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
runat
="server"
>
<
title
>
无标题页
</
title
>
</
head
>
<
body
>
<
form
id
="form1"
runat
="server"
>
<
div
>
<
input
id
="HiddenValue"
runat
="server"
type
="hidden"
value
="初始化的值为空"
/><
br
/>
<
asp:TextBox
ID
="txtTestValue"
runat
="server"
></
asp:TextBox
><
br
/>
<
span
id
="Span1"
runat
="server"
>
标签:用来显示上一次隐藏文本框的值,完成保持页面状态的值功能.
</
span
><
br
/>
<
asp:Button
ID
="Button1"
runat
="server"
Text
="改变隐藏文本的值"
OnClick
="Button1_Click"
/>
<
input
id
="Button2"
type
="button"
value
="获得隐藏文本的值"
onclick
="GetHideValue();"
/>
</
div
>
</
form
>
</
body
>
</
html
>
TestWebControl.aspx.cs 代码如下:
using
System;
using
System.Data;
using
System.Configuration;
using
System.Collections;
using
System.Web;
using
System.Web.Security;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Web.UI.WebControls.WebParts;
using
System.Web.UI.HtmlControls;
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
public
partial
class
TestWebControl : System.Web.UI.Page
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
protected void Page_Load(object sender, EventArgs e)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
string csName = "TextScript";
Type csType = this.GetType();
ClientScriptManager cs = Page.ClientScript;
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
// 检查是否脚本是否已经被注册
if (!cs.IsStartupScriptRegistered(csType, csName))
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
string csText = @"function GetHideValue()
{
var obj = document.getElementById(""" + HiddenValue.ClientID + @""");
var str = obj.value;
alert(str);
}";
cs.RegisterStartupScript(csType, csName, csText, true);
}
if (Page.IsPostBack)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
Span1.InnerHtml = "保存上一次的值: <b>" +
HiddenValue.Value + "</b>";
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
protected void Button1_Click(object sender, EventArgs e)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
HiddenValue.Value = txtTestValue.Text;
}
}
二、使用 HtmlInputHidden 控件跨页面传值
通过指定服务器控件 Button 的 PostBackUrl属性可以提交到指定的页面。在该方式下,既然提到跨页面传值,除了使用 HtmlInputHidden 控件跨页面传值,范例中还提供其他四种传值方式!非通过指定服务器控件 Button 的 PostBackUrl属性跨页面传值的其他方式见:http://blog.csdn.net/scucj/archive/2006/07/17/932884.aspx
源页面:
FormerPage.aspx 代码如下:
<%
...
@ Page Language="C#" AutoEventWireup="true" CodeFile="FormerPage.aspx.cs" Inherits="FormerPage"
%>
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
runat
="server"
>
<
title
>
无标题页
</
title
>
</
head
>
<
body
>
<
form
id
="form1"
runat
="server"
>
<
div
>
<
input
id
="HiddenValue"
runat
="server"
type
="hidden"
value
="初始化的值为空"
/><
br
/>
<
asp:TextBox
ID
="txtTestValue"
runat
="server"
></
asp:TextBox
><
br
/>
<
asp:Button
ID
="Button1"
runat
="server"
OnClick
="Button1_Click"
PostBackUrl
="~/DestinationPage.aspx"
Text
="改变隐藏文本的值"
/>
</
div
>
</
form
>
</
body
>
</
html
>
FormerPage.aspx.cs 代码如下:
using
System;
using
System.Data;
using
System.Configuration;
using
System.Collections;
using
System.Web;
using
System.Web.Security;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Web.UI.WebControls.WebParts;
using
System.Web.UI.HtmlControls;
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
public
partial
class
FormerPage : System.Web.UI.Page
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
public string TestValue
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
get
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
return this.txtTestValue.Text;
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
protected void Page_Load(object sender, EventArgs e)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
}
protected void Button1_Click(object sender, EventArgs e)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
HiddenValue.Value = txtTestValue.Text;
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
ArrayList myList = new ArrayList(3);//创建动态数组
myList.Add("Hello,Array1! ");//向动态数组中添加新的值
myList.Add("Hello,Array2!");
myList.Add("Hello,Array3!");
//Context可保存任意数据类型,Context字典特定于某个Http请求。
//对于不同客户端,值是不一样的。
Context.Items["destinationList"] = myList;//在Context.Items中保存动态数组
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
Context.Items.Add("newContext", "Hello,NewContext");//在Context.Items中保存一组名称-值的数据
}
}
目标页面:
DestinationPage.aspx 代码如下:
<%
...
@ Page Language="C#" AutoEventWireup="true" CodeFile="DestinationPage.aspx.cs" Inherits="DestinationPage"
%>
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
<%
...
@ PreviousPageType VirtualPath="~/FormerPage.aspx"
%>
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
runat
="server"
>
<
title
>
无标题页
</
title
>
</
head
>
<
body
>
<
form
id
="form1"
runat
="server"
>
<
div
>
</
div
>
</
form
>
</
body
>
</
html
>
DestinationPage.aspx.cs 代码如下:
using
System;
using
System.Data;
using
System.Configuration;
using
System.Collections;
using
System.Web;
using
System.Web.Security;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Web.UI.WebControls.WebParts;
using
System.Web.UI.HtmlControls;
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
public
partial
class
DestinationPage : System.Web.UI.Page
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
protected void Page_Load(object sender, EventArgs e)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if (Page.PreviousPage != null)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
//通过隐藏文本框传递值
HtmlInputHidden htmlInputHidden = (HtmlInputHidden)Page.PreviousPage.FindControl("HiddenValue");
if (htmlInputHidden != null)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
string htmlInputHiddenValue = htmlInputHidden.Value;
Response.Write("<script language='javascript'>alert('传递过来的值:" + htmlInputHiddenValue + "');</script>");
}
//通过服务器控件传递值
TextBox tb = (TextBox)Page.PreviousPage.FindControl("txtTestValue");
if (tb != null)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
string testValue1 = tb.Text;
}
string testValue2 = PreviousPage.TestValue;//通过属性跨页面传递值
string contextItemsValue = Context.Items["newContext"].ToString();//通过FormerPage中Context的Items获取值
ArrayList listResult = (ArrayList)Context.Items["destinationList"];//通过FormerPage中Context的Items获取对象,强制转换类型:
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
}
}
}
本文引用:
[1] MSDN 服务器控件