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

MessageBox WebControl W3C-Css ASP.NET

, 20 May 2006
Rate this:
Please Sign up or sign in to vote.
Every web project we need to notify and keep visible something information through messagebox and check if we read it.

Design sample picture

Sample Image - maximum width is 600 pixels

Running sample picture

Sample Image - maximum width is 600 pixels

<!------------------------------- STEP 3 ---------------------------><!-- Add the article text. Please use simple formatting (

,

etc) -->

Introduction

In every web project we need to notify and keep visible something information through messagebox and check if we read it.

I go to extend a WebControl that is almost this idea.

Functionalities of MessageBox WebControl 

  1. The WebControl have two cases according to set MultipleMessageMode property:
    • Sinqle Mode: WebControl render only messegabox.
    • Multiple Mode : WebControl render multiple messegebox.
  2. The MessageBoxWebControl have two cases : client y server.
    • Client. Fire EndFuntionClientSide event client. Using AJAX can inform to server that the messege have been closed.  Automatically support persistence.
    • Server. Fire EndFuntionClientSide client event and server event. Automatically support persistence.
  3. Closing the MessageBoxWebControl  create a float frame and move at screen point set in CloseObjectClientID property. Also, the initial width and height are the same that MessageBox values and decrease according to RateMessage property

Build the WebControl

Inherit of the System.Web.UI.WebControls.WebControl and implement several functionalities to achieve the goal.

1 - Entities

Define MessageBox entity which will have basic necessary information to render the MessageBox, the MessageBoxCollection collection will have MessageBox entities and MessageBoxStyle struts which will store information about control style.

    [Serializable]
    public class MessageBox
    {
        private string messageHeader;
        private string messageBody;
        internal string closeObjectClientID;
        internal string hash;
        internal string closeImage;
 
        public MessageBox():this(string.Empty , string.Empty)
        {
        }
                                      [...]


                                             

    }
    
    [Serializable]
    public class MessageBoxCollection : CollectionBase 
    {

        public virtual void Add(MessageBox messageBox)
        { 
            this.List.Add(messageBox);
        }
        
        public virtual MessageBox this[int Index]
        {
                    get{return (MessageBox)this.List[Index];}
        }

    }

    
    [Serializable]
    public struct  MessageBoxStyle
    {
        public string messengerOut;
        public string menu;
        public string menu_UL;
        public string menu_LI;
        public string menu_msg_header;
        public string menu_msg_header_A;
        public string menu_msg_header_IMG;
        public string menu_msg_header_UL;
        public string menu_msg_header_LI;
        public string info_box;
        public string headerfont;
        public string bodyfont;
        public string note;
        public string hash;
        public int multiplcatorOrder;

    }


2 - Helper class  ( MessageBoxWebControlHelper.cs)

Implement necessary method to render to HTML message in the browser.
The render built according to   standart and after integrate witch another solution W3C-Css requeriment.

3 - Implement design time of server side ( MessageBoxWebControlDesigner.cs)

Inherit of the  System.Web.UI.Design.ControlDesigner  class and override GetDesignTimeHtml method to render in design time:

    
    public override string GetDesignTimeHtml()
    {
        MessageBox mB=new MessageBox();

        return MessageBoxWebControlHelper.BuiltHtmlDesing(mB,mBox.MessageBoxStyle);
    }    
    

4 - Implement running time of server side

Override part the life's cycles of the WebControl base according to the funtionality:

  • OnInit - Update MessageBoxStyle strut with property control values and register the client script necesary in the client side.
  • OnLoad - Set unique id for the message that current values is null.
  • OnPreRender - Built the html to render control according to the properties values.
  • OnRender - Render to html code.

5 - Implement running time of client side

Built the client method that allow show the close animation. Create a panel dinamically whitch change of position and dimension. Show part of the JavaScript code below:  

                    [...]
<script>     

function moveDiv(messengerOut,posAux,variacion,rate,origen,endfunc){
    
    setPos (messengerOut,posAux);
        
    for (i=0 ; i<4 ; i ++)
        posAux[i] = posAux[i] + variacion[i];
    rate --;
    if (rate >= 0){
         window.setTimeout("moveDiv(idStatic,posAux,variacion,"+ rate +",'"+origen+"','"+ endfunc+"');", 1);
    }
    else{
        
        document.getElementById(idStatic).style.display = 'none';
        SetVisibleState( origen, false );
        
        //document.getElementById(origen).style.display = 'none';
        animationIsRunning = 0;
            if(b!='')
            {
            var s= "postBackFuntion(b,endfunc)";
            eval(s);
            }
            else
             eval(endfunc);
    }
}
       




</script>
                    [...]

This JavaScript file deployment it in a install project witch will create a virtual directory in the IIS server. Is very important this action, the attach project in this article show a Install Project sample.

History

Release 1.0 22 April 2006.

 

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Roberto Loreto
Web Developer
Spain Spain
No Biography provided

Comments and Discussions

 
GeneralObject Reference Error Pinmembernoms4-Sep-06 20:55 
GeneralRe: Object Reference Error PinmemberRoberto Loreto5-Sep-06 8:07 

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.140814.1 | Last Updated 20 May 2006
Article Copyright 2006 by Roberto Loreto
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid