Ketone Cops

August 21, 2009

Modal Popup with Progress

Filed under: Ajax,ASP.NET 2.0,Javascript,programming — delroger @ 12:42 pm

I was interested in using a Modal Popup to prevent trigger-happy clicking by impatient users when my web app was doing a processing job for a few seconds.  I came across Matt Berseth’s excellent work here http://mattberseth.com/blog/2007/07/modalpopup_as_an_ajax_progress.html and decided that it would be useful to make a class file for Sample 3 on that page.  So here it is…

This assumes that you have a modal popup extender and a panel on your page that will display the animated gif.  This is the code for mine (almost identical to Matt Berseth’s):

<ajaxToolKit:ModalPopupExtender
ID=”mdlPopup” runat=”server” TargetControlID=”pnlPopup”
PopupControlID=”pnlPopup” BackgroundCssClass=”modalBackground”  />
<asp:Panel ID=”pnlPopup” runat=”server” CssClass=”updateProgress” style=”display:none”>
<div align=”center” style=”margin-top:13px;”>
<img src=”Images/ajax-loader.gif” />
<span>Processing…</span>
</div>
</asp:Panel>

The class file then looks like the code below. It contains one Sub that takes the name of your modal popup and the delay before displaying it (in milliseconds) as parameters, injecting the necessary javascript into your page for displaying the modal popup/progress when processing is occurring.

Public Class clsModalProgress
Public Shared Sub DoModalProgress(ByVal mdl As AjaxControlToolkit.ModalPopupExtender, ByVal delay As Integer)
Dim pg As Page = HttpContext.Current.Handler
If Not pg Is Nothing Then
If Not pg.ClientScript.IsStartupScriptRegistered(“progressScript”) Then
Dim t As Type
t = pg.GetType()
pg.ClientScript.RegisterStartupScript(t, “progressScript”, _
“Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);” & Environment.NewLine & _
“Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);” & Environment.NewLine & _
“var count;” & Environment.NewLine & _
“function beginRequest(sender, args){” & Environment.NewLine & _
”  count = setTimeout(“”showProgress()””, ” & delay & “);” & Environment.NewLine & _
“}” & Environment.NewLine & _
“function showProgress(){” & Environment.NewLine & _
”  $find(‘” & mdl.ClientID & “‘).show();” & Environment.NewLine & _
“}” & Environment.NewLine & _
“function endRequest(sender, args) {” & Environment.NewLine & _
”  clearTimeout(count);” & Environment.NewLine & _
”  $find(‘” & mdl.ClientID & “‘).hide();” & Environment.NewLine & _
“}”, True)
End If
End If
End Sub
End Class

You can simply call it in the Page_Load or Page_Prerender subs like this:

clsModalProgress.DoModalProgress(mdlPopup, 100)

In this case, the modal popup will display if processing take longer than one-tenth of a second.

August 6, 2008

Creating javascript alerts in ASP.NET with UpdatePanel (or without)

Filed under: Ajax,ASP.NET 2.0,Javascript,programming,UpdatePanel — delroger @ 8:33 pm

Just thought I’d share a couple of simple methods for creating javascript alert messages from an ASP.NET webpage, both when you are using AJAX (and an update panel) or just from a standard page.

In a standard page, you can easily create an alert message in the code-behind like this: 

ClientScript.RegisterClientScriptBlock(Me.GetType(), “yourkeyname”, “alert(‘hello’);”, True)

The parameters that are passed in are the System.Type (the Page type in this case), an arbitrary name for your script ‘key’, the javascript itself as a string, and a boolean indicating whether to add the script tags – i.e., <script type=”javascript”></script> – which you might as well use since it shortens the script itself.

Likewise, creating an alert when you are using an UpdatePanel is slightly different, but simpler than you might think – you just need to make sure the System.Type is the UpdatePanel type, and use the ScriptManager rather than the ClientScript like so:

ScriptManager.RegisterStartupScript(Me.UpdatePanel1, Me.UpdatePanel1.GetType(), “yourkeyname”, “alert(‘hello’);”, True)

This is much the same as before except you are passing in the ID of your UpdatePanel along with the other parameters.

Now, since this is code that you are likely to want to re-use throughout an application, it makes sense to create a Class file for it with a couple of generic methods, like this:

Imports Microsoft.VisualBasic
Imports System.Web
Imports System.Web.UI
Public Class Messages
    Public Shared Sub CreateMessageAlertInUpdatePanel(ByVal up As UpdatePanel, ByVal strMessage As String)
        Dim strScript As String = “alert(‘” & strMessage & “‘);”
        Dim guidKey As Guid = Guid.NewGuid()
        ScriptManager.RegisterStartupScript(up, up.GetType(), guidKey.ToString(), strScript, True)
    End Sub
    Public Shared Sub CreateMessageAlert(ByVal strMessage As String)
        Dim guidKey As Guid = Guid.NewGuid()
        Dim pg As Page = HttpContext.Current.Handler
        Dim strScript As String = “alert(‘” & strMessage & “‘);”
        pg.ClientScript.RegisterStartupScript(pg.GetType(), guidKey.ToString(), strScript, True)
    End Sub
End Class

(We’re just using the Guid for the script key to ensure a new key each time we create an alert)

And that’s it! You can now create alert messages from any of your webpages simply by using:

CreateMessageAlertInUpdatePanel(Me.UpdatePanel1, “hello”)
or

CreateMessageAlert(“hi”)

July 30, 2008

Postback occurring after Cancel clicked

Filed under: ASP.NET 2.0,Javascript,programming — delroger @ 10:06 pm

It’s quite common to use a Javascript function when you want a website user to confirm that they want to delete a file (for instance) or a database record. In ASP.NET, you would add code to OnClientClick for a button (for example), along the lines of:

return confirm(‘Are you sure?’);

This can also be done in the code-behind under Page_Load or Page_PreRender as buttonname.Attributes.Add(“onclick”,”return confirm(‘Are you sure?’)”)

Similarly, you can also call a javascript function that does much the same thing, such as:

function confirm_delete()
    {
        if (confirm(“Are you sure?”)==true)
            return true;
        else
            return false;
    }

…and use:

 return confirm_delete(); 

for the onclick/onclientclick.

This would appear in the actual webpage as an OnClick event for the button. When the button is clicked, the user would see a javascript confirm window, with ‘Are you sure?’ and an OK and a Cancel button. Clicking OK would continue to process any code for the button; clicking Cancel would stop further processing.

It’s also common to find a lot of people have problems with this not working, and in the majority of cases it is because a javascript function is called that returns true or false, but the ‘return’ is missing. Using the example above, if you simply said

confirm(‘Are you sure?’); or confirm_delete();

without the ‘return’, the page would still postback, whatever had been clicked.

Today, I found that even with the ‘return’, postback was still occurring on a webpage I had created; in this case, a file delete still took place even when I clicked the ‘Cancel’ button and a value of false was being returned. 

So, just in case anyone else finds the same thing, this may well be a bug in Internet Explorer 7 (though I have not yet had chance to check this). The solution is to add some extra code to the return confirm, like this:

if (confirm(‘Are you sure?’) == false) {event.returnValue=false; return false; }else{ return true;};

It seems as though we have to specifically set the event.returnValue to be false to prevent further processing and postback.  This took me a few hours to work out, so hopefully this solution may save someone from wasting a similar amount of time, because it doesn’t seem to be very well documented so far.  And if it does help you, please leave a message and say ‘hi’!

Create a free website or blog at WordPress.com.