ASP.NET Webforms has the UpdatePanel and UpdateProgress controls, intended originally to simplify AJAX development. However these are not as easy to use as the designers intended, MVC is far easier when writing CRUD pages using AJAX or otherwise.
In a legacy app recently, I came across some code where a FormView was inside an UpdatePanel, and the system was not giving the end user any feedback when for example the Update button was pressed when saving edits. This could lead to the user pressing the button twice, the second press causing an update on top of an update, which led to an error. This is what the code looked like:
|
1 2 3 4 5 6 7 8 |
<asp:UpdatePanel runat="server" ID="UpdatePanel1" > <ContentTemplate> <div class="customerdetail"> <h1>Customer Details</h1> <asp:FormView runat="server" ID="CustomerFormView" ... |
The UpdateProgress control can be added as follows:
|
1 2 3 4 5 6 7 8 9 10 |
<asp:UpdateProgress ID="UpdateProgress1" runat="server"> <ProgressTemplate> <div id="divProgress"> <p>Processing... Please wait...</p> <img src="../Images/ajax-loader.gif" alt="Processing... Please wait..." /> </div> </ProgressTemplate> </asp:UpdateProgress> |
CSS can also be added to overlay the progress panel over the top of the existing page, which makes it non-missable and also discourages the user from pressing any of the buttons on the page (it still is possible to press them). This CSS allows a small 200×200 image to be displayed. I used www.ajaxload.info to generate a simple animated GIF and the following CSS to white out the entire page when the button was pressed:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
#divProgress { text-align: center; position: absolute; background-color: white; top: 0; left: 0; width: 100%; height: 100%; padding-top: 50%; margin-top: -100px; -ms-opacity: 0.7; -moz-opacity: 0.7; opacity: 0.7; -moz-filter: alpha(opacity=70); -o-filter: alpha(opacity=70); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; -webkit-filter: alpha(opacity=70); filter: alpha(opacity=70); z-index: 10000; } |
This just leaves the problem of the user, if they are really determined, to press the Update button twice. I wanted a fairly generic solution because I intended to use this on a lot of pages (couple of dozen at least), so I went with some JavaScript to disable the button that had just been pressed. This solution is not perfect, as it doesn’t stop the user pressing one of the other buttons on the page, but hey, if they are really determined to mess about they could press update and then turn off the PC! Here is the javascript, it disables the sending button at the start of a request and re-enables it at the end of a request:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// Get the instance of PageRequestManager. var prm = Sys.WebForms.PageRequestManager.getInstance(); // Add initializeRequest and endRequest prm.add_initializeRequest(prm_InitializeRequest); prm.add_endRequest(prm_EndRequest); // Called when async postback begins function prm_InitializeRequest(sender, args) { // Disable button that caused a postback var sourceElement = $get(sender._postBackSettings.sourceElement.id); if (sourceElement != null) { sourceElement.disabled = true; } } // Called when async postback ends function prm_EndRequest(sender, args) { // Enable button that caused a postback var sourceElement = $get(sender._postBackSettings.sourceElement.id); if (sourceElement != null) { sourceElement.disabled = false; } } |
I then packaged this all up into a user control so it could be included in multiple pages as follows:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ShowProgress.ascx.cs" Inherits="XXX.YYY.Web.Secure.UserControls.ShowProgress" %> <script src="../../Scripts/showprogress.js" type="text/javascript"></script> <asp:UpdateProgress ID="UpdateProgress1" runat="server"> <ProgressTemplate> <div id="divProgress"> <p>Processing... Please wait...</p> <img src="../Images/ajax-loader.gif" alt="Processing... Please wait..." /> </div> </ProgressTemplate> </asp:UpdateProgress> |
Code behind for the user control:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
namespace XXX.YYY.Web.Secure.UserControls { public partial class ShowProgress : System.Web.UI.UserControl { public string AssociatedUpdatePanelId { get { return UpdateProgress1.AssociatedUpdatePanelID; } set { UpdateProgress1.AssociatedUpdatePanelID = value; } } } } |
The way this is used in a page is as follows:
|
1 2 3 4 5 6 7 8 9 |
... <%@ Register tagPrefix="uc" tagName="ShowProgress" Src="~/Secure/UserControls/ShowProgress.ascx" %> ... <%-- UpdatePanel1 omitted for clarity --%> ... <uc:ShowProgress ID="ShowProgress1" runat="server" AssociatedUpdatePanelId="UpdatePanel1"/> ... |
I have tried to keep this post as concise as possible, hopefully it will help somebody.
Leave a Reply