Introduction
I recently read an article on Code Project written by Bryian Tan explaining how to create a loading page to display while waiting for a large page to load. The end result was a very neat transition between pages using a simple loading screen. This was achieved by using a HTML page and some JavaScript with all redirects going to that page. I decided to try and implement this inside an Iron Speed application.
Solution
Implementing this inside an Iron Speed application is a two step process. You start by creating your own loading page and then you have the choice of wiring up individual buttons to use it or have it done globally. To demonstrate this I have created a new Iron Speed v8.0.2 application using the sample southwind database and .Net Framework v4.
Create Loading Page
- In Windows Explorer create a new folder named “Loading” inside your application’s web folder.
- In Iron Speed Designer refresh the project by clicking refresh under the view menu option.
- Right click on the new folder and create a new page using an appropriate master page.
- Select the top cell in design mode and enter the following code.
<div style='position:absolute;z-index:5;top:45%;left:45%;'>
<img id="imgAjax" alt="loading..." title="loading..." src="../Images/Updating.gif" style="width: 100px; height: 100px" /><br /> <br />
</div>
- Right click on the page and select page directives and add the following to the epilogue as shown in figure 1.
Figure 1 – Page Directives window with the added JavaScript
<script type="text/javascript">
/* <![CDATA[ */
this.focus(); //focus on new window
redirect = function() {
var querystring = window.location.search.substring(1); //query string
var page = querystring.substring(querystring.indexOf('=') + 1, querystring.length);
function toPage() {
if (page !== undefined && page.length > 1) {
document.write('<!--[if !IE]>--> <head><meta http-equiv="REFRESH" content="1;url=' + page + '" /><\/head><!--<![endif]-->');
document.write(' \n <!--[if IE]>');
document.write(' \n <script type="text/javascript">');
document.write(' \n var version = parseInt(navigator.appVersion);');
document.write(' \n if (version>=4 || window.location.replace) {');
document.write(' \n window.location.replace("' + page + '");');
document.write(' document.images["imgAjax"].src = "../images/updating.gif"');
document.write(' \n } else');
document.write(' \n window.location.href="' + page + '";');
document.write(' \n <\/script> <![endif]-->');
}
}
return {
begin: toPage
}
} ();
redirect.begin();
/* ]]> */
</script>
- Through the application explorer open the code behind file and add the following method to section 1.
C#
protected override void UpdateSessionNavigationHistory()
{
// do not update session navigation history
}
VB
Protected Overrides Sub UpdateSessionNavigationHistory()
‘ do not update session navigation history
End Sub
Configure App/Buttons
Now the loading page is set up you need to get your buttons to redirect through it. You can do this per button or globally.
Per Button
- In design mode find the button you want to use this with.
- Select it and open the code tab.
- Change the URL string by adding the following to the start of the existing url as shown in figure 2.
Figure 2 - Example of overridden button click method
~/loading/loading.aspx?page=
Global
- In Application Explorer navigate to AppCode\Shared\BaseApplicatonPage.cs.
- Search for the ModifyRedirectURL method and update it as show in figure 3.
C#
public virtual string ModifyRedirectUrl(string redirectUrl, string redirectArgument, bool bEncrypt)
{
string extendedUrl = "~/loading/loading.aspx?page=" + redirectUrl;
return EvaluateExpressions(extendedUrl, redirectArgument, bEncrypt);
}
VB
Public Overridable Function ModifyRedirectUrl(ByVal redirectUrl As String, ByVal redirectArgument As String, ByVal bEncrypt As Boolean) As String
Dim extendedUrl As String = "~/loading/loading.aspx?page=" + redirectUrl
Return EvaluateExpressions(extendedUrl, redirectArgument, bEncrypt)
End Function
Figure 3 - Modified method in the Base Application Page
Conclusion
This is a useful customisation that allows you to improve the experience for your end users. It is simple to add and as it is done with an Iron Speed page you can customise the display as easily as any other page.
Figure 4 - Clean loading page
Figure 5 - Default loading
About the Author
Ben Demes holds a bachelor’s degree in computer science from the University of Essex and is a professional member of the British Computer Society (MBCS). Ben has been instrumental in completing a number of web applications for NHS in the UK. Working against tight deadlines, he just loves working with Iron Speed Designer. Ben’s skill set extends to programming in C#, VisualBasic.NET and JavaScript and working on data migration scripts for Microsoft SQL Server.
Download Article
View comments on the Iron Speed Forums or download the article in Microsoft Word or PDF format.