ASP.NET C#在页面加载时显示加载图像

时间:2016-04-15 04:21:12

标签: jquery asp.net loading-image

在选择 RadioButtonList &时,是否有任何关于加载图片的建议? DropDwonList ??或者在页面加载时可能会输入一些消息,例如 “Please Wait .. Page is Loading” 。加载AutoPostBack的图像。我有一个主页。

这是webform

<td class="auto-style177">
<asp:Panel ID="Panel101" runat="server" Visible="False">
<asp:RadioButtonList ID="rbPembeli2" runat="server" CellPadding="0" CellSpacing="0"
Font-Size="X-Small" Height="20px" RepeatDirection="Horizontal" Width="277px"
AutoPostBack="True" OnSelectedIndexChanged="rbPembeli2_SelectedIndexChanged">
<asp:ListItem Value="9">HQ ANA EDAR</asp:ListItem>
<asp:ListItem Text="PDA/PPN" Value="0"></asp:ListItem>
<asp:ListItem Text="PPP/PPW" Value="5"></asp:ListItem>
</asp:RadioButtonList></asp:Panel>
</td>

这是Js

    function ShowProgress() {
        setTimeout(function () {
            var modal = $('<div />');
            modal.addClass("modal");
            $('body').append(modal);
            var loading = $(".loading");
            loading.show();
            var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
            var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
            loading.css({ top: top, left: left });
        }, 200);
    }
    $('form').live("submit", function () {
        ShowProgress();
    });

1 个答案:

答案 0 :(得分:1)

更改如下,

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Panel ID="Panel101" runat="server" Visible="False">
        <asp:RadioButtonList ID="rbPembeli2" runat="server" CellPadding="0" CellSpacing="0"
        Font-Size="X-Small" Height="20px" RepeatDirection="Horizontal" Width="277px"
        AutoPostBack="True" OnSelectedIndexChanged="rbPembeli2_SelectedIndexChanged">
        <asp:ListItem Value="9">HQ ANA EDAR</asp:ListItem>
        <asp:ListItem Text="PDA/PPN" Value="0"></asp:ListItem>
        <asp:ListItem Text="PPP/PPW" Value="5"></asp:ListItem>
        </asp:RadioButtonList></asp:Panel>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
    <ProgressTemplate>
        <div id="Background">
        </div>
        <div id="Progress">
            <img src="images/loading.gif" alt="" />
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

loading.gif,您可以从谷歌下载任何gif文件。

包含在CSS下面,

#Background
{
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: Gray;
    filter: alpha(opacity=40);
    opacity: 0.4;
    z-index: 1006;
}
#Progress
{
    position: fixed;
    top: 30%;
    left: 48%;
    z-index: 1006;
}

不要使用任何JS。