首頁 > 開發者 > ASP

ASP.NET AJAX入門系列：自訂異常處理

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
ASP.NET AJAX入門系列：自訂異常處理 （轉）

在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 > 0 && TextBox2.Text.Length > 0)
        {
            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: 40%; top: 40%;

    position: absolute; width: 200px;

    padding: 12px; 

    border: #000000 1px solid;

    background-color: white; 

    text-align: left;

    visibility: hidden;

    z-index: 99;

    }

    #AlertButtons{}{

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

    }

</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() == '200')

       {

           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對話方塊，如所示：

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More