News
  • Favorite
  • Facebook
  • Twitter
  • LinkedIn

Microsoft Press Pearson Education (InformIT)
Skip Navigation Links
Pearson Education (InformIT)
How to: Create an ASP.NET Indicator Control using C#

Sometimes you want to display an indicator of completeness of something such as indicator of profile completeness, task or operation completeness. In ASP.Net there is no such control so we will create an ASP.Net Indicator User Control like the image below

Indicator_01

Using the Code:

To create an ASP.Net Indicator control, follow the following steps:

1.      Create a new ASP.NET Web Application using Visual Studio 2008/2010.

2.      Rename WebForm1.aspx to Default.aspx.

3.      Right click the project in Solution Explorer and select Add New Item. The Add New Item Dialog will appear.

4.      Select Web in the Left Pane and from the right pane select the Template for Web User Control.

5.      Name it IndicatorControl.ascx as in the following image


Visual Studio, Add New Item Dialog

6.      Visual Studio will add three files

a.      IndicatorControl.ascx for the control interface

b.     IndicatorControl.ascx.cs the code behind file

c.      IndicatorControl.ascx.designer.cs the designer code behind file.

7.      Open the IndicatorControl.ascx file and type the following ASP.NET Code to create the User Control Interface

 

<asp:Panel ID="IndicatorPanel" runat="server" BorderColor="Silver" BorderStyle="Solid"

    BorderWidth="1px"Height="20px"HorizontalAlign="Left"Width="200px">

    <asp:Label ID="IndicatorLabel"runat="server"Height="20px"BackColor="Green">

    </asp:Label>

</asp:Panel>

 

 

a.      The above code simply creates an ASP.NET panel and names it IndicatorPanel, this panel will act as the Border of the Indicator and gives its border a Silver Color, sets the Border Style to Solid color and Border Width to 1 pixel

b.     Sets its Height and Width Properties to 20 pixels and 200 pixels respectively.

c.      Add an ASP.NET Label and name it IndicatorLabel, this label will present the completed percent of the profile and set its height to 20 pixels and its background color to green.

8.      Then open the IndicatorControl.ascx.cs file and type the following code to create the behavior of the Indicator Control

 

public partial class IndicatorControl: System.Web.UI.UserControl

{

    private bool warning;

    private double percent;

 

    protected void Page_Load(object sender, EventArgs e)

    {

        try

        {

            IndicatorLabel.Width = new Unit(percent * IndicatorPanel.Width.Value, UnitType.Pixel);

            IndicatorLabel.ToolTip = percent.ToString("p0");

        }

        catch (Exception)

        {

        }

    }

 

    [Browsable(true)]

    [DefaultValue(false)]

    [Bindable(BindableSupport.Yes,BindingDirection.OneWay)]

    public bool Warning

    {

        get

        {

            return warning;

        }

        set

        {

            warning = value;

        }

    }

 

    [Browsable(true)]

    [Bindable(BindableSupport.Yes,BindingDirection.OneWay)]

    public double Percent

    {

        get

        {

            return percent;

        }

        set

        {

            percent = value;

 

            if (percent < 0)

                percent = 0;

 

     if (percent > 1)

                percent = 1;

 

 

            IndicatorLabel.Width = new Unit(percent * IndicatorPanel.Width.Value, UnitType.Pixel);

            IndicatorLabel.ToolTip = percent.ToString("p0");

 

            if (warning)

            {

               if (percent > 0 && percent < .50)

                {

                    IndicatorLabel.BackColor = Color.Green;

                }

               else if(percent >= .50 && percent < .75)

                {

                    IndicatorLabel.BackColor = Color.Gold;

                }

               else if(percent >= .75 && percent < .90)

                {

                    IndicatorLabel.BackColor = Color.Orange;

                }

               else if(percent >= .90)

                {

                    IndicatorLabel.BackColor = Color.Red;

                }

            }

        }

    }

 

    [Browsable(true)]

    [DefaultValue(20)]

    [Bindable(BindableSupport.Yes,BindingDirection.OneWay)]

    public double Width

    {

        get

        {

            return IndicatorPanel.Width.Value;

        }

        set

        {

            IndicatorPanel.Width = new Unit(value, UnitType.Pixel);

        }

    }

 

    [Browsable(true)]

    [DefaultValue(20)]

    [Bindable(BindableSupport.Yes,BindingDirection.OneWay)]

    public double Height

    {

        get

        {

            return IndicatorPanel.Height.Value;

        }

        set

        {

            IndicatorPanel.Height = new Unit(value, UnitType.Pixel);

            IndicatorLabel.Height = new Unit(value, UnitType.Pixel);

        }

    }

 

    protected override void OnInit(EventArgs e)

    {

        base.OnInit(e);

        Page.RegisterRequiresControlState(this);

    }

 

    protected override object SaveControlState()

    {

        return percent;

    }

 

    protected override void LoadControlState(object savedState)

    {

        percent = Convert.ToDouble(savedState);

    }

}

 

a.      In the above code we simply create two variables one for making the indicator control for warning operations and one for saving the percent completed.

b.     In the Page Load Event of the control we set the IndicatorLabel width to the percent value and set its ToolTip property to this percent followed by the % character.

c.      We need to use this indicator controls in warning and completeness indications so we have added the Warning Property. If this property is true the back color of the IndicatorLabel will be different according the percentage value of warning.

d.     We mark the Warning property with the Browsable attribute to make the Visual Studio able to display this property in the Properties window and Bindable attribute to make it used in data binding.

e.     We add a new property the Percent property to make the User Control usable. This property sets or gets the value of percent variable declared in the start of the IndicatorControl class.

f.       In the set operator we set the percent variable with the value, set it to zero if the assigned value is less than zero and set it to 100 if it is greater than 100.

