locked
Dovetail off of Oracle Dataset posting - implement timer reload of data RRS feed

  • Question

  • User-718146471 posted

    Hi there, many thanks to MGEBHard for his help. The original thread is found here. What I need to do now is get the data refresh to happen
    but show the "Loading Data - Please Wait..." Say every two minutes or so. Here is my existing code:

    aspx:

    <%@ Page Title="Audited Apps No Comments" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Dashboard.aspx.cs" 
    Inherits="ASPNETApp.AppsByDevReport" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script> <script type="text/javascript"> $(function () { function DoPost() { $('#loadingGraphic').show(); $('#<%=HiddenPostback.ClientID%>').click(); } //Submit a post back if this page was requested for the first time var shouldIPostBack = $('#<%=ShouldIPostback.ClientID%>').val(); if (shouldIPostBack == 'yes') { DoPost(); } $('#ShowDashboard').click(function () { $('#DashBoardData').hide(); DoPost(); return false; }); }); </script> <style type="text/css"> .modal { ; top: 0; left: 0; background-color: black; z-index: 99; opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8; min-height: 100%; width: 100%; } .loading { font-family: Arial; font-size: 10pt; border: 5px solid #67CFF5; width: 200px; height: 100px; display: none; ; background-color: White; z-index: 999; } </style> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <div style="display:none"> <asp:Button ID="HiddenPostback" runat="server" Text="HiddenPostback" /> <asp:HiddenField ID="ShouldIPostback" runat="server" /> </div> <div id="DashBoardData"> <div style="text-align:center"> <asp:Label ID="lblTitle" runat="server" Text="Application Dashboard" Font-Bold="True" Font-Size="XX-Large" /> <br /> </div> <div id="loadingGraphic" style="display:none"> <asp:Label ID="lblRefreshing" runat="server" Text="Refreshing Dashboard, please wait..."></asp:Label> </div> <br /> <div style="text-align: center">Applications with No Developer Comments<br /> </div> <asp:GridView ID="gvAppListing" runat="server" CellPadding="4" ForeColor="#333333" Width="100%" AutoGenerateColumns="False"> <AlternatingRowStyle BackColor="White" ForeColor="#284775" /> <Columns> <asp:TemplateField HeaderText="Application Version"> <ItemTemplate> <asp:Label ID="lblProjName" runat="server" Text='<%# Bind("Project") %>'></asp:Label> <asp:Label ID="lblProjVers" runat="server" Text='<%# Bind("Version") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Priority"> <ItemTemplate> <asp:Label ID="lblPriority" runat="server" Text='<%# Bind("Priority") %> '></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Category"> <ItemTemplate> <asp:Label ID="lblCategory" runat="server" Text='<%# Bind("Category") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> </Columns> <EditRowStyle BackColor="#999999" /> <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Center" VerticalAlign="Top" /> <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" /> <RowStyle BackColor="#F7F6F3" ForeColor="#333333" /> <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" /> <SortedAscendingCellStyle BackColor="#E9E7E2" /> <SortedAscendingHeaderStyle BackColor="#506C8C" /> <SortedDescendingCellStyle BackColor="#FFFDF8" /> <SortedDescendingHeaderStyle BackColor="#6F8DAE" /> </asp:GridView> </div> <div> <input id="ShowDashboard" type="button" runat="server" value="Refresh Dashboard" /> </div> </asp:Content>

    cs:

    using System;
    using System.Configuration;
    using System.Data;
    using Oracle.ManagedDataAccess.Client;
    using System.Web.UI.WebControls;
    using System.Collections.Generic;
    using System.Threading;
    
    namespace ASPNETApp
    {
        public partial class AppsByDevReport : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (Page.IsPostBack)
                {
                    //bind grid view
                    ShouldIPostback.Value = "no";
                    DataGrab();
                }
                else
                {
                    //Tell the browser to post back
                    ShouldIPostback.Value = "yes";
                }
            }
    
            protected void DataGrab()
            {
                List<MockData> data = GetMockData(5000);
                gvAppListing.DataSource = data;
                gvAppListing.DataBind();
                DataTable dt = new DataTable();
                string OraQuery = "********************************************************"; // Hidden
                string OrConStr = ConfigurationManager.ConnectionStrings["OraConnStr"].ConnectionString;
                OracleConnection conn = new OracleConnection(OrConStr);
                OracleCommand cmd = new OracleCommand(OraQuery, conn);
                try
                {
                    conn.Open();
                    OracleDataReader rdr = cmd.ExecuteReader();
                    dt.Load(rdr);
                }
                catch (Exception ex)
                {
                    Response.Write(ex.ToString());
                }
                finally
                {
                    conn.Close();
                }
                gvAppListing.DataSource = dt;
                gvAppListing.DataBind();
            }
            private List<MockData> GetMockData(int delay)
            {
                Thread.Sleep(delay);
                return new List<MockData>()
                {
                    new MockData() {
                        Project = "One",
                        Version = "Two",
                        Priority = "Three",
                        Category = "Four"
                    },
                };
            }
        }
    
        public class MockData
        {
            public string Project { get; set; }
            public string Version { get; set; }
            public string Priority { get; set; }
            public string Category { get; set; }
        }
    }

    Monday, July 17, 2017 6:10 PM

