Pages

Thursday, February 28, 2013

How to add processing div in web page


You might be wondering on How to add processing div in web page using jQuery in ASP.NET, this processing bar will be shown on each user action which is going back to server. You can download all the supporting files including javascript and images by clicking here, you may follow the steps below to add the processing div.
First of all you need to add the script reference to the some javascript files. There are multiple ways to add a reference.
1. If you are using Telerik then add a reference to your Telerik assembly on the page:
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
then put these lines in your page under 'form' tag.
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

then put these lines in your page under 'form' tag.

<telerik:RadScriptManager ID="ToolkitScriptManager1" runat="server" >
        <Scripts>
            <asp:ScriptReference Path="~/Scripts/ProgressScript.js" />
            <asp:ScriptReference Path="~/Scripts/jquery-1.4.1.min.js" />
        </Scripts>
    </telerik:RadScriptManager>
2. If you are using AjaxControlToolkit then add a reference to your AjaxControlToolkit assembly:
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
then put these lines in your page under 'form' tag.
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Path="~/Scripts/ProgressScript.js" />
        </Scripts>
    </cc1:ToolkitScriptManager>
now you need to define the div which will be displayed as a processing div.
<div id="pnlPopup" class="PrProgress" style="display: none;">
        <div id="innerPopup" class="PrContainer">
            <div class="PrHeader">
            
               <asp:Label ID="Label9" runat="server" Text="<%$ Resources:Language, PleaseWait %>" />
               
               </div>
            <div class="PrBody">
                <asp:Image runat="server" Width="220px" Height="19px" AlternateText="loading..."  ID="imgUpdateProgress" ImageUrl="~/images/activity.gif" />
                
            </div>
        </div>
    </div>
You might have notices that there are few CSS classes being used, they are described below:
.PrProgress
{
    display: block;
    position: absolute;
    padding: 2px 3px;
}
.PrContainer
{
    border: solid 1px #808080;
    border-width: 1px 0px;
}
.PrHeader
{
    background: url(../../Images/sprite.png) repeat-x 0px 0px;
    border-color: #808080 #808080 #ccc;
    border-style: solid;
    border-width: 0px 1px 1px;
    padding: 0px 10px;
    color: #000000;
    font-size: 9pt;
    font-weight: bold;
    line-height: 1.9;  
    white-space:nowrap;
    font-family: verdana,helvetica,clean,sans-serif;
}
.PrBody
{
    background-color: #f2f2f2;
    border-color: #808080;
    border-style: solid;
    border-width: 0px 1px;
    padding: 10px;
}
.PrIFrame
{
 
}
Now you need to call some javascript to make it function, add this javascript at the end of your page before "body" closing tag.
<script type="text/javascript">
        Sys.Application.add_load(applicationLoadHandler);
        Sys.Application.add_unload(applicationUnloadHandler);
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler);
    </script>
Just run the page in the browser and see the difference on each server action.

No comments: