DOT NET SOLUTIONS: Progress Bar In asp.net

CSS
=================
.divWaiting {
position: absolute;
background-color: #FAFAFA;
z-index: 2147483647 !important;
opacity: 0.8;
overflow: hidden;
text-align: center;
top: 0;
left: 0;
height: 100%;
width: 100%;
padding-top: 20%;
}

==========================
ASPX PAGE
=================
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="show.aspx.cs" Inherits="show" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('a#popup').live('click', function (e) {

var page = $(this).attr("href") //get url of link

var $dialog = $('<div></div>')
.html('<iframe style="border: 0px; " src="' + page + '" width="1000px" height="100%"></iframe>')
.dialog({
autoOpen: false,
modal: true,
height: 600,
width: 'auto',
title: $(this).attr("title"),
buttons: {
"Close": function () { $dialog.dialog('close'); }
},
close: function (event, ui) {
__doPostBack('<%= btnRefresh.ClientID %>', '');
}
});
$dialog.dialog('open');
e.preventDefault();
});

});

</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:PostBackTrigger ControlID="btnRefresh" />
</Triggers>
<ContentTemplate>
<asp:Button ID="btnRefresh" Text="refresh" runat="server" Visible="false" Style="display: none" />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" DisplayAfter="10"
runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="divWaiting">
<asp:Label ID="lblWait" runat="server"
Text=" Please wait... " Font-Names="Arial" />
<asp:Image ID="imgWait" runat="server"
ImageAlign="Middle" ImageUrl="~/images/gears_an.gif" Width="80px" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</form>
</body>
</html>

=====================

IMAGE

-------------------------------

DOT NET SOLUTIONS

Wednesday, 28 January 2015

Progress Bar In asp.net

No comments:

Post a Comment