Answers

  • User475983607 posted

    bbcompent1

    Hi there, many thanks to MGEBHard for his help. The original thread is found here. What I need to do now is get the data refresh to happen
    but show the "Loading Data - Please Wait..." Say every two minutes or so. Here is my existing code:

    I'm guessing that you want to refresh the page a X frequency?  If so, use a JavaScript setInterval().

    For example, add the following to ready function.

    var intervalID = window.setInterval(function(){
    	$('#DashBoardData').hide();
    	DoPost();
    }, 2 * 60 * 1000);

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 17, 2017 6:18 PM
  • User-1838255255 posted

    Hi bbcompent1,

    According to your description and code, I know you only want to reload the page every three minutes.

    I think you could use the setInterval to reload the page.

    Sample Code:

    <script src="Scripts/jquery-2.1.0.js"></script>
        <script>
            $(function () {
                myFunction();
            });
            function myFunction() {
                setInterval(function () {
                    $('#DashBoardData').hide();
                    $('#loadingGraphic').show();
                    location.reload();
                }, 180000);
            }
        </script>

    I think if use asynchronous to avoid refresh the whole page, it could get a friendly effect, you could check the following sample to avoid the whole page refresh.

    Auto Refresh UpdatePanel in ASP.Net:

    https://www.aspsnippets.com/Articles/Auto-Refresh-UpdatePanel-in-ASPNet.aspx 

    Best Regards,

    Eric Du

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 18, 2017 6:11 AM

All replies

  • User475983607 posted

    bbcompent1

    Hi there, many thanks to MGEBHard for his help. The original thread is found here. What I need to do now is get the data refresh to happen
    but show the "Loading Data - Please Wait..." Say every two minutes or so. Here is my existing code:

    I'm guessing that you want to refresh the page a X frequency?  If so, use a JavaScript setInterval().

    For example, add the following to ready function.

    var intervalID = window.setInterval(function(){
    	$('#DashBoardData').hide();
    	DoPost();
    }, 2 * 60 * 1000);

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 17, 2017 6:18 PM
  • User-1838255255 posted

    Hi bbcompent1,

    According to your description and code, I know you only want to reload the page every three minutes.

    I think you could use the setInterval to reload the page.

    Sample Code:

    <script src="Scripts/jquery-2.1.0.js"></script>
        <script>
            $(function () {
                myFunction();
            });
            function myFunction() {
                setInterval(function () {
                    $('#DashBoardData').hide();
                    $('#loadingGraphic').show();
                    location.reload();
                }, 180000);
            }
        </script>

    I think if use asynchronous to avoid refresh the whole page, it could get a friendly effect, you could check the following sample to avoid the whole page refresh.

    Auto Refresh UpdatePanel in ASP.Net:

    https://www.aspsnippets.com/Articles/Auto-Refresh-UpdatePanel-in-ASPNet.aspx 

    Best Regards,

    Eric Du

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 18, 2017 6:11 AM
  • User-718146471 posted

    Both are great for accomplishing my task so points for both of you :)

    Thursday, July 20, 2017 7:55 PM