Click here to Skip to main content
Click here to Skip to main content

Customizable 'Loading' Control for Web Applications with Designer Support

, 7 Jan 2010
Rate this:
Please Sign up or sign in to vote.
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.

 // 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:

// 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:

// 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.

// 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:

// 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)

About the Author

Sandeep Mewara
Software Developer (Senior)
India India
Current location: Bangalore, India.
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 5 Pinmembercsharpbd19-Nov-12 16:26 
GeneralMy vote of 5 PinmemberSavalia Manoj M18-Nov-12 16:48 
QuestionThis Control has a bug PinmemberGaurav.goel20923-Dec-11 22:47 
protected void Button1_Click(object sender, EventArgs e)
{
Response.Redirect("AjaxEnabledSample2.aspx");
}
 
it gives error that HttpHeader already sent.
So we can not redirect to other page from this.
GeneralHelpful for the learner. Pinmembergggmarketing10-Sep-11 3:29 
GeneralMy vote of 5 PinmemberE$w@r25-Feb-11 1:39 
GeneralMy vote of 1 PinmemberAshish Tyagi 4015-Jan-11 9:26 
GeneralMy vote of 5 PinmemberJF201513-Jan-11 19:52 
GeneralMy vote of 5 PinmemberSChristmas7-Jan-11 3:28 
GeneralRe: My vote of 5 PinmvpSandeep Mewara7-Jan-11 3:30 
GeneralWell packaged! PinmemberHansonM3-Mar-10 18:02 
AnswerRe: Well packaged! PinmemberSandeep Mewara4-Mar-10 6:04 
GeneralNeat control! PinmemberNuri Ismail26-Feb-10 4:18 
GeneralRe: Neat control! PinmemberSandeep Mewara26-Feb-10 4:24 
GeneralPretty cool, wish it didn't cause IE to run in quirks mode though PinmemberUSCGC200528-Jan-10 7:01 
AnswerRe: Pretty cool, wish it didn't cause IE to run in quirks mode though PinmemberSandeep Mewara28-Jan-10 20:31 
GeneralRe: Pretty cool, wish it didn't cause IE to run in quirks mode though PinmemberSandeep Mewara28-Jan-10 20:45 
GeneralRe: Pretty cool, wish it didn't cause IE to run in quirks mode though PinmemberUSCGC200529-Jan-10 4:01 
AnswerRe: Pretty cool, wish it didn't cause IE to run in quirks mode though PinmemberSandeep Mewara29-Jan-10 9:29 
GeneralArticle Pinmemberabhinav53198318-Jan-10 2:40 
AnswerRe: Article PinmemberSandeep Mewara18-Jan-10 4:03 
GeneralGood Control Pinmemberthatraja15-Jan-10 18:33 
AnswerRe: Good Control PinmemberSandeep Mewara15-Jan-10 23:05 
GeneralAwesome control PinmemberVani Kulkarni13-Jan-10 21:16 
AnswerRe: Awesome control PinmemberSandeep Mewara14-Jan-10 2:45 
Generalwow...Good articles this week PinmemberYves12-Jan-10 15:12 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 7 Jan 2010
Article Copyright 2010 by Sandeep Mewara
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid