locked
Modal 'Progress Bar' on Page Load RRS feed

  • Question

  • User-1143495431 posted

    I'm looking for an example of how to implement some sort of modal popup that states 'Loading' or displays a gif when my pages load.

    I have about a dozen pages all inherited from a master page.  I'd like to do it from the master page load but don't mind coding it in each page as well.

    Most of the examples I can find are all called from button clicks but my site is menu driven...

    Appreciate any response.

    I need examples in VB.net not C.

    Thanks

    Monday, January 27, 2014 10:32 PM

Answers

All replies

  • User-1143495431 posted

    Thanks for those links however it's not really what I am looking for.

    I would like an example that dims the page you are on and displays a gif or something as the page loads.

    Also I am using master pages so I would prefer to use this code in my site.master so it shows it for all pages..

    Again most of the examples provided show how to do this via a button click..  and the code is in C.

    How do I handle this from a page load event?

    Example of one of my pages:

    <%@ Page Title="" Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="Main.aspx.vb" Inherits="Main" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
        <style type="text/css">
            .style1
            {            
                font-size: medium;
                text-align: center;
            }
            .style2
            {
                width: 100%;
            }
            .style5
            {
                width: 102px;
                font-size: medium;
                text-align: left;
            }
            .style8
            {
                width: 118px;
                text-align: left;
            }
            .style9
            {
                width: 16px;
            }
            .style11
            {
                width: 7px;
            }
        </style>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    
         <asp:DataList ID="dlServerAndDatabaseTotals" runat="server" 
             HorizontalAlign="Center" DataSourceID="MetricsServerDatabaseSummary" 
             RepeatDirection="Horizontal">
                        <ItemTemplate>
                            <table class="style2">
                                <tr>
                                    <td class="style5">
                                        <asp:Label ID="Server_TypeLabel" runat="server" 
                                            style="font-weight: 700; text-decoration: underline; font-size: large;" 
                                            Text='<%# Eval("[Server Type]") %>' /></td>
                                    <td class="style11">&nbsp;</td>
                                    <td class="style8">&nbsp;</td>
                                </tr>
                                <tr>
                                    <td class="style5">Servers:</td>
                                    <td class="style11">&nbsp;</td>
                                    <td class="style8"><asp:Label ID="ServersLabel" runat="server" 
                                            style="text-align: left; font-size: medium;" Text='<%# Eval("Servers") %>' /></td>
                                </tr>
                                <tr>
                                    <td class="style5">Databases:</td>
                                    <td class="style11">&nbsp;</td>
                                    <td class="style8"><asp:Label ID="DatabasesLabel" runat="server" 
                                            style="text-align: left; font-size: medium;" Text='<%# Eval("Databases") %>' /></td>
                                </tr>
                                <tr>
                                    <td class="style5">Total Size:</td>
                                    <td class="style11">&nbsp;</td>
                                    <td class="style8"><asp:Label ID="Total_SizeLabel" runat="server" 
                                            style="text-align: left; font-size: medium;" 
                                            Text='<%# Eval("[Total Size]") %>' /></td>
                                </tr>
                            </table>
                        </ItemTemplate>
        </asp:DataList>
         <br />
         <br />
        <br />
        <div style="text-align: center">
    
        <asp:Chart ID="chtMetricsServerTotalByClient" runat="server" DataSourceID="MetricsServerTotalByClient"
                   width="700px" Height="400px">
            <Titles>
                    <asp:Title Font="Times New Roman, 12pt, style=Bold" Name="Title1" 
                        Text="Total Servers by Client">
                    </asp:Title>
                </Titles>
            <Series>
                <asp:Series Name="Series1" XValueMember="ClientName" YValueMembers="Servers" 
                    BorderWidth="2" ChartType="Bar">
                </asp:Series>
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="MainChartArea">
                    <AxisY> 
                            <StripLines> 
                                <asp:StripLine TextAlignment="Near" BorderDashStyle="Solid" BorderColor="Orange" BorderWidth="4" BackColor="Orange" /> 
                            </StripLines> 
                        </AxisY>
                </asp:ChartArea>
            </ChartAreas>
        </asp:Chart>
        </div>
         <br />
         <br />
        <div style="text-align: center;">
        <span>Quick Search</span>
        </div>
        <div style="text-align: center;">
        <asp:DropDownList ID="ddlClientList" runat="server" AppendDataBoundItems="true" 
                    Height="19px" Width="277px" 
                        DataSourceID="MetricsClientNameList" DataTextField="ClientName" 
                        DataValueField="ClientName" AutoPostBack="True" 
            BackColor="#FFF7E7" Font-Bold="True">
                        <asp:ListItem>-- Select a Client --</asp:ListItem>
                        <asp:ListItem>-- All Clients --</asp:ListItem>
                    </asp:DropDownList>
        <br />
        <asp:DropDownList ID="ddlProductList" runat="server" AppendDataBoundItems="true" 
                    Height="19px" Width="277px" 
                        DataSourceID="MetricsProductList" DataTextField="ProductName" 
                        DataValueField="ProductName" AutoPostBack="True" 
            BackColor="#FFF7E7" Font-Bold="True">
                        <asp:ListItem>-- Select a Product --</asp:ListItem>
                        <asp:ListItem>-- All Products --</asp:ListItem>
                    </asp:DropDownList>
        <br />
        <asp:DropDownList ID="ddlServerName" runat="server" AppendDataBoundItems="true" 
                    Height="19px" Width="277px" 
                    DataSourceID="MetricsServerNameList" DataTextField="ServerName" 
                    DataValueField="ServerName" AutoPostBack="True" 
            BackColor="#FFF7E7" Font-Bold="True">
                    <asp:ListItem>-- Select a Server --</asp:ListItem>
                    <asp:ListItem>-- All Servers --</asp:ListItem>
                </asp:DropDownList>
        <br />
        <asp:DropDownList ID="ddlDatabaseName" runat="server" 
                    AppendDataBoundItems="true" Height="19px" 
                    Width="277px" DataSourceID="MetricsDatabaseNameList" 
                    DataTextField="DatabaseName" DataValueField="DatabaseName" 
                    AutoPostBack="True" BackColor="#FFF7E7" Font-Bold="True">    
                    <asp:ListItem>-- Select a Database --</asp:ListItem>
                    <asp:ListItem>-- All Databases --</asp:ListItem>
                </asp:DropDownList>
    </div>
        <br />
        <br />
        <br />
        <br />
        <strong><span class="style1">Current JIRA Tickets</span></strong>
        <br />
        <br />
        <asp:GridView ID="gvJiraTickets" runat="server" CellPadding="4" Width="600px" 
            BackColor="White" BorderColor="#CC9966" BorderStyle="None" 
            BorderWidth="1px" GridLines="Horizontal" Height="129px">
            <AlternatingRowStyle BackColor="White" />
            <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
            <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" 
                Wrap="False" />
            <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
            <RowStyle BackColor="White" ForeColor="#330099" HorizontalAlign="Left" />
            <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
            <SortedAscendingCellStyle BackColor="#FEFCEB" />
            <SortedAscendingHeaderStyle BackColor="#AF0101" />
            <SortedDescendingCellStyle BackColor="#F6F0C0" />
            <SortedDescendingHeaderStyle BackColor="#7E0000" />
        </asp:GridView>
        <br />
    
    
        <asp:SqlDataSource ID="MetricsServerNameList" runat="server" 
            ConnectionString="<%$ ConnectionStrings:METRICSConnectionString %>" 
            SelectCommand="EXEC spWebServerNames"></asp:SqlDataSource>
    
        <asp:SqlDataSource ID="MetricsDatabaseNameList" runat="server" 
            ConnectionString="<%$ ConnectionStrings:METRICSConnectionString %>" 
            SelectCommand="exec spWebDatabaseNames"></asp:SqlDataSource>
    
        <asp:SqlDataSource ID="MetricsServerDatabaseSummary" runat="server" 
            ConnectionString="<%$ ConnectionStrings:METRICSConnectionString %>" 
            SelectCommand="exec spWebServerDatabaseSummary"></asp:SqlDataSource>
    
        <asp:SqlDataSource ID="MetricsClientNameList" runat="server" 
            ConnectionString="<%$ ConnectionStrings:METRICSConnectionString %>" 
            SelectCommand="SELECT [ClientName] FROM [ClientList_SSIS] ORDER BY [ClientName]">
        </asp:SqlDataSource>
    
        <asp:SqlDataSource ID="MetricsProductList" runat="server" 
            ConnectionString="<%$ ConnectionStrings:METRICSConnectionString %>" 
            SelectCommand="SELECT [ProductName] FROM [ProductList_SSIS] ORDER BY [ProductName]">
        </asp:SqlDataSource>
    
        <asp:SqlDataSource ID="MetricsServerTotalByClient" runat="server" 
            ConnectionString="<%$ ConnectionStrings:METRICSConnectionString %>" 
            SelectCommand="exec spWebServerTotalByClient"></asp:SqlDataSource>
    
        <br />
          
    </asp:Content>
    

    Thanks for any replies.

    Tuesday, January 28, 2014 2:35 PM
  • User-933407369 posted

    hi jamieccjccs,

    According to your description, you can try the demo below:

    http://jsbin.com/uKAdujoY/3/edit

    Hope it helps you.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 5, 2014 3:14 AM
  • User1051314974 posted

    It it dosent affect your code, put your content place holder inside an update panel and associate an updateprogress with that updatepanel.

    Wednesday, February 5, 2014 5:37 AM