g.       Set the width of the IndicatorLabel to the percent of the total IndicatorPanel width and sets the IndicatorLabelToolTip property  to the percent followed by % character.

h.     We check the warning variable value if its value is true then we displays a new color for each warning level.

i.        If the percent is greater than 0 and less that 50% we set the IndicatorLabel back color to Green

j.       If the percent is greater than or equal to 50% and less that 75% we set the IndicatorLabel back color to Gold.

k.      If the percent is greater than or equal to 75% and less that 90% we set the IndicatorLabel back color to Orange.

l.        If the percent is greater than or equal to 90% we set the IndicatorLabel back color to Red.

m.   You can change the percent and the colors according to your warning business values.

n.     We need to customize the control width and height to meet every one needs so we have added two public properties that can be set from the control.

o.     The width property gets or sets the width of the container, the IndicatorPanel control.

p.     The Height property gets or sets the height of the container, the IndicatorPanel control.

9.      Open the Default.aspx file in design Mode.

10.  From the Solution Explorer, Drag the IndicatorControl and drop it on the Default.aspx page. This will register the User Control in the Default.aspx page and create a new instance of the IndicatorControl as in the following code

 

<%@ RegisterSrc="IndicatorControl.ascx"TagName="IndicatorControl"TagPrefix="uc1"%>

 

<div>

    <p>

        Warning="false" Percent="0.60"</p>

    <br />

    <uc2:IndicatorControl ID="IndicatorControl1"runat="server"Height="22"Width="200"

        Warning="false"Percent="0.60"/>

    <br />

    <p>

        Warning="true" Percent="0.40"</p>

    <uc2:IndicatorControl ID="IndicatorControl2"runat="server"Height="22"Width="200"

        Warning="true"Percent="0.40"/>

    <br />

    <p>

        Warning="true" Percent="0.60"</p>

    <uc2:IndicatorControl ID="IndicatorControl3"runat="server"Height="22"Width="200"

        Warning="true"Percent="0.60"/>

    <br />

    <p>

        Warning="true" Percent="0.80"</p>

    <uc2:IndicatorControl ID="IndicatorControl4"runat="server"Height="22"Width="200"

        Warning="true"Percent="0.80"/>

    <br />

    <p>

        Warning="true" Percent="0.95"</p>

    <uc2:IndicatorControl ID="IndicatorControl5"runat="server"Height="22"Width="200"

        Warning="true"Percent="0.95"/>

    <br />

    <br />

</div>

 

 

11.  The above code creates 5 instances of the Indicator Control and each with its own property values.

12.  Compile your project and Browse the Default.aspx page in Internet Explorer you will get the following image


Indicator Results

13.  If you have any controls on the page that post back like an ASP.NET Button the indicator percent is set to zero. This is the reason why we override the last three methods in the IndicatorControl class (OnInit, SaveControlState, LoadControlState).

14.  We override OnInit method to tell ASP.Net that this Control state must be persisted.

15.  We override SaveControlState to save the control state and LoadControlState to load the control state as we save it.

16.  In the IndicatorControl we need to save the percent variable value.

17.  Compile your project and Browse the Default.aspx page in Internet Explorer.

18.  If you click on any button the Indicator Control maintains its state information.

 

Now you have an indicator control that can be used in data binding and indicating the percent completed and used in warning indication.

(81) Comments

Blog Message http://www.buy3dmetalpuzzle.com

It as really a nice and helpful piece of information. I am glad that you shared this helpful info with us. Please keep us informed like this. Thanks for sharing.


Blog Message https://dailyiptvlinks.com/

Very nice info and right to the point. I am not sure if this is actually the best place to ask but do you people have any thoughts on where to hire some professional writers? Thx


Blog Message http://www.icsi.edu/capitalmarketweek/UserProfile/tabid/4706/userId/1427723/Default.aspx

You made some decent points there. I checked on the internet to learn more about the issue and found most individuals


Blog Message http://www.dcrmotorcycles.com/the-ultimate-excess-weight-loss-manual-crash-the-diet-plan-roller-coaster/

You hevw broughr up e vwry wxcwkkwnr dwreikd , rhenkyou for rhw podr.


Blog Message https://www.apsense.com/article/here-are-some-tips-when-hiring-an-seo-agency.html

It as best to participate in a contest for among the best blogs on the web. I all suggest this web site!


Blog Message http://instant.paviloptions.com

Looking forward to reading more. Great blog post. Really Great.


Blog Message http://www.suba.me/

uzl9Kr Say, you got a nice article post.Really thank you! Keep writing.


Blog Message http://gametor.su/user/Esockouro180/

wow, awesome article post.Really thank you! Want more.


Blog Message http://ctroygrupp.ru/forum/member.php?41482-marydimqz7

Thanks for the article post. Really Great.


Blog Message http://www.theglades-condo.sg

Major thankies for the blog article.Much thanks again. Want more.


Blog Message http://farmerslabseeds.com

Wow, superb blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your web site is great, let alone the content!. Thanks For Your article about sex.


Blog Message http://conceptsupply.nl

Louis Vuitton Handbags On Sale Louis Vuitton Handbags On Sale


Blog Message https://www.youtube.com/watch?v=GFNTpsRfb8c

Your style is really unique in comparison to other people I have read stuff from. I appreciate you for posting when you ave got the opportunity, Guess I will just book mark this web site.


Blog Message http://www.vibsolutions.ee/ee/teenused/optimeerimine-otsingumootoritele

Touche. Solid arguments. Keep up the amazing work.


Blog Message http://www.theglades-condo.sg

Say, you got a nice blog.Thanks Again. Awesome.

First Previous 1 2 3 4 5 6 Next Last 
Rating
Name
Email
Comment