加载页面或回发时显示处理图像 [英] Show processing image when a page is loaded or postback
本文介绍了加载页面或回发时显示处理图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用ajax在页面加载或回发时显示正在处理的图像.当我们单击或选择页面的任何控件时，正在显示处理的图像.
但我的代码无法正常工作.
这是我的代码.
I am using ajax for showing a processing image when the page is loaded or postback.and also when we click or select any control of page then processing image is showing.
but my code is not working.
here is my code.
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="ViewInformation.aspx.cs" Inherits="ViewInformation" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<style type="text/css">
.fixedHeader
{
overflow: auto;
height: 100%;
}
table th
{
position: relative;
}
</style>
<style type="text/css">
.books
{
text-align:right;
padding-left:680px;
}
</style>
<%-- <script type="text/javascript" language="javascript">
$(document).ready(function () {
$('#<%=grdInformation.ClientID %>').Scrollable();
}
)
</script>--%>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<%--<link href="css/cssUpdateProgress.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript">
var ModalProgress = '<%= ModalProgress.ClientID %>';
</script>--%>
<style type="text/css">
.WaitDisplay
{
border-right: 1px outset;
padding-right: 30px;
border-top: 1px outset;
padding-left: 30px;
font-size: 16pt;
padding-bottom: 30px;
border-left: 1px outset;
cursor: wait;
color: black;
padding-top: 30px;
border-bottom: 1px outset;
position: absolute;
background-color: #CCCCCC;
text-align: center;
font-family: Arial;
width: 150px;
height: 50px;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
<script type="text/javascript" language="javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
var postBackElement;
prm.add_initializeRequest(InitializeRequest);
prm.add_beginRequest(beginRequest);
function InitializeRequest(sender, args) {
postBackElement = args.get_postBackElement();
}
function beginRequest(sender, args) {
var tabContainer = $get(postBackElement.id);
var _updateProgressDiv = $get('<%= updProgressTab.ClientID %>');
var tabContainerwBounds = Sys.UI.DomElement.getBounds(tabContainer);
var updateProgressDivBounds = Sys.UI.DomElement.getBounds(_updateProgressDiv);
// center of the control
var x = tabContainerwBounds.x + Math.round(tabContainerwBounds.width / 2) - Math.round(updateProgressDivBounds.width / 2) - 37;
var y = tabContainerwBounds.y + Math.round(tabContainerwBounds.height / 2) - Math.round(updateProgressDivBounds.height / 2) - 15;
Sys.UI.DomElement.setLocation(_updateProgressDiv, x, y);
}
</script>
<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional" >
<ContentTemplate>
//This is our page
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="updProgressTab" AssociatedUpdatePanelID="updatePanel" runat="server" >
<ProgressTemplate>
<div class="WaitDisplay">
<asp:Image ID="imgLoading" runat="server" ImageUrl="images/loading.gif" Width="34px" />Processing...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<div>
<asp:Label ID="lblheading" runat="server" Text="View Book Information" CssClass="labelHeading"></asp:Label>
</div>
<br />
<%-- <script type="text/javascript" src="js/jsUpdateProgress.js"></script>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Panel ID="panelUpdateProgress1" runat="server" CssClass="updateProgress">
<asp:UpdateProgress ID="UpdateProg2" DisplayAfter="0" runat="server">
<ProgressTemplate>
<div style="position: relative; top: 30%; text-align: center;">
<img src="images/loading.gif" style="vertical-align: middle" alt="Processing" />
Processing ...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalProgress" runat="server" TargetControlID="panelUpdateProgress1"
BackgroundCssClass="modalBackground" PopupControlID="panelUpdateProgress1" />
<asp:UpdatePanel ID="updatePanel" runat="server">
<ContentTemplate>
<asp:Button ID="btnSubmit" runat="server" Text="Click Me" OnClick="btnSubmit_Click" Height="26px">
</asp:Button>
</ContentTemplate>
</asp:UpdatePanel>--%>
<div><table><tr><td><asp:Label ID="lblKeyword" Text="Keyword : " runat="server"></asp:Label></td>
<td colspan="2"><asp:TextBox ID="txtKeyword" runat="server"></asp:TextBox>
<asp:Button ID="btnsearch" runat="server" Text="Search"
onclick="btnsearch_Click"></asp:Button>
</td>
</tr>
<tr>
<td><asp:Label ID="lblselect" runat="server" Text="View By : "></asp:Label></td>
<td colspan="2"><asp:DropDownList ID="ddlSelect" runat="server" AutoPostBack="True"
CausesValidation="True" onselectedindexchanged="ddlSelect_SelectedIndexChanged">
<asp:ListItem Value="2">Total Books</asp:ListItem>
<asp:ListItem Value="1">Issued Books</asp:ListItem>
<asp:ListItem Value="0">Balanced Books</asp:ListItem>
<asp:ListItem Value="3">UnReturn Books</asp:ListItem>
</asp:DropDownList>
<asp:Label ID="lblTotal" runat="server" Text="Total No.of Books : " CssClass="books"></asp:Label>
<asp:Label ID="lblBooks" runat="server"></asp:Label>
</td>
</tr>
</table></div>
<br/>
<div style="border-style:solid;border-width:1px;">
<asp:GridView ID="grdInformation" runat="server" AutoGenerateColumns="False"
CellPadding="3" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None"
BorderWidth="1px" Width="100%"
onrowcommand="grdInformation_RowCommand"
AllowPaging="True" onpageindexchanging="grdInformation_PageIndexChanging1"
onrowdatabound="grdInformation_RowDataBound" PageSize="6">
<RowStyle ForeColor="#000066" />
<Columns>
<asp:BoundField DataField="id" HeaderText="ID" Visible="false" />
<asp:BoundField DataField="TagId" HeaderText="TagId" Visible="false" />
<asp:BoundField DataField="AuthorName" HeaderText="Author Name" >
</asp:BoundField>
<asp:BoundField DataField="Title" HeaderText="Title" >
</asp:BoundField>
<asp:BoundField DataField="Editor" HeaderText="Editor" >
</asp:BoundField>
<asp:BoundField DataField="Publisher" HeaderText="Publisher" >
</asp:BoundField>
<asp:BoundField DataField="ISBN" HeaderText="ISBN" >
</asp:BoundField>
<%-- <asp:BoundField DataField="Year" HeaderText="Year" >
</asp:BoundField>
<asp:BoundField DataField="Pages" HeaderText="Pages" >
</asp:BoundField>
<asp:BoundField DataField="Volume" HeaderText="Volume" >
</asp:BoundField>
<asp:BoundField DataField="PhySicalDescription"
HeaderText="Physical Description" >
</asp:BoundField>
<asp:BoundField DataField="Source" HeaderText="Source" >
</asp:BoundField>
<asp:BoundField DataField="Cost" HeaderText="Cost" >
</asp:BoundField>--%>
<asp:BoundField DataField="ClassNumber" HeaderText="Class Number" >
</asp:BoundField>
<asp:BoundField DataField="BookNumber" HeaderText="Book Number" >
</asp:BoundField>
<%-- <asp:BoundField DataField="BillNumber" HeaderText="Bill Number" >
</asp:BoundField>--%>
<asp:BoundField DataField="Remarks" HeaderText="Remarks" >
</asp:BoundField>
<asp:BoundField DataField="StatusForIssue" HeaderText="Status For Issue" >
</asp:BoundField>
<asp:TemplateField HeaderText="Edit" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
<ItemTemplate>
<a href="AddInformation.aspx?id=<%# Eval("id")%>">
<img src="images/Edit.gif" alt="edit" style="border: 0px;" />
</a>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle HorizontalAlign="Left" Width="6%" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Delete" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
<ItemTemplate>
<asp:ImageButton ID="ImgDelete" runat="server" CommandArgument='<%# Eval("id") %>'
CommandName="Del" OnClientClick="return confirm('Are you sure you want to delete this record?');"
ImageUrl="~/images/delete.png" />
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle HorizontalAlign="Left" Width="6%" />
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="White" ForeColor="#000066" />
<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
</asp:GridView>
<%--</asp:Panel>--%>
</div>
</asp:Content>
I want this thing only on single page.
请帮助我....
thnx
I want this thing only on single page.
please help me....
thnx
推荐答案
(document).ready(function () {
(document).ready(function () {
('#<%=grdInformation.ClientID %>').Scrollable(); } ) </script>--%> < 链接 =" css/style.css" rel =" stylesheet" 类型 文本/css" / > <%--<link href="css/cssUpdateProgress.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" language="javascript"> var ModalProgress = '<%= ModalProgress.ClientID %>'; </script>--%> < 样式 =" text/css" WaitDisplay { border-right: 1px outset; padding-right: 30px; border-top: 1px outset; padding-left: 30px; font-size: 16pt; 填充底部 : 30px; border-left: 1px outset; cursor: wait; color: black; 填充顶部 : 30px； border-bottom: 1px outset; 位置 : 绝对； background-color: #CCCCCC; 文本对齐 : 中心； font-family: Arial; width: 150px; height: 50px; } </ 样式 > < /asp:Content > < asp:Content ID =" ContentPlaceHolderID ContentPlaceHolder1 " Runat 服务器" <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /> < 脚本 =" 文本/javascript" 语言 javascript " var prm = Sys.WebForms.PageRequestManager.getInstance(); var postBackElement; prm.add_initializeRequest(InitializeRequest); prm.add_beginRequest(beginRequest); function InitializeRequest(sender, args) { postBackElement = args.get_postBackElement(); } function beginRequest(sender, args) { var tabContainer =
('#<%=grdInformation.ClientID %>').Scrollable(); } ) </script>--%> <link href="css/style.css" rel="stylesheet" type="text/css" /> <%--<link href="css/cssUpdateProgress.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" language="javascript"> var ModalProgress = '<%= ModalProgress.ClientID %>'; </script>--%> <style type="text/css"> .WaitDisplay { border-right: 1px outset; padding-right: 30px; border-top: 1px outset; padding-left: 30px; font-size: 16pt; padding-bottom: 30px; border-left: 1px outset; cursor: wait; color: black; padding-top: 30px; border-bottom: 1px outset; position: absolute; background-color: #CCCCCC; text-align: center; font-family: Arial; width: 150px; height: 50px; } </style> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /> <script type="text/javascript" language="javascript"> var prm = Sys.WebForms.PageRequestManager.getInstance(); var postBackElement; prm.add_initializeRequest(InitializeRequest); prm.add_beginRequest(beginRequest); function InitializeRequest(sender, args) { postBackElement = args.get_postBackElement(); } function beginRequest(sender, args) { var tabContainer =
get(postBackElement.id); var _updateProgressDiv =
get(postBackElement.id); var _updateProgressDiv =
这篇关于加载页面或回发时显示处理图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
