Click here to Skip to main content
15,867,330 members
Articles / Web Development / ASP.NET

Customizable 'Loading' Control for Web Applications with Designer Support

Rate me:
Please Sign up or sign in to vote.
4.87/5 (50 votes)
7 Jan 2010CPOL4 min read 72.6K   1.5K   96   38
Just drag n drop of a control to show 'in process' indication in a Web application
Loading1_Customized_Display2.PNG Loading1_Customized_Display4.PNG Loading1_Customized_Display1.PNG Loading1_Customized_Display3.PNG

Loading1_Customized_Display.PNG

Introduction 

Whenever there is a 'Page Load', it's a good practice to show some indicator to the user about the progress. This gives a good feeling to the user interacting with the website. Traditionally, this is achieved writing JavaScript while the 'Page Loads' - but one need to write quite a few JavaScript lines again and again. Further, beginners who are not much aware of JavaScript might face a little difficulty in achieving it. Also, at times, possibility of syntactical error(s) is always there while writing the traditional code. So, a custom control with all the necessary features packed into one would always save us some time!

This is a fully customizable control that one needs to just drag and drop from the toolbox in order to use. It contains design time support, toolbox support and property browser support. One can also extend or limit the functionality based on the specific need.

Background

While working on the last couple of projects, during the page loads we were asked to show a certain indicator or an informative message on the screen such that user experience is good. In order to achieve it, we used to follow the traditional method of putting JavaScript while page loads. Then, I thought of making a custom control that does the same thing for me, such that I don't need to replicate my scripts and write related code again and again for every page. Further, having customization and design time support would be a plus!

Using the Code

From a usage point of view, one just needs to drag and drop the control from the toolbox. User specific properties can be set either during design time or runtime. As such, by default, no code change or implementation is needed. A design time markup was added to the control for its design time appearance to make it visible and clear in the Webforms designer.

HTML
// Just drag and drop
<CustomControl:Loading ID="Loading1" runat="server" />
Loading5_HTML_Design_Support.PNG Loading4_Intellisense_Support.PNG

This is how the control is packaged. It's played upon with two events of the control:

C#
// Custom Controls Constructor
// Binding of event handlers for processing
this.Init += new EventHandler(Loading_Init);
this.Load += new EventHandler(Loading_Load);

Once the page life cycle starts, 'Loading' control is formed in its Init event and shown to the user:

C#
// JavaScript injected to use in order to show/hide the control
private string _UtilityScripts = "<SCRIPT LANGUAGE='JavaScript'>
if(document.getElementById){var isLoaded = true;} 
function ShowObject(obj){if (isLoaded){obj.style.display = 'block';}} 
function HideObject(obj){if (isLoaded){obj.style.display = 'none';}}
</SCRIPT>";

private void Loading_Init(object sender, EventArgs e)
{  
    //.... 
    WebControl tempWC = sender as WebControl;  
     
    //Loading control is displayed to the user while page loads
    tempWC.Page.Response.Write(_UtilityScripts + loadingDiv);
    tempWC.Page.Response.Flush(); 
      
    //.... 
}

Font decorations and various other properties available are set for the control in the code behind before displaying it. When the page load finishes, the control is made hidden injecting the JavaScript during the execution of control's Load event.

