Step 1

Creating the Server Control.

The first step is to start a new project with the custom control template and build the control.

To create the custom control

  1. On the File menu, point to New, and then click Project.

    The New Project dialog box appears.

  2. In the Project Types pane, choose either Visual Basic Projects or Visual C# Projects. Select Web Control Library in the Templates pane.


  3. Change the Name to aTextBox and click OK.

    The new project is created, and WebCustomControl1 opens in the Code Editor.

    Code for a custom Label control is included in the Web Control Library template by default. We can add custom code here.

    In this code , we are creating a textbox which will accept only integer as input. If user will try to input other than integer , back color of TextBox will get black and forcolor will be red. User will get a message “Input integer Dude”.

    Add reference System.Drawing

The full code is as follows

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Linq;

using System.Text;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Drawing;

namespace aTextBox

{

[DefaultProperty(“Text”)]

[ToolboxData(“<{0}:ServerControl1 runat=server></{0}:ServerControl1>”)]


public
class
aNumericTextBox : TextBox

{

[Bindable(true)]

[Category(“Appearance”)]

[DefaultValue(“”)]

[Localizable(true)]


public
override
string Text

{


get

{


String s = (String)ViewState[“Text”];


return ((s == null) ? String.Empty : s);

}


set

{


// ViewState[“Text”] = value;


int i = 0;


if (int.TryParse(base.Text, out i))

{


base.BackColor = Color.White;

ViewState[“Text”] = value;

}


else

{


base.Text=” Only Integer dude “;


base.BackColor=Color.Black;


base.ForeColor= Color.Red;

}

}

}


protected
override
void RenderContents(HtmlTextWriter output)

{

output.Write(Text);

}

}

}

  1. On the Build menu, click Build aTextBox to compile the control.

    The control is compiled as aNumericTextBox.dll. By default, it is created in the Bin folder inside the aTextBox project folder.

  2. Save the file.

Step 2

Create a WebForm page to use aTextBox server control

To create the Web Forms page

  1. On the File menu, point to Add Project, and then click New Project.

    The Add New Project dialog box appears.

  2. In the Project Types pane, choose either Visual Basic Projects or Visual C# Projects. Select ASP.NET Web Application in the Templates pane. Give any name for web application. Here name is TestingaTextBox.


  3. Click OK.

    The new project is created, and WebForm1 opens in the designer.

  4. Save the project.

Step 3

Adding the control to the toolbox.

To add control to the toolbox

  1. On the Tools menu, click Add/Remove Toolbox Items or Choose Tool Box Items.


  2. On the .NET Framework Components tab of the Customize ToolBox dialog box, click the Browse button. Find CustomLabel.dll, select it, and click Open to add WebCustomControl1 to the list of components in the Customize Toolbox dialog box.
  3. Select ServerControl1 in the list of .NET Framework components and click OK. ServerControl1 is added to the Toolbox.

To add the control to the Web Forms page and test it

  1. Open WebForm1 in Design view and drag ServerControl1 from the Toolbox to the page.

    The control’s default rendering, which is simply the name of the control followed by its ID, appears in the Design view.

  2. Switch to HTML view, and verify that an @ Register directive for the control’s assembly is added to the page’s HTML, with TagPrefix “cc1”.
  3. Set the Text property of the control to Hello.

    The control’s appearance in Design view is updated to show the new text.


     

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s