新瓶旧酒ASP.NET AJAX(6) - 客户端脚本编程（Sys.WebForms命名空间下的类Sys.Serialization命名空间下的类）

[索引页]
[源码下载]

新瓶旧酒ASP.NET AJAX(6) - 客户端脚本编程（Sys.WebForms命名空间下的类Sys.Serialization命名空间下的类）

作者： webabcd


介绍
Sys.WebForms命名空间下的类都是与局部刷新相关的类。PageRequestManager类，其中有5个事件：initializeRequest 事件、beginRequest事件、endRequest事件、pageLoading事件和pageLoaded事件。与这5个事件相关的还有5个事件参数类：InitializeRequestEventArgs类、BeginRequestEventArgs类、EndRequestEventArgs类、PageLoadingEventArgs类和PageLoadedEventArgs类。Sys.Serialization命名空间下只有一个类：Sys.Serialization.JavaScriptSerializer类。它用于在ECMAScript(JavaScript)对象与JSON格式数据之间进行转换。


1、PageRequestManager Class
    ·initializeRequest Event - 异步回发的初始化时触发
    ·beginRequest Event - 异步回发开始前触发
    ·endRequest Event - 异步回发完成后触发
    ·pageLoading Event - 异步回发完成后页面加载开始前触发
    ·pageLoaded Event - 异步回发完成后页面加载完成后触发
    ·Sys.WebForms.PageRequestManager.getInstance(); - 返回页面的PageRequestManager类的实例
    ·Sys.WebForms.PageRequestManager.getInstance().abortPostBack(); - 终止所有异步回发
    ·isInAsyncPostBack属性 - 是否正在异步回发过程中

2、InitializeRequestEventArgs Class
    ·postBackElement属性 - 产生回发事件的元素
    ·InitializeRequestEventArgs继承自Sys.CancelEventArgs，所以具有cancel属性 - 是否取消回发

3、BeginRequestEventArgs Class
    ·postBackElement属性 - 产生回发事件的元素

4、EndRequestEventArgs Class
    ·error属性 - Error对象
    ·errorHandled属性 - 异常是否已经被处理
    ·response属性 - Sys.Net.WebRequestExecutor对象
    ·dataItems属性 - 服务端注册的DataItem

5、PageLoadingEventArgs Class
    ·panelsUpdating属性 - 准备更新的UpdatePanel数组（div元素）
    ·dataItems属性 - 服务端注册的DataItem

6、PageRequestManager Class
    ·panelsUpdated属性 - 更新完毕的UpdatePanel数组（div元素）
    ·dataItems属性 - 服务端注册的DataItem

7、Sys.Serialization.JavaScriptSerializer Class
    ·serialize方法 - 序列化（参数：ECMAScript(JavaScript)对象；返回值：JSON字符串）
    ·deserialize方法 - 反序列化（参数：JSON字符串；返回值ECMAScript(JavaScript)对象：）

8、 其它请查看官方文档


示例
InitializeRequest.aspx

<% @ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="InitializeRequest.aspx.cs"
    Inherits="ClientScripting_SysWebForms_InitializeRequest" Title="InitializeRequest"  %>

< asp:Content  ID ="Content1"  ContentPlaceHolderID ="ContentPlaceHolder1"  runat ="Server" >

     < script  runat ="Server" >
        protected void Button1_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(3000);
        }
     </ script >

     < asp:UpdateProgress  ID ="UpdateProgress1"  runat ="server"  DisplayAfter ="0"  DynamicLayout ="false" >
         < ProgressTemplate >
            Loading
         </ ProgressTemplate >
     </ asp:UpdateProgress >
     < asp:UpdatePanel  ID ="UpdatePanel1"  runat ="server" >
         < ContentTemplate >
             <% =  DateTime.Now  %>
             < br  />
             < asp:Button  ID ="Button1"  runat ="server"  Text ="Button"  OnClick ="Button1_Click"   />
             &nbsp;&nbsp;
             < asp:Button  ID ="Button2"  runat ="server"  Text ="cancel属性测试"  OnClick ="Button1_Click"   />
         </ ContentTemplate >
     </ asp:UpdatePanel >
     < p >
         < textarea  id ="TraceConsole"  style ="width: 500px; height: 300px;" ></ textarea >
     </ p >

     < script  type ="text/javascript"  language ="javascript" >
    
        Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(initializeRequestHandler);
        
        function initializeRequestHandler(sender, e)
        {
            // postBackElement - 产生回发事件的元素
            if (e.get_postBackElement().id == "<%= Button2.ClientID %>")
            {
                // InitializeRequestEventArgs继承自Sys.CancelEventArgs 
                // 取消回发
                e.set_cancel(true);
            }
            else
            {
                // 获得页面的PageRequestManager类的实例
                var prm = Sys.WebForms.PageRequestManager.getInstance();
            
                Sys.Debug.trace(e.get_postBackElement().id);
                
                // Sys.WebForms.PageRequestManager的isInAsyncPostBack属性 - 是否正在异步回发过程中
                Sys.Debug.trace(prm.get_isInAsyncPostBack());
            }
        }
     </ script >

</ asp:Content >

运行结果
1、单击“Button”按钮
ctl00_ContentPlaceHolder1_Button1
false

2、在Loading的过程中再次单击“Button”按钮
ctl00_ContentPlaceHolder1_Button1
true

3、单击“cancel属性测试”按钮
没有反应


BeginRequestAndEndRequest.aspx
注：在ScriptManager的OnAsyncPostBackError事件中输入代码：ScriptManager1.AsyncPostBackErrorMessage = e.Exception.Message + "（母版页的ScriptManager格式化错误信息）";

<% @ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="BeginRequestAndEndRequest.aspx.cs"
    Inherits="ClientScripting_SysWebForms_BeginRequestAndEndRequest" Title="BeginRequest和EndRequest"  %>

