Hello all I am having a master page where I have a Menu and one of the item is as follows
Dim mnuItem As New RadMenuItem()
mnuItem.Text = displayname.DisplayName
mnuItem.Attributes.Add("onclick", "showLoadingPanel()")
mnuItem.NavigateUrl = "GetFile.aspx"
On my master page I have the following div
<div runat="server" id="loadingPanel" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999;">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
<img src="../Images/ajax-loader_clock.gif" alt="Loading..." />
</div>
</div>
The JavaScript to show the loading panel is as follows
function showLoadingPanel() {
var loadingPanel = document.getElementById("loadingPanel");
if (loadingPanel) {
loadingPanel.style.display = "block";
}
}
In my child page I am trying as follows by adding an attribute to hide it but couldn't
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="GetFile.aspx.vb" Inherits="GetFile" MasterPageFile="~/Site.master" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<style type="text/css">
.hide {
display: none;
}
</style>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
</asp:Content>
In my VB file on page load I am handling as follows but couldn't hide it
Dim loadingPanel As HtmlGenericControl = CType(Master.FindControl("loadingPanel"), HtmlGenericControl)
loadingPanel.Attributes.Add("class", "hide")
In my GetFile.aspx here is my code
If the page is getting redirected that is fine but I am doing this Public
Sub DeliverFile(ByVal Page As System.Web.UI.Page,
ByVal Data() As Byte, ByVal Type As String,
ByVal Length As Integer,
Optional ByVal DownloadFileName As String = "")
Page.Response.Clear()
Page.Response.ContentType = ContentType
'Page.Response.AddHeader("Content-Disposition", "SOA.pdf")
'Page.Response.AddHeader("Content-Disposition", $"attachment; filename={fileName}.pdf")
Page.Response.AddHeader("Content-Disposition", "attachment; filename=" & DownloadFileName & ".pdf")
Page.Response.AddHeader("Content-Length", Length)
Page.Response.BinaryWrite(Data)
Page.Response.End()
End Sub
Hello all I am having a master page where I have a Menu and one of the item is as follows
Dim mnuItem As New RadMenuItem()
mnuItem.Text = displayname.DisplayName
mnuItem.Attributes.Add("onclick", "showLoadingPanel()")
mnuItem.NavigateUrl = "GetFile.aspx"
On my master page I have the following div
<div runat="server" id="loadingPanel" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999;">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
<img src="../Images/ajax-loader_clock.gif" alt="Loading..." />
</div>
</div>
The JavaScript to show the loading panel is as follows
function showLoadingPanel() {
var loadingPanel = document.getElementById("loadingPanel");
if (loadingPanel) {
loadingPanel.style.display = "block";
}
}
In my child page I am trying as follows by adding an attribute to hide it but couldn't
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="GetFile.aspx.vb" Inherits="GetFile" MasterPageFile="~/Site.master" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<style type="text/css">
.hide {
display: none;
}
</style>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
</asp:Content>
In my VB file on page load I am handling as follows but couldn't hide it
Dim loadingPanel As HtmlGenericControl = CType(Master.FindControl("loadingPanel"), HtmlGenericControl)
loadingPanel.Attributes.Add("class", "hide")
In my GetFile.aspx here is my code
If the page is getting redirected that is fine but I am doing this Public
Sub DeliverFile(ByVal Page As System.Web.UI.Page,
ByVal Data() As Byte, ByVal Type As String,
ByVal Length As Integer,
Optional ByVal DownloadFileName As String = "")
Page.Response.Clear()
Page.Response.ContentType = ContentType
'Page.Response.AddHeader("Content-Disposition", "SOA.pdf")
'Page.Response.AddHeader("Content-Disposition", $"attachment; filename={fileName}.pdf")
Page.Response.AddHeader("Content-Disposition", "attachment; filename=" & DownloadFileName & ".pdf")
Page.Response.AddHeader("Content-Length", Length)
Page.Response.BinaryWrite(Data)
Page.Response.End()
End Sub
As pointed out in comments, both the master page, and the child page are combined into ONE page, and ONE transmission to the client side.
So, the page can take 1 second, or 20 seconds, and the end user will not see ANY content transmitted from the server. Only after 100% of the code behind is completed, and ONLY after both master + child page are combined into ONE payload that is THEN sent in ONE operation to the client side.
As such, you can't of course have some "please wait" while the page loads and is rendered, since ZERO content is transmitted from the server until such time all of the code behind runs and renders the page to be sent client side. This includes both master + child. They are transmitted in "one payload".
So, assuming you have this content in the master page:
(I have reduced the size, since with your z-index, I can't click on the buttons, so that's been removed also).
Hence this in master page:
<div runat="server" id="loadingPanel" clientidmode="static"
style="display: none; position: fixed; top: 10%; left: 0; width: 10%; height: 10%; background-color: rgba(0, 0, 0, 0.5);">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
<asp:Image ID="Image1" runat="server"
ImageUrl="~/Content/wait2.gif"
AlternateText="Loading..."
width="64px"
/>
</div>
</div>
Also, note closely in above, I have changed your image control from a client side control to a server side one. This allows use of "~/" which means root of the site. You can NOT use "relative" addressing for the master page images and content, since the master page as I pointed out is combined into ONE page, and that ONE page is the child page. So, relative addressing to images will CHANGE depending on the location of the child page! The current "relative" path names used are now the CHILD page for the MASTER page!
This means if you launch a child page nested in some folder, then ALL of the relative addressing you used in the master page will break!! Keep in mind that "~/" which means start from root ONLY works for server side controls, it does not work for client side JavaScript code.
So, now with above in master page, then say in our child page, we have this:
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<asp:Button ID="Button1" runat="server" Text="Show panel"
OnClientClick="myshow();return false"
/>
<br />
<br />
<asp:Button ID="Button2" runat="server" Text="Hide panel"
OnClientClick="myhide();return false"
/>
<script>
function myshow() {
alert('about to show')
$('#loadingPanel').show()
}
function myhide() {
$('#loadingPanel').hide()
}
</script>
</asp:Content>
And now the result is this:
Note also how I added clientidmode="static" to the div in the master page. If you don't add that, then the control ID as usual will be changed by .net due to the runat="server".
So, above shows a working bit of code that will show, and hide the div we have in the master page. But, as such, it not going to show some "loading" of the page to the client side, since 100% of the code, delays, and combine of the master + child occurs. Thus, all content, and rendering once done THEN is sent to the client side in one operation - thus removing any ability to show some "wait" based on server side content.
You have to let the content travel 100% to client side (to display the wait gif). Once the page is sent, loaded client side, THEN the animated gif will display. So, I suppose at that point, you could (have to) THEN trigger additional JavaScript to run, that can then in turn trigger additional server side code to run. So, you have to trigger the gif wait client side to display, and THEN call additional code which could/would trigger say some server code to load up the GridView or whatever it is that you want display (that presumably takes a long time).
Ah, yes, then this is most certainly possible.
So, let's change your div back to what you had (with z-index etc.).
Hence, your div in the master page is thus this:
<div runat="server" id="loadingPanel" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999;"
clientidmode="static"
>
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
<asp:Image ID="Image1" runat="server"
ImageUrl="~/content/wait2.gif"
width="64px"
/>
</div>
</div>
As noted, I used a asp.net image control, since the master page location will CHANGE the relative addressing. You can NOT use relative addressing in the master page markup, since you don't know which/when/where the nesting of the child page is going to be. So, the child page controls the relative path as nesting. If the child page is nested, then so are the references and path name(s) used in the master page. Use of a server control and "~/" thus means reference from the root of the project.
So, on page 1, I have this button and markup:
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<h3>Jump to another page - slow loading grid view</h3>
<asp:Button ID="cmdJump" runat="server" Text="Show Grid of fighters"
OnClick="cmdJump_Click"
OnClientClick="mywaitshow()"
CssClass="btn" />
<script>
function mywaitshow() {
$('#loadingPanel').show()
}
</script>
</asp:Content>
So, now upon button click, the client side code runs, displays the wait gif.
And the code behind for that button is simply this:
Protected Sub cmdJump_Click(sender As Object, e As EventArgs)
Response.Redirect("Fighters2.aspx")
End Sub
And the target page is this code:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="ID" CssClass="table" Width="100%">
<Columns>
<asp:BoundField DataField="Fighter" HeaderText="Fighter" />
<asp:BoundField DataField="Engine" HeaderText="Engine" />
<asp:BoundField DataField="Thrust" HeaderText="Thrust" />
<asp:BoundField DataField="Description" HeaderText="Description" />
<asp:TemplateField HeaderText="Preview">
<ItemTemplate>
<asp:Image ID="Image1" runat="server" Width="128px"
ImageUrl='<%# Eval("Imagepath") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
And code behind for the target page is this:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
LoadGrid
End If
End Sub
Sub LoadGrid()
System.Threading.Thread.Sleep(3000) ' fake 3 second wait
GridView1.DataSource = MyRst("SELECT * FROM Fighters")
GridView1.DataBind()
End Sub
So, note the fake delay. And note how the "wait" gif will automatic disappear. This is due to the WHOLE page being sent back from the server, and until that happens, we see the current page "div". With a new fresh whole page, then no code is required to hide the div.
Hence, the effect is now this: