ASPNET服务器控件和客户端脚本_aspnet小脚本-CSDN博客

ASPNET服务器控件和客户端脚本（三）（转载）(2008-08-23 09:43:58) 标签：杂谈分类：学习类在上面的输出中,指定的脚本的确包含在ASP.NET的页面代码之前.不仅包含标记,还在脚本外部添加了适当的注释标记(这样旧式浏览器就不会崩溃). 4.4.2 使用Page.ClientScript.RegisterStartupScript RegisterStartupScript方法与RegisterClientScriptBlock方法的区别不大.最大的区别是RegisterStartupScript把脚本放在ASP.NET页面的底部,而不是顶部.实际上,RegisterStartup Script方法甚至使用与RegisterClientScriptBlock方法相同的构造函数: RegisterStartupScript (type,key,script) RegisterStartupScript (type,key,script,script tag specification) 那么,在页面上注册脚本的过程有什么区别实际上区别很大! 如果在页面上有一些处理控件的JavaScript,在大多数情况下应使用RegisterStartupScript方法,而不是RegisterClientScriptBlock方法.例如,应使用下面的代码创建一个包含控件的页面,该控件包含默认值Hello ASP.NET: Hello ASP.NET 然后使用RegisterClientScriptBlock方法把脚本放在页面上,利用TextBox1控件中的值,如程序清单4-11所示. 程序清单4-11 不正确地使用RegisterClientScriptBlock方法 VB Protected Sub Page_Load(ByVal sender As Object,ByVal e As System.EventArgs) Dim myScript As String = "alert(document.forms[0]['TextBox1'].value);" Page.ClientScript.RegisterClientScriptBlock(Me.GetType(),"myKey",myScript,-_ True) End Sub C# protected void Page_Load(object sender,EventArgs e) { string myScript = @"alert(document.forms[0]['TextBox1'].value);"; Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "MyScript",myScript,true); } 运行这个页面,会产生一个JavaScript错误,如图4-11所示. 图 4-11 出错的原因是JavaScript函数在文本框放置在屏幕之前触发.所以,JavaScript函数没有找到TextBox1,导致页面抛出一个错误.现在试用RegisterStartupScript方法,如程序清单4-12所示. 程序清单4-12 使用RegisterStartupScript方法 VB Protected Sub Page_Load(ByVal sender As Object,ByVal e As System.EventArgs) Dim myScript As String = "alert(document.forms[0]['TextBox1'].value);" Page.ClientScript.RegisterStartupScript(Me.GetType(),"myKey",myScript,_ _ True) End Sub C# protected void Page_Load(object sender,EventArgs e) { string myScript = @"alert(document.forms[0]['TextBox1'].value);"; Page.ClientScript.RegisterStartupScript(this.GetType(), "MyScript",myScript,true); } 这个方法把JavaScript函数放在ASP.NET页面的底部,所以在启动JavaScript时,它就会找到TextBox1元素,并按照希望的那样操作.结果如图4-12所示. 图 4-12 4.4.3 使用Page.ClientScript.RegisterClientScriptInclude 最后一个方法是RegisterClientScriptInclude.许多开发人员都把JavaScript放在.js文件中,这是最好的方式,因为很容易把对JavaScript的修改应用于整个应用程序.使用RegisterClientScriptInclude方法可以在ASP.NET页面上注册脚本文件,如程序清单4-13所示. 程序清单4-13 使用RegisterClientScriptInclude方法 VB Dim myScript As String = "myJavaScriptCode.js" Page.ClientScript.RegisterClientScriptInclude("myKey",myScript) C# string myScript = "myJavaScriptCode.js" Page.ClientScript.RegisterClientScriptInclude("myKey",myScript); 这会在ASP.NET页面上创建如下代码: 4.5 客户端回调 ASP.NET 2.0包含一个新的客户端回调功能,可以提取页面值,并把它们填充到已生成的页面上,而无须重新生成页面.所以不需要进行整个回送循环,就可以修改页面上的值.也就是说,在更新页面时,可以不重新绘制全部页面.终端用户不会看到页面闪烁和重定位,页面流更类似于胖客户应用程序的流. 为了使用这个新的回调功能,必须了解使用JavaScript的一些知识.本书不打算介绍JavaScript.如果读者需要详细了解这个相当大的主题,可以参阅Paul Wilton编著的 Beginning JavaScript,Second Edition. 4.5.1 比较典型的回送和回调在学习新回调功能的一些例子之前,先比较一下典型ASP.NET页面的当前回送功能. 在ASP.NET页面上触发一个页面事件,处理典型的回送内容时,要进行许多操作.图4-13列举了这个过程. 图 4-13 在正常的回送情况下,某个事件会触发一个要发送给Web服务器的HTTP Post请求.该事件可以是终端用户单击了窗体上的一个按钮.它会把HTTP Post请求发送给Web服务器.Web服务器再使用IPostbackEventHandler处理该请求,并通过一系列页面事件运行该请求.这些事件包括加载状态(在页面的视图状态中),处理数据,处理回送事件,最后是显示所用浏览器解释的页面.该过程会在浏览器中重新加载页面,使页面的上部出现闪烁和重新排列. 另一方面,可以使用新的回调功能,如图4-14所示. 图 4-14 在这个图中,事件(例如按钮单击)的发生会把该事件传送给脚本事件处理程序(一个JavaScript函数),该处理程序给Web服务器传送一个要处理的异步请求.ICallbackEventHandler通过一个类似于回送中使用的管道来运行请求―― 但注意一些较大的步骤(例如显示页面)未包含在这个过程链中.加载了信息后,结果就返回给脚本回调对象.然后,脚本代码使用JavaScript的功能把这些数据放在Web页面上,而无须刷新页面.为了理解这个过程,下节将介绍一个简单的例子. 4.5.2 使用回调功能:一种简单的方法为了理解回调功能,下面看看简单的ASP.NET页面如何使用它.这个例子只有一个HTML按钮控件和一个TextBox服务器控件(Web服务器控件版本).当终端用户单击窗体上的按钮时,就启动回调服务,把一个随机数填充到文本框中.程序清单4-14演示了这个例子. 程序清单4-14 使用回调功能把一个随机值填充到Web页面上 .aspx页面 (VB版本) Callback Page function GetNumber(){ UseCallback(); } function GetRandomNumberFromServer(TextBox1,context){ document.forms[0].TextBox1.value = TextBox1; } VB (后台编码) Partial Class RandomNumber Inherits System.Web.UI.Page Implements System.Web.UI.ICallbackEventHandler Dim _callbackResult As String = Nothing; Protected Sub Page_Load(ByVal sender As Object,ByVal e As System.EventArgs) _ Handles Me.Load Dim cbReference As String = Page.ClientScript.GetCallbackEventReference( Me,"arg","GetRandomNumberFromServer","context") Dim cbScript As String = "function UseCallback(arg,context)" & _ "{" & cbReference & ";" & "}" Page.ClientScript.RegisterClientScriptBlock(Me.GetType(),_ "UseCallback",cbScript,True) End Sub Public Sub RaiseCallbackEvent(ByVal eventArgument As String) _ Implements System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent _callbackResult = Rnd().ToString() End Function Public Function GetCallbackResult() As String _ Implements System.Web.UI.ICallbackEventHandler.GetCallbackResult Return _callbackResult End Function End Class C# (后台编码) 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; public partial class RandomNumber : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler { private string _callbackResult = null; protected void Page_Load(object sender,EventArgs e) { string cbReference = Page.ClientScript.GetCallbackEventReference(this, "arg","GetRandomNumberFromServer","context"); string cbScript = "function UseCallback(arg,context)" + "{" + cbReference + ";" + "}"; Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "UseCallback",cbScript,true); } public void RaiseCallbackEvent(string eventArg) { Random rnd = new Random(); _callbackResult = rnd.Next().ToString(); } public string GetCallbackResult() { return _callbackResult; } } 在浏览器中建立并运行这个页面,结果如图4-15所示. 图 4-15 单击页面上的按钮,会调用页面的客户端回调功能,接着页面对该页面的后台编码发出异步请求.在得到页面这部分的响应后,客户端脚本就会提取检索出来的值,并把它放在文本框中――根本不需要刷新页面! 现在看看.aspx页面,它只包含一个HTML按钮控件和一个TextBox服务器控件.注意使用了标准的HTML按钮控件,因为控件不能在这里使用.在使用HTML按钮控件时,只需包含一个onclick事件,它指向启动这个过程的JavaScript函数即可. 我们没有对控件进行任何操作.页面上最后要包含的是客户端JavaScript函数,它用于回调服务器端函数.GetNumber()是第一个实例化的 JavaScript函数,它通过调用客户端脚本处理程序(在页面的后台编码中定义)的名称,以启动整个过程.从GetNumber()中获得的 string类型使用GetRandomNumberFromServer()函数来提取. GetRandomNumberFromServer()只是填充提取出来的string值,并把它作为Textbox控件的值―― 由服务器控件(TextBox1)的ID属性值指定. function GetNumber(){ UseCallback(); } function GetRandomNumberFromServer(TextBox1,context){ document.forms[0].TextBox1.value = TextBox1; } 下面看看后台编码. Web页面的Page类实现了System.Web.UI.ICallbackEventHandler接口: Partial Class RandomNumber Inherits System.Web.UI.Page Implements System.Web.UI.ICallbackEventHandler ' Code here End Class 这个接口要求实现两个方法RaiseCallbackEvent 和GetCallbackResult.这两个方法都处理客户端脚本请求.RaiseCallbackEvent可以从页面中提取值,但该值只能是string类型: Public Sub RaiseCallbackEvent(ByVal eventArgument As String) _ Implements System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent _callbackResult = Rnd().ToString() End Function GetCallbackResult方法获取要使用的返回值: Public Function GetCallbackResult() As String _ Implements System.Web.UI.ICallbackEventHandler.GetCallbackResult Return _callbackResult End Function 另外,Page_Load事件负责客户端回调脚本管理器(该函数管理请求和响应)在客户端的创建和放置: Dim cbReference As String = Page.GetCallbackEventReference(Me,"arg",_ "GetRandomNumberFromServer","context") Dim cbScript As String = "function UseCallback(arg,context)" & _ "{" & cbReference & ";" & "}" Page.ClientScript.RegisterClientScriptBlock(Me.GetType(),_ "UseCallback",cbScript,True) 客户端上用于实现回调功能的函数是UseCallback(),然后使用Page.ClientScript. RegisterClientScriptBlock把这个字符串填充到Web页面上,该方法还在页面上把标记放在该函数的外部.这里使用的名称一定要与前面客户端JavaScript函数使用的名称相同. 最后,页面在刷新内容时并不刷新整个页面,这有许多方法.注意,这里描述的回调功能使用了XmlHTTP,所以客户浏览器必须支持XmlHTTP (Microsoft的Internet Explorer和FireFox支持这个功能).为此,.NET Framework 2.0引入了SupportsCallBack和SupportsXmlHTTP属性.为了确保有这个支持,可以在生成初始页面时检查页面的后台编码,该后台编码如下所示: VB If (Page.Request.Browser.SupportsXmlHTTP) Then End If C# if (Page.Request.Browser.SupportsXmlHTTP == true) { } 4.5.3 使用带参数的回调功能下面要建立一个Web页面,它使用回调功能,但需要一个参数来检索返回值.在页面的顶部放置一个文本框,用于收集终端用户的输入,再放置一个按钮和另一个文本框,以便用回调的结果填充页面. 该页面要求用户输入一个邮政编码,然后使用回调功能在服务器上实例化一个XML Web服务请求.该Web服务会以字符串格式为邮政编码返回最新的天气信息.程序清单4-15演示了这个页面示例. 程序清单 4-15 使用回调功能和Web服务 .aspx页面 (VB 版本) Web Service Callback function GetTemp(){ var zipcode = document.forms[0].TextBox1.value; UseCallback(zipcode,""); } function GetTempFromServer(TextBox2,context){ document.forms[0].TextBox2.value = "Zipcode: " + document.forms[0].TextBox1.value + " | Temp: " + TextBox2; } VB (后台编码) Partial Class WSCallback Inherits System.Web.UI.Page Implements System.Web.UI.IcallbackEventHandler Dim _callbackResult As String = Nothing Protected Sub Page_Load(ByVal sender As Object,ByVal e As System.EventArgs)_ Handles Me.Load Dim cbReference As String = Page.ClientScript.GetCallbackEventReference( Me,"arg","GetTempFromServer","context") Dim cbScript As String = "function UseCallback(arg,context)" & _ "{" & cbReference & ";" & "}" Page.ClientScript.RegisterClientScriptBlock(Me.GetType(),_ "UseCallback",cbScript,True) End Sub Public Sub RaiseCallbackEvent(ByVal eventArgument As String) _ Implements System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent Dim ws As New Weather.TemperatureService _callbackResult = ws.GetTemp(eventArgument).ToString() End Sub Public Function GetCallbackResult() As String _ Implements System.Web.UI.ICallbackEventHandler.GetCallbackResult Return _callbackResult End Function End Class C# (后台编码) 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; public partial class WSCallback : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler { protected void Page_Load(object sender,EventArgs e) { string cbReference = Page.ClientScript.GetCallbackEventReference(this, "arg","GetTempFromServer","context"); string cbScript = "function UseCallback(arg,context)" + "{" + cbReference + ";" + "}"; Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "UseCallback",cbScript,true); } public void RaiseCallbackEvent(string eventArg) { Weather.TemperatureService ws = new Weather.TemperatureService(); _callbackResult = ws.GetTemp(eventArg).ToString(); } public string GetCallbackResult() { return _callbackResult; } 在这个程序清单中,看不到页面对远程Web服务进行的Web引用,该Web服务根据用户提供的邮政编码提供最新的天气信息. 提示: 要获得本示例使用的Web服务,其WSDL文件的地址是http://services.xmethods. net:80/soap/ servlet/rpcrouter.在ASP.NET应用程序中使用Web服务的更多信息可参阅第26章. 建立并运行这个页面后,结果如图4-16所示. 图 4-16 与客户端回调功能的最大区别是,这个例子发送了一个必需的参数,这是在页面的.aspx部分的JavaScript函数GetTemp()中发送的. function GetTemp(){ var zipcode = document.forms[0].TextBox1.value; UseCallback(zipcode,""); } JavaScript函数把终端用户的输入填充到TextBox1中,把它的值放在变量zipcode中,该变量作为一个参数发送到UseCallback()方法中. 这个例子与前面的例子一样,也更新了页面,但没有更新整个页面. 4.6 小结本章介绍了ASP.NET页面的一个核心构造块―― 服务器控件.服务器控件是页面开发的一种面向对象方法,它把页面元素封装到可修改和可扩展的组件中. 本章还讨论了如何使用层叠样式表(CSS)定制服务器控件的外观和操作方式.使用ASP.NET 2.0中的CSS是很简单,快捷的,尤其是和Visual Studio 2005一起使用.最后,本章介绍了HTML服务器控件,以及把JavaScript添加到页面中,以修改控件的行为.