< asp:Content  ID ="Content1"  ContentPlaceHolderID ="ContentPlaceHolder1"  runat ="Server" >

     < script  runat ="Server" >
        protected void Button1_Click(object sender, EventArgs e)
        {
            int i = Int32.Parse("abc");
        }

        protected void Button2_Click(object sender, EventArgs e)
        {
            ScriptManager.GetCurrent(this).RegisterDataItem(this.UpdatePanel1, "webabcd");
        }
     </ script >

     < asp:UpdatePanel  ID ="UpdatePanel1"  UpdateMode ="Conditional"  runat ="Server" >
         < ContentTemplate >
             <% =  DateTime.Now.ToString()  %>
             < br  />
             < asp:Button  ID ="Button1"  runat ="server"  Text ="触发异常"  OnClick ="Button1_Click"   />
             &nbsp;&nbsp;
             < asp:Button  ID ="Button2"  runat ="server"  Text ="RegisterDataItem测试"  OnClick ="Button2_Click"   />
         </ ContentTemplate >
     </ asp:UpdatePanel >

     < p >
         < textarea  id ="TraceConsole"  style ="width: 500px; height: 100px;" ></ textarea >
     </ p >

     < script  language ="javascript"  type ="text/javascript" >

        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler);
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler2);

        function beginRequestHandler(sender, e)
        {
            // postBackElement - 产生回发事件的元素
            alert(e.get_postBackElement().id);            
        }
                
        function endRequestHandler(sender, e)
        {
            // response - Sys.Net.WebRequestExecutor对象
            Sys.Debug.trace("状态代码：" + e.get_response().get_statusCode());
    
            if (e.get_error())
            {
                // errorHandled - 异常是否已经被处理
                e.set_errorHandled(true);
                // error - Error对象
                Sys.Debug.trace("出错了！错误信息：" + e.get_error().message);
            }
        }
        
        function endRequestHandler2(sender, e)
        {
            var upId = "<%= this.UpdatePanel1.ClientID %>";
            
            // dataItems - 服务端注册的DataItem
            if (typeof(e.get_dataItems()[upId]) != 'undefined')
            {
                Sys.Debug.trace("注册的数据项为：" + e.get_dataItems()[upId]);
            }
        }

     </ script >

</ asp:Content >

运行结果
1、单击“触发异常”按钮
弹出框，信息：ct100_ContentPlaceHolder1_Button1
状态代码：200
出错了！错误信息：输入字符串的格式不正确。（母版页的ScriptManager格式化错误信息）

2、单击“RegisterDataItem测试”按钮
弹出框，信息：ct100_ContentPlaceHolder1_Button2
状态代码：200
注册的数据项为：webabcd


Sample.aspx

<% @ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Sample.aspx.cs"
    Inherits="ClientScripting_SysSerialization_Sample" Title="Sys.Serialization Sample"  %>

< asp:Content  ID ="Content1"  ContentPlaceHolderID ="ContentPlaceHolder1"  runat ="Server" >

     < script  runat ="Server" >
        protected void Button1_Click(object sender, EventArgs e)
        {
            // 创建一个Person对象
            Person person = new Person();
            person.Name = "webabcd";
            person.Age = 27;

            // 序列化上面创建的Person对象，使其成为一个JSON字符串
            System.Web.Script.Serialization.JavaScriptSerializer jss = new System.Web.Script.Serialization.JavaScriptSerializer();
            string s = jss.Serialize(person);
            
            // 注册DataItem
            ScriptManager.GetCurrent(this).RegisterDataItem(this.UpdatePanel1, s);
        }

        /// <summary>
        /// Person类
        /// </summary>
        public class Person
        {
            private string _name;
            /// <summary>
            /// 姓名
            /// </summary>
            public string Name
            {
                get { return _name; }
                set { _name = value; }
            }

            private int _age;
            /// <summary>
            /// 年龄
            /// </summary>
            public int Age
            {
                get { return _age; }
                set { _age = value; }
            }

        }
     </ script >

     < asp:UpdatePanel  ID ="UpdatePanel1"  UpdateMode ="Conditional"  runat ="Server" >
         < ContentTemplate >
             <% =  DateTime.Now.ToString() %>
             < br  />
             < asp:Button  ID ="Button1"  runat ="server"  Text ="Sys.Serialization"  OnClick ="Button1_Click"   />
         </ ContentTemplate >
     </ asp:UpdatePanel >
     < p >
         < textarea  id ="TraceConsole"  style ="width: 500px; height: 100px;" ></ textarea >
     </ p >

     < script  language ="javascript"  type ="text/javascript" >

        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
        
        function endRequestHandler(sender, e)
        {
            var upId = "<%= this.UpdatePanel1.ClientID %>";
            
            // 获得服务端注册的DataItem，它是一个JSON字符串
            var jsonStringServer = e.get_dataItems()[upId];
            
            // 反序列化这个JSON字符串，使其成为一个JSON对象
            var jsonObject = Sys.Serialization.JavaScriptSerializer.deserialize(jsonStringServer)

            // 序列化这个JOSN对象，使其成为一个JSON字符串
            var jsonStringClient = Sys.Serialization.JavaScriptSerializer.serialize(jsonObject);
            
            Sys.Debug.trace(jsonStringClient);
            
            Sys.Debug.trace(jsonObject.Name + " " + jsonObject.Age);
            
            Sys.Debug.trace(Sys.Serialization.JavaScriptSerializer.serialize(jsonObject));
        }

     </ script >

</ asp:Content >

运行结果
单击“Sys.Serialization”按钮
{"Name":"webabcd","Age":27}
webabcd 27
{"Name":"webabcd","Age":27}


OK
[源码下载]