在UpdatePanel控件异步更新时，如果有错误发生，默认情况下会弹出一个Alert对话框显示出错误信息，这对用户来说是不友好的，本文看一下如何在服务端和客户端脚本中自定义异常处理，翻译自官方文档。

主要内容

1．在服务端自定义异常处理

2．在客户端脚本中自定义异常处理

一．在服务端自定义异常处理

1．添加ASPX页面并切换到设计视图。

2．在工具箱中AJAX Extensions标签下双击ScriptManager和UpdatePanel控件添加到页面中。

3．在UpdatePanel控件中添加两个TextBox，一个Label，一个Button和一些文字，并设置Button的Text属性值为“Calculate”。

4．双击Calculate按钮并添加如下代码到事件处理中。

protected void Button1_Click(object sender, EventArgs e)

{

    try

    {

        int a = Int32.Parse(TextBox1.Text);

        int b = Int32.Parse(TextBox2.Text);

        int res = a / b;

        Label1.Text = res.ToString();

    }

    catch (Exception ex)

    {

        if (TextBox1.Text.Length >  && TextBox2.Text.Length > )

        {

            ex.Data["ExtraInfo"] = " You can't divide " +

                TextBox1.Text + " by " + TextBox2.Text + ".";

        }

        throw ex;

    }

}

在事件处理代码中包含了一个try-catch语句块，在try中进行除法运算，如果运算失败，在catch中设置ExtraInfo信息并重新抛出异常。

5．切换到设计视图并选择ScriptManager控件。

6．在属性窗口中的工具栏中，选择事件按钮，并双击AsyncPostBackError。

7．添加如下代码到AsyncPostBackError事件处理。

protected void ScriptManager1_AsyncPostBackError(object sender, AsyncPostBackErrorEventArgs e)

{

    if (e.Exception.Data["ExtraInfo"] != null)

    {

        ScriptManager1. AsyncPostBackErrorMessage =

            e.Exception.Message +

            e.Exception.Data["ExtraInfo"].ToString();

    }

    else

    {       ScriptManager1.AsyncPostBackErrorMessage =

            "An unspecified error occurred.";

    }

}

检测异常的ExtraInfo是否为空，并设置为ScriptManager控件的AsyncPostBackErrorMessage，如果不设置则会创建一个默认的异常。

8．保存并按Ctrl + F5运行。

9．在每一个文本框中输入大于零的数，并单击Calculate按钮提交成功。

10．在第二个文本框中输入0，单击Calculate将会引发一个异常。浏览器将会显示一个对话框，提示的信息为我们在服务端设置的信息。

二．在客户端脚本中自定义异常处理

前面的异常处理是在服务端通过设置ScriptManager控件的属性来进行处理，下面将看一下如何在客户端脚本中使用PageRequestManager类来进行异常处理，并用<div>元素来代替浏览器默认的Alert对话框。

1．在我们前面创建的页面中，切换到代码视图。

2．添加如下的HTML元素到页面中（官方文档中有点错误）

<div id="AlertDiv" language="javascript" onclick="return AlertDiv_onclick()">

    <div id="AlertMessage">

    </div>

    <br />

    <div id="AlertButtons">

        <input id="OKButton" type="button" value="OK" runat="server" onclick="ClearErrorState()" />

    </div>

</div>

3．在HEAD元素中添加如下样式标记。

<style type="text/css">

    #UpdatePanel1 {

      width: 200px; height: 50px;

      border: solid 1px gray;

    }

    #AlertDiv{

    left: %; top: %;

    position: absolute; width: 200px;

    padding: 12px; 

    border: # 1px solid;

    background-color: white; 

    text-align: left;

    visibility: hidden;

    z-index: ;

    }

    #AlertButtons{

    position: absolute; right: %; bottom: %;

    }

</style>

4．切换到设计视图并确保你的页面如下所示。

5．在属性窗口中的下拉列表中选择DOCUMENT元素（它对应的是页面<Body>元素），设置Id属性值为bodytag。

6．切换到代码视图。

7．添加如下<script>代码块。

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

var divElem = 'AlertDiv';

var messageElem = 'AlertMessage';

var bodyTag = 'bodytag';

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

function ToggleAlertDiv(visString)

{

     if (visString == 'hidden')

     {

         $get(bodyTag).style.backgroundColor = 'white';                         

     }

     else

     {

         $get(bodyTag).style.backgroundColor = 'gray';                         

     }

     var adiv = $get(divElem);

     adiv.style.visibility = visString;

}

function ClearErrorState() {

     $get(messageElem).innerHTML = '';

     ToggleAlertDiv('hidden');                     

}

function EndRequestHandler(sender, args)

{

   if (args.get_error() != undefined)

   {

       var errorMessage;

       if (args.get_response().get_statusCode() == '')

       {

           errorMessage = args.get_error().message;

       }

       else

       {

           // Error occurred somewhere other than the server page.

           errorMessage = 'An unspecified error occurred. ';

       }

       args.set_errorHandled(true);

       ToggleAlertDiv('visible');

       $get(messageElem).innerHTML = errorMessage;

   }

}

</script>

在代码块中，主要做以下几件事：

1）定义PageRequestManager类的endRequest事件处理，在事件处理中，当有错误发生时将显示AlertDiv。

2）定义ToggleAlertDiv函数，当有错误发生时它用来显示或者隐藏AlertDiv元素，并且改变页面的背景颜色。

3）定义ClearErrorState函数，它用来隐藏错误信息的UI。

8．保存并按Ctrl + F5运行。