C#
// JavaScript injected to hide the control
private string _HideDiv = "<SCRIPT LANGUAGE='JavaScript'> 
var divLoadObject = document.getElementById(\"{0}\");
HideObject(divLoadObject);</script>"; 
  
private void Loading_Load(object sender, EventArgs e)
{ 
     //.... 
     WebControl tempWC = sender as WebControl;
     tempWC.Page.Response.Write(string.Format(_HideDiv, "loadingScreen"));
     //.... 
}

Additional changes were made in the control to make it AJAX enabled. Thus, AJAX based websites too can use it without any hassle:

C#
// Example codes embedded 
// For making the control AJAX enabled
 ScriptManager currPageScriptManager = 
	ScriptManager.GetCurrent(Page) as ScriptManager;
 if (currPageScriptManager != null)
        _IsAsyncPostBack = currPageScriptManager.IsInAsyncPostBack; 

// Controls property '_IsAsyncPostBack' is used to handle the Async scenarios

Customization was supported with various styles and alignments possible. Based on the property set by user (or default), control is loaded and displayed on the webpage. That was all that was needed to make it work. Now, come the various supports that made the control more user friendly and easy to use. To support these features, a designer class was added that overrides few methods and properties.

1. Designer Support: Visible interface in the design view of the webforms editor.

Loading6_Designer_Support.PNG

2. Property Browser Support in design view: Type associated with the property.

Loading2_Categorized_Property_Browser.PNG

3. Toolbox Support: For dragging and dropping the control from the Visual Studio .NET toolbox.

Loading3_Toolbox_Support.PNG

Properties supported by the control:

  • LoadingText - Gets or Sets text to be displayed while control is displayed
  • LoadingImagePath - Gets or Sets image path of the image to be displayed in the control
  • HorizontalAlignment - Gets or Sets horizontal alignment of the control in the webpage
  • VerticalAlignment - Gets or Sets vertical alignment of the control in the webpage
  • TextVAlignment - Gets or Sets vertical alignment of the text in the control
  • TextLocation - Gets or Sets location of the text relative to image in the control

This concludes the making of the 'Loading' custom control. One can customize what text to show, what image to use, apply font style to the text and display the control on a webpage based on various horizontal/vertical alignments.

Initially I made it in VS2008, but thinking about users who would like to use it in VS2005 Web projects, I ported it in VS2005. One can upgrade the same into VS2008 successfully without any error.

Points of Interest

This was a different experience developing - I specifically learnt about the design time support, and exposing selected control property in the property browser window.

History

  • 7th January, 2010: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect Intuit India
India India


A software professional for more than 17+ years building solutions for Web and Desktop applications.

Currently working at Intuit India.

Website: Learn By Insight
Github: Sandeep Mewara
LinkedIn: Sandeep Mewara

Strongly believe in learning and sharing knowledge.



Comments and Discussions

 
GeneralMy vote of 5 Pin
csharpbd19-Nov-12 16:26
professionalcsharpbd19-Nov-12 16:26 
GeneralMy vote of 5 Pin
Savalia Manoj M18-Nov-12 16:48
Savalia Manoj M18-Nov-12 16:48 
QuestionThis Control has a bug Pin
Gaurav Goel (Team Lead)23-Dec-11 22:47
professionalGaurav Goel (Team Lead)23-Dec-11 22:47 
GeneralHelpful for the learner. Pin
gggmarketing10-Sep-11 3:29
gggmarketing10-Sep-11 3:29 
GeneralMy vote of 5 Pin
TweakBird25-Feb-11 1:39
TweakBird25-Feb-11 1:39 
GeneralMy vote of 1 Pin
Ashish Tyagi 4015-Jan-11 9:26
Ashish Tyagi 4015-Jan-11 9:26 
GeneralMy vote of 5 Pin
JF201513-Jan-11 19:52
JF201513-Jan-11 19:52 
GeneralMy vote of 5 Pin
Sandesh M Patil7-Jan-11 3:28
Sandesh M Patil7-Jan-11 3:28 
GeneralRe: My vote of 5 Pin
Sandeep Mewara7-Jan-11 3:30
mveSandeep Mewara7-Jan-11 3:30 
GeneralWell packaged! Pin
HansonM3-Mar-10 18:02
HansonM3-Mar-10 18:02 
AnswerRe: Well packaged! Pin
Sandeep Mewara4-Mar-10 6:04
mveSandeep Mewara4-Mar-10 6:04 
GeneralNeat control! Pin
Nuri Ismail26-Feb-10 4:18
Nuri Ismail26-Feb-10 4:18 
GeneralRe: Neat control! Pin
Sandeep Mewara26-Feb-10 4:24
mveSandeep Mewara26-Feb-10 4:24 
GeneralPretty cool, wish it didn't cause IE to run in quirks mode though Pin
USCGC200528-Jan-10 7:01
USCGC200528-Jan-10 7:01 
AnswerRe: Pretty cool, wish it didn't cause IE to run in quirks mode though Pin
Sandeep Mewara28-Jan-10 20:31
mveSandeep Mewara28-Jan-10 20:31 
GeneralRe: Pretty cool, wish it didn't cause IE to run in quirks mode though Pin
Sandeep Mewara28-Jan-10 20:45
mveSandeep Mewara28-Jan-10 20:45 
GeneralRe: Pretty cool, wish it didn't cause IE to run in quirks mode though Pin
USCGC200529-Jan-10 4:01
USCGC200529-Jan-10 4:01 
AnswerRe: Pretty cool, wish it didn't cause IE to run in quirks mode though Pin
Sandeep Mewara29-Jan-10 9:29
mveSandeep Mewara29-Jan-10 9:29 
GeneralArticle Pin
sharan abhinav18-Jan-10 2:40
sharan abhinav18-Jan-10 2:40 
Excellent
AnswerRe: Article Pin
Sandeep Mewara18-Jan-10 4:03
mveSandeep Mewara18-Jan-10 4:03 
GeneralGood Control Pin
thatraja15-Jan-10 18:33
professionalthatraja15-Jan-10 18:33 
AnswerRe: Good Control Pin
Sandeep Mewara15-Jan-10 23:05
mveSandeep Mewara15-Jan-10 23:05 
GeneralAwesome control Pin
Vani Kulkarni13-Jan-10 21:16
professionalVani Kulkarni13-Jan-10 21:16 
AnswerRe: Awesome control Pin
Sandeep Mewara14-Jan-10 2:45
mveSandeep Mewara14-Jan-10 2:45 
Generalwow...Good articles this week Pin
Yves12-Jan-10 15:12
Yves12-Jan-10 15:12 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.