asp.net冻结后台页面加载弹出窗口

时间:2014-03-27 10:42:49

标签: c# asp.net

这是我的ASPX代码

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <style type="text/css">
    .image1
    {
        top:100;
    }
    #dvLoading
    {

    }
</style>
</asp:Content>
<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <br />
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
        ControlToValidate="TextBox1" ErrorMessage="**"></asp:RequiredFieldValidator>
    <br />
    <br />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server">
        <ProgressTemplate>
           <class="dvLoading" style=" height:100%; top:0; width:100%; background-color: gray; opacity: 0.4; filter: alpha(opacity=40);
                        left: 0px; z-index: 999999; position: absolute; text-align: center; vertical-align:middle" />
            <asp:Image ID="Image1" runat="server" ImageUrl="~/load1.png" Width="146px" 
                ImageAlign="Middle" CssClass="image1" />
        </ProgressTemplate>
    </asp:UpdateProgress>
</asp:Content>

问题在于,当我编译它时,一切都很好,但我的&#34; load1.png&#34;图像将转到页面顶部, 但我希望我的加载图像能够居中。

我正在使用Visual Studio 2010

2 个答案:

答案 0 :(得分:0)

我建议你为此目的使用jQuery插件jquery.malsup.com/block/。它非常可定制,可自动适用于整个页面或某些DOM元素。

所有更新面板请求的常规解决方案: 添加对jQuery和http://malsup.github.io/jquery.blockUI.js脚本的引用并写入:

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function (){
    $.blockUI();
});
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function (){
    $.unblockUI();
});

或者您只能在按钮ClientClick事件上添加对$ .blockUI()的调用。

答案 1 :(得分:0)

这是我的答案。 谢谢大家帮助我

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    </asp:Content>
<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <br />
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
        ControlToValidate="TextBox1" ErrorMessage="**"></asp:RequiredFieldValidator>
    <br />
    <br />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server">
        <ProgressTemplate>
           <class="dvLoading" style=" height:100%; top:0; width:100%; background:url(load1.png) no-repeat center center,gray;
               opacity: 0.8; left: 0px; z-index: 999999; position: absolute; text-align: center; vertical-align: middle; " />
        </ProgressTemplate>
    </asp:UpdateProgress>
</asp:Content>