自定義 ASP.NET UpdatePanel 控件的錯誤處理

自定義 ASP.NET UpdatePanel 控件的錯誤處理

.NET Framework 4 其他版本 此主題尚未評級 - 評價此主題
如果在 UpdatePanel 控件中更新部分頁時發生錯誤，則預設行為是顯示帶有錯誤消息的浏覽器消息框。 本教程将向您示範如何自定義向使用者顯示錯誤的方式以及如何自定義錯誤消息。
系統必備
若要在您自己的開發環境中實作這些過程，您需要：
Microsoft Visual Studio 2005 或 Microsoft Visual Web Developer 速成版。
一個支援 AJAX 的 ASP.NET 網站。
在伺服器代碼中自定義錯誤處理
首先，您将通過使用頁面中的伺服器代碼自定義錯誤處理。
在伺服器代碼中自定義錯誤處理
建立新頁并切換到“設計”視圖。
在工具箱的“AJAX Extensions”頁籤中，輕按兩下 ScriptManager 控件和 UpdatePanel 控件以将它們添加到頁面中。

将以下控件添加到 UpdatePanel 控件中：
兩個 TextBox 控件。
一個 Label 控件
一個 Button 控件。 将該控件的 Text 屬性設定為“計算”。
UpdatePanel 控件中的某些文本。

輕按兩下“計算”按鈕，并為其事件處理程式添加下列代碼：
C#VB

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 中的額外字元串資訊添加到異常，然後不處理該異常而重新引發該異常。
注意
最佳做法是驗證輸入，而不是捕獲和重新引發有關“被零除”錯誤的異常。 此示例将捕獲“被零除”異常以示範如何使用控件 UpdatePanel 自定義錯誤處理。
切換到“設計”視圖并選擇 ScriptManager 控件。
在“屬性”視窗的工具欄中，單擊“事件”按鈕，然後輕按兩下“AsyncPostBackError”框以建立該事件的處理程式。

将以下代碼添加到 AsyncPostBackError 事件處理程式中：
C#VB

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 資料項。 如果已定義，則将 AsyncPostBackErrorMessage 屬性設定為字元串值。 否則，将建立一個預設錯誤消息。 将以下代碼添加到 UpdatePanel 控件的結束标記之後
按 Ctrl+F5 在浏覽器中檢視頁面。
向每個文本框中添加一個大于零的數，然後單擊“計算”按鈕以示範成功的回發。
将第二個文本框的值更改為 0，然後單擊“計算”按鈕以建立一個錯誤條件。
浏覽器顯示一個消息框，該消息框中包含在伺服器代碼中設定的消息。

注意
消息框的具體樣式取決于您所使用的浏覽器，但是消息卻都是相同的。
C#VB

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    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;
        }        
    }
    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.";
        }
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Partial-Page Update Error Handling Example</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server" OnAsyncPostBackError="ScriptManager1_AsyncPostBackError">
            </asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:TextBox ID="TextBox1" runat="server" Width="39px"></asp:TextBox>
                    /
                    <asp:TextBox ID="TextBox2" runat="server" Width="39px"></asp:TextBox>
                    =
                    <asp:Label ID="Label1" runat="server"></asp:Label><br />
                    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="calculate" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>


使用用戶端腳本以自定義錯誤處理
前面的過程示範了如何通過設定 ScriptManager 控件的屬性來自定義部分頁呈現期間的錯誤。 下面的過程通過使用用戶端 PageRequestManager 類，來生成自定義項，以在 <div> 元素中，而不是浏覽器消息框中顯示錯誤消息。
在用戶端腳本中自定義錯誤處理
在前面建立的頁面中，切換到“源”視圖。
向該頁面中添加以下标記：
C#VB

    <div id="AlertDiv">
        <div id="AlertMessage">
        </div>
        <br />
        <div id="AlertButtons">
            <input id="OKButton" type="button" value="OK" runat="server" οnclick="ClearErrorState()" />
        </div>
    </div>
</div>


該标記包括一些元素，您可以使用這些元素顯示部分頁呈現錯誤。 該标記定義了名稱為 AlertDiv 的 <div> 元素，該元素中包含有他兩個 <div> 元素。 其中一個嵌套 <div> 元素包含有一個 <input> 控件，使用者可以利用該控件隐藏 <div> 元素。
在 <head> 元素中添加下列樣式标記：
C#VB

<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>


該樣式可以使錯誤資訊與其他頁面内容相比顯得更加顯眼。
切換到“設計”視圖，并驗證您的頁面是否與下列頁面相似：

在“屬性”視窗頂部的下拉清單中，選擇 DOCUMENT 元素（它表示頁面中的 <body> 元素），然後将該元素的 Id 屬性設定為 bodytag。

切換到“源”視圖。
将下列 <script> 塊添加到 <asp:ScriptManager> 元素後的任意位置。
C#VB

<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>


該腳本執行以下操作：
為 PageRequestManager 類的 endRequest 事件定義處理程式。 在處理程式中，如果存在錯誤條件，則該代碼顯示 AlertDiv <div> 元素。
定義 ToggleAlertDiv 函數，該函數可隐藏或顯示 AlertDiv 元素，并會根據錯誤條件更改頁面的顔色。
定義 ClearErrorState 函數，該函數可隐藏錯誤消息 UI。
儲存更改，然後按 Ctrl+F5 在浏覽器中檢視頁面。
向每個文本框中添加一個大于零的數，然後單擊“計算”按鈕以示範成功的回發。
将第二個文本框的值更改為 0，然後單擊“計算”按鈕以示範錯誤條件。
将會顯示自定義 AlertDiv 元素，而不是浏覽器消息框。 下圖示範了一個錯誤條件的示例。

C#VB


<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    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;
        }
    }

    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.";
        }
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>UpdatePanel Error Handling Example</title>
    <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>
</head>
<body id="bodytag">
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server" OnAsyncPostBackError="ScriptManager1_AsyncPostBackError">
            </asp:ScriptManager>
            <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>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:TextBox ID="TextBox1" runat="server" Width="39px"></asp:TextBox>
                    /
                    <asp:TextBox ID="TextBox2" runat="server" Width="39px"></asp:TextBox>
                    =
                    <asp:Label ID="Label1" runat="server"></asp:Label><br />
                    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="calculate" />
                </ContentTemplate>
            </asp:UpdatePanel>
            <div id="AlertDiv">
                <div id="AlertMessage">
                </div>
                <br />
                <div id="AlertButtons">
                    <input id="OKButton" type="button" value="OK" runat="server" οnclick="ClearErrorState()" />
                </div>
            </div>
        </div>
    </form>
</body>
</html>
轉載于:https://www.cnblogs.com/xust/articles/3039856.html
自定義 ASP.NET UpdatePanel 控件的錯誤處理

繼續閱讀

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

七牛雲-C#SDK-上傳-前期準備

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條
