ASP.NET: preventing twice click, when AutoGenerateEditButton="True" in gridview control

Custom controls of gridview and detailsview, allow to edit, insert or delete a record very easily.As you know, when user clicks, for example, "update" link, for saving the changes, can happens that the stored procedure takes some seconds to run.

For the end user, it is not easy understanding what the system is doing, nothing happens.

I tried to find over the internet some smart solution, like disabling the "update" link, on client side script. Unfortunately I didn't find any good solution for my scope.

Finally I remembered the great potentialities of <updatePanel> script.
Infact It is possible to put over the popup, developed using Jquery, an image, that denies any click on the page, until the stored procedure is finished.

 

 

Let's go now inside the code.

- Declare inside the popup window the script manager and update panel tags.<form runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" >
</asp:ToolkitScriptManager>
<A3G:UC_Spinner_02 ID="UC_Spinner" runat="server" associatedupdatepanelid="MainUpdatePanel" />
<asp:UpdatePanel runat="server" ID="MainUpdatePanel">
<ContentTemplate>
<asp:DetailsView ID="dwProductFix" runat="server" Height="50px" Width="100%" AutoGenerateRows="False" AutoGenerateEditButton="True" DefaultMode="Edit" ..../>
....
</ContentTemplate>
</asp:UpdatePanel>
</form>

- Create a user control that contains the image of "Loading" feature.
<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="UC_Spinner_02.ascx.vb" Inherits="xxxxx.UC_Spinner_02" %>

<asp:updateprogress ID="updateprogress" runat="server" dynamiclayout="true" DisplayAfter="0">
<progresstemplate>
<div class="progressBackgroundFilter">
<div style="z-index: 10001; position: absolute;width: 124px;height:124px;left: 50%;
top:50%;margin-left: -62px;margin-top: -62px; text-align:center;">
<img src="/images/spinner3.gif" alt="loading..."></div>
</div>
</progresstemplate>
</asp:updateprogress>

- Remember to declare in web.config file the new user control.

<add tagPrefix="A3G" tagName="UC_Spinner_02" src="~/Controls/UC_Spinner_02.ascx" />

That's all.
Fabio Mariano