Monday, November 02, 2009

Issue : Javascript alert message box showing up twice within an UpdatePanel, after throwing an exception

see also : article on codegain.com about the same subject.

Finally, after a lot of playing around to reproduce what was happening, I found the solution. at first I had the following javascript code :

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

//registers the event by adding it to the endrequests collections of the instance
//This will allow it to actually listen to the event when it happens, and execute
//the code in the onEndRequest function
function pageLoad() {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest);
}

//function which will execute after the C# code gets to its end
//it will then catch the exception and display it on the alert message box
//the substring is just to avoid having the full exception definition,
//and display only the message
function onEndRequest(sender, args) {
if (args.get_error() != null) {
var msg = args.get_error().message;
alert(msg.substring(msg.indexOf(":", 0) + 1));
args.set_errorHandled(true);
return false;
}
else
{ return false; }
}
</script>


then I had too buttons on the page. everytime a button with no exception is clicked, the next time, the exception shows twice, and keeps incrementing on each postback.



here’s the full code listing for the test asp.net page and C#, with the corrected javascript.



 



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head runat="server">
<
title></title>
<
script type="text/javascript" language="javascript">

//registers the event by adding it to the endrequests collections of the instance
//This will allow it to actually listen to the event when it happens, and execute
//the code in the onEndRequest function
function pageLoad() {
Sys.WebForms.PageRequestManager.getInstance().remove_endRequest(onEndRequest); //>>Key line of code for the correction
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest);
}

//function which will execute after the C# code gets to its end
//it will then catch the exception and display it on the alert message box
//the substring is just to avoid having the full exception definition,
//and display only the message
function onEndRequest(sender, args) {
if (args.get_error() != null) {
var msg = args.get_error().message;
alert(msg.substring(msg.indexOf(":", 0) + 1));
args.set_errorHandled(true);
return false;
}
else
{ return false; }
}
</script>
</
head>
<
body>
<
form id="form1" runat="server">
<
div>
<
asp:ScriptManager runat="server" ID="script1" />
<
asp:UpdatePanel runat="server" ID="pnlExceptions">
<
ContentTemplate>
<
h4>Exceptions thrown from C#, and displayed in a javascript alert box (works with the update panel)</h4>
<
asp:Button runat="server" ID="txtExceptionInAlert" Text="Trigger Exception" OnClick="txtExceptionInAlert_Click" />
<
asp:Button ID="Button1" runat="server" Text="Asynchronous post back button" />
</
ContentTemplate>
</
asp:UpdatePanel>
</
div>
</
form>
</
body>
</
html>




 



using System;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
/// <summary>
///
throwing the exception at the click event
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void txtExceptionInAlert_Click(object sender, EventArgs e)
{
throw new Exception("This is an exception thrown from C# code");
}
}


 



 



To Reproduce the error, comment this line in the PageLoad : Sys.WebForms.PageRequestManager.getInstance().remove_endRequest(onEndRequest);



the thing, is that in Javascript, I wonder how we can tell it it’s a postback, and not a new pageLoad.



 



Hope this helps !

2 comments:

r4i software said...

I am glad to see that. thanks for sharing the entire page coding with us. I am always preferring to use alert command in head section but i will try this one also.thanks again fro sharing information with us.

Oussama Dinia said...

Sharing that's the purpose. I take time to post, and I only post elements I face everyday :)
I'm glad I can share them, so that others make use of the code, or comment on it, which also helps pointing my coding in the right direction.