9．在每一个文本框中输入大于零的数，并单击Calculate按钮提交成功。

10．在第二个文本框中输入0，单击Calculate将会引发一个异常。这时自定义的AlertDiv将会显示出来代替了默认的Alert对话框，如下图所示：

ASP.NET AJAX入门系列（8）：自定义异常处理的更多相关文章

  1. ASP.NET AJAX入门系列

    ASP.NET AJAX入门系列将会写关于ASP.NET AJAX一些控件的使用方法以及基础知识,其中部分文章为原创,也有一些文章是直接翻译自官方文档,本部分内容会不断更新. 目录 ASP.NET A ...

  2. ASP.NET AJAX入门系列（4）：使用UpdatePanel控件（一）

    UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加 ...

  3. ASP.NET AJAX入门系列（1）：概述

    经常关注我的Blog的朋友可能注意到了,在我Blog的左边系列文章中,已经移除了对Atlas学习手记系列文章的推荐,因为随着ASP.NET AJAX 1.0 Beta版的发布,它们已经不再适用,为了不 ...

  4. ASP.NET AJAX入门系列（2）：使用ScriptManager控件

    ScriptManager控件包括在ASP.NET 2.0 AJAX Extensions中,它用来处理页面上的所有组件以及页面局部更新,生成相关的客户端代理脚本以便能够在JavaScript中访问W ...

  5. ASP.NET AJAX入门系列（10）：Timer控件简单使用

    本文主要通过一个简单示例,让Web页面在一定的时间间隔内局部刷新,来学习一下ASP.NET AJAX中的服务端Timer控件的简单使用. 主要内容 Timer控件的简单使用 1．添加新页面并切换到设计 ...

  6. ASP.NET AJAX入门系列（7）：使用客户端脚本对UpdateProgress编程

    在本篇文章中,我们将通过编写JavaScript来使用客户端行为扩展UpdateProgress控件,客户端代码将使用ASP.NET AJAX Library中的PageRequestManager, ...

  7. ASP.NET AJAX入门系列（6）：UpdateProgress控件简单介绍

    在ASP.NET AJAX Beta2中,UpdateProgress控件已经从“增值”CTP中移到了ASP.NET AJAX核心中.以下两篇关于UpdateProgress的文章基本翻译自ASP.N ...

  8. ASP.NET AJAX入门系列（3）：使用ScriptManagerProxy控件

    在ASP.NET AJAX中,由于一个ASPX页面上只能有一个ScriptManager控件,所以在有母版页的情况下,如果需要在Master-Page和Content-Page中需要引入不同的脚本时, ...

  9. ASP.NET AJAX入门系列（11）：在多个UpdatePanle中使用Timer控件

    本文将使用Timer控件更新两个UpdatePanel控件,Timer控件将放在UpdatePanel控件的外面,并将它配置为UpdatePanel的触发器,翻译自官方文档. 主要内容 在多个Upda ...

随机推荐

  1. vue 手写组件 集合

    Num.1 :  链接 向右滑动, 显示删除按钮,  根据touchStart touchEnd 的 clientX 差距 > 30; 说明是向左滑动, 显示; 改变 e.currentTarg ...

  2. 压缩后的数据 要经过 base64_encode 后才能在网络上传送

    function ob_gzip($content) // $content 就是要压缩的页面内容{ if(!headers_sent() && // 如果页面头部信息还没有输出 ex ...

  3. 对象存储到session中

    以前在使用java开发中,通常都是在session里面存放的对象.在使用php开发中,也打算在session中存入对象,确实能把对象放进去,也能把整个对象输出,但就是取不出对象里面的属性. 通过pri ...

  4. ChinaCock界面控件介绍-TCCImageViewerForm

    有多个图片,左右滑动可以切换,通过手势还可以放大.缩小查看,象常见的相册,就是这样子实现效果. 现在,我们有了TCCImageViewerForm组件,也可以轻松实现这样的场景应用. 现在看看TCCI ...

  5. Java学习笔记13（equals（）方法；toString()方法）

    equals()方法: equals方法是Object类中的方法:Object是所有类的祖宗,所以所有类都有equals()方法: boolean equals(Object obj); equals ...

  6. python里的函数

    map()是 Python 内置的高阶函数,它接收一个函数 f 和一个 list,并通过把函数 f 依次作用在 list 的每个元素上,得到一个新的 list 并返回. 假设用户输入的英文名字不规范, ...

  7. ngxinx 配置

    vim 复制操作 1.复制 1)单行复制 在命令模式下,将光标移动到将要复制的行处,按“yy”进行复制: 2)多行复制 在命令模式下,将光标移动到将要复制的首行处,按“nyy”复制n行: 其中n为1. ...

  8. HDU 6050 17多校2 Funny Function（数学+乘法逆元）

    Problem Description Function Fx,ysatisfies:For given integers N and M,calculate Fm,1 modulo 1e9+7.   ...

  9. BT原理分析

    BT全名為BitTorrent,是一個p2p軟件,你在下載download的同時,也在為其他用戶提供上傳upload,因為大家是「互相幫助」,所以不會隨著用戶數的增加而降低下載速度. 其實跟ED也十分 ...

  10. 复杂的动态布尔表达式性能评估(1)--Antlr4实现

    前言: 规则引擎中, 往往涉及到多个条件构成了复杂布尔表达式的计算. 对于这类布尔表达式, 一是动态可变的(取决于运营人员的设定), 二是其表达式往往很复杂. 如何快速的计算其表达式的值, 该系列文章 ...