ASP.NET C# Show loading image while page is load

Question

is there any suggestion for doing a loading image when selecting a RadioButtonList & DropDwonList ?? Or maybe put some message like "Please Wait.. The Page is Loading" while the page is loading. Loading image for AutoPostBack. I have a Masterpage.

This is 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>

This is 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();
    });

Have a look at http://github.hubspot.com/pace/docs/welcome/ pace provides progress bar and you don't have to code for any image loading just include necessary files(js & css).. — Prakash Thete, Apr 15 '16 at 04:27

score 1 · Answer 1 · answered Apr 15 '16 at 08:42

Change as below,

<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, you can download any gif file from google.

Include below 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;
}

Do not use any JS.

You can keep js as it is, but use what I send to you. It works as I tested it — INDIA IT TECH, Apr 15 '16 at 09:55

ASP.NET C# Show loading image while page is load

1 Answers1