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 CompositePalindromeControl and click OK.

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

 

  1. Edit the code to change the derivation from WebControl to CompositeControl.

     

    public
    class
    ServerControl1 : WebControl

     

    Change this to

    public
    class
    ServerControl1 : CompositeControl

     

  2. Also implement INamingContainer. This interface is useful for managing unique ids for control’s children.

    Code will look like

     

    public
    class
    ServerControl1 : CompositeControl ,INamingContainer

     

  3. Add the PalindromeFound event like below.

     

    public
    event
    EventHandler PalindromeFound;

     

  4. Add four member variables – a TextBox, a Button, a Label and a LiteralControl. Code would look like below.

     

    public
    event
    EventHandler PalindromeFound;


    protected
    TextBox textboxPalindrome;


    protected
    Button buttonCheckForPalindrome;


    protected
    LiteralControl literalcontrolPalindromeStatus;

    protected
    Label labelForTextBox;

     

     

  5. Write a method alphanumeric .

     

     

    protected
    string alphanumeric(string str)

    {


    string strTemp = (String)str.Clone();


    if (str != null)

    {


    char[] var = strTemp.ToCharArray();


    int i = 0;


    foreach (char c in var)

    {


    if (char.IsLetterOrDigit(c))

    {

    i++;

     

    }


    else

    {

    strTemp = strTemp.Remove(i, 1);

 

}

}

}


return strTemp;

}

 

 

  1. Write a Method checkForPalindrome

     

     

protected
bool checkForPalindrome()

{


if (this.Text != null)

{


String strControlText = this.Text;


String strTextToUpper = null;

strTextToUpper = Text.ToUpper();

strControlText = this.alphanumeric(strTextToUpper);


char[] rgcReverse = strControlText.ToCharArray();


Array.Reverse(rgcReverse);


String strReverse = new
String(rgcReverse);


if (strControlText == strReverse)

{


return
true;

}


else

{


return
false;

}

}


else

{


return
false;

}

}

 

 

  1. Add and EventHandler OnCheckPalindrome to be applied on Button. Button will get added soon.

     

     


public

void OnCheckPalindrome(Object o, System.EventArgs e)

{


this.Text = this.textboxPalindrome.Text;


this.checkForPalindrome();

}

 

 

  1. Now override the CreateChildControl method

     


protected
override
void CreateChildControls()

{


//base.CreateChildControls();

labelForTextBox = new
Label();

labelForTextBox.Text = “Enter a Palindrome”;


this.Controls.Add(labelForTextBox);

textboxPalindrome = new
TextBox();


this.Controls.Add(textboxPalindrome);

Controls.Add(new
LiteralControl(“<br/>”));

buttonCheckForPalindrome = new
Button();

buttonCheckForPalindrome.Text = ” Click For Palindrome”;

buttonCheckForPalindrome.Click+=new
EventHandler(OnCheckPalindrome);


this.Controls.Add(buttonCheckForPalindrome);

Controls.Add(new
LiteralControl(“<br/>”));


this.tablePalindromes = new
Table();


this.Controls.Add(tablePalindromes);


this.ChildControlsCreated = true;

}

 

 

In above code , if a comilation error is coming at the time of building of Project. Do not wory . tablePalindromes is yet to be add in the class. For bravity don’t try to build project by this step. Wait for few more steps.

 

 

 

  1. Now to Show the palindrome status whenever Text property is se. so need to modify the Text Property.

    First comment out default property line as follows

     

namespace CompositePalindromeControl

{


//[DefaultProperty(“Text”)]

 

Then, declare a private string varibale text. Then write property of text as follows .

 


private
String text;


public
string Text

{


get

{

 


return text;

 

}

 


set

{

 

text = value;


if (this.checkForPalindrome())

{


if (PalindromeFound != null)

{

PalindromeFound(this, EventArgs.Empty);

}

literalcontrolPalindromeStatus.Text = String.Format(“This is a Palindrome <br/> <Font size=\”5\” color=\”blue\”></b>{0}</b></font>”, text);

 

}


else

{

literalcontrolPalindromeStatus.Text = String.Format(“This is not a Palindrome <br/> <Font size=\”5\” color=\”red\”></b>{0}</b></font>”, text);

}

 

}

}

 

 

  1. Add namespace System.Collection and declare two varibale as

     


protected
Table tablePalindromes;


protected
ArrayList alPalindromes;

 

 

  1. Add a Method BuildPalindromesTable to build a palindrome table based on the content of the ArrayList.

     


protected
void BuildPalindromesTable()

{


this.alPalindromes = (ArrayList)this.ViewState[“palindromes”];


if (this.alPalindromes != null)

{


foreach (string s in
this.alPalindromes)

{


TableCell tablecell = new
TableCell();

tablecell.BorderStyle = BorderStyle.Double;

tablecell.BorderWidth = 3;

tablecell.Text = s;


TableRow tablerow = new
TableRow();

tablerow.Cells.Add(tablecell);


this.tablePalindromes.Rows.Add(tablerow);

 

}

}

}

 

 

 

  1. Update the text property setter to manage the Table.

     


public
string Text

{


get

{


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


//return ((s == null) ? “[” + this.ID + “]” : s);


return text;

 

}

 


set

{


//ViewState[“Text”] = value;

text = value;


this.alPalindromes = (ArrayList)this.ViewState[“palindromes”];


if (this.alPalindromes == null)

{


this.alPalindromes = new
ArrayList();

}


if (this.checkForPalindrome())

{


if (PalindromeFound != null)

{

PalindromeFound(this, EventArgs.Empty);

}


alPalindromes.Add(text);

literalcontrolPalindromeStatus.Text = String.Format(“This is a Palindrome <br/> <Font size=\”5\” color=\”blue\”></b>{0}</b></font>”, text);

 

}


else

{

literalcontrolPalindromeStatus.Text = String.Format(“This is not a Palindrome <br/> <Font size=\”5\” color=\”red\”></b>{0}</b></font>”, text);

}


this.ViewState.Add(“palindromes”, alPalindromes);


this.BuildPalindromesTable();

}

}

 

 

Add yellow highlighted code in property Text.

 

  1. Build the composite Server Control by

     

The Full code for CompositePalindromeControl 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.Collections;

 

namespace CompositePalindromeControl

{


//[DefaultProperty(“Text”)]

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


public
class
ServerControl1 : CompositeControl ,INamingContainer

{


// [Bindable(true)]


// [Category(“Appearance”)]


// [DefaultValue(“”)]


// [Localizable(true)]


public
event
EventHandler PalindromeFound;


protected
TextBox textboxPalindrome;


protected
Button buttonCheckForPalindrome;


protected
LiteralControl literalcontrolPalindromeStatus;


protected
Label labelForTextBox;


protected
Table tablePalindromes;


protected
ArrayList alPalindromes;

 

 


private
String text;


public
string Text

{


get

{


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


//return ((s == null) ? “[” + this.ID + “]” : s);


return text;

 

}

 


set

{


//ViewState[“Text”] = value;

text = value;


this.alPalindromes = (ArrayList)this.ViewState[“palindromes”];


if (this.alPalindromes == null)

{


this.alPalindromes = new
ArrayList();

}


if (this.checkForPalindrome())

{


if (PalindromeFound != null)

{

PalindromeFound(this, EventArgs.Empty);

}

alPalindromes.Add(text);

literalcontrolPalindromeStatus.Text = String.Format(“This is a Palindrome <br/> <Font size=\”5\” color=\”blue\”></b>{0}</b></font>”, text);

 

}


else

{

literalcontrolPalindromeStatus.Text = String.Format(“This is not a Palindrome <br/> <Font size=\”5\” color=\”red\”></b>{0}</b></font>”, text);

}


this.ViewState.Add(“palindromes”, alPalindromes);


this.BuildPalindromesTable();

}

}

 


protected
override
void RenderContents(HtmlTextWriter output)

{

output.Write(Text);

}


protected
string alphanumeric(string str)

{


string strTemp = (String)str.Clone();


if (str != null)

{


char[] var = strTemp.ToCharArray();


int i = 0;


foreach (char c in var)

{


if (char.IsLetterOrDigit(c))

{

i++;

 

}


else

{

strTemp = strTemp.Remove(i, 1);

 

}

}

}


return strTemp;

}


protected
bool checkForPalindrome()

{


if (this.Text != null)

{


String strControlText = this.Text;


String strTextToUpper = null;

strTextToUpper = Text.ToUpper();

strControlText = this.alphanumeric(strTextToUpper);


char[] rgcReverse = strControlText.ToCharArray();


Array.Reverse(rgcReverse);


String strReverse = new
String(rgcReverse);


if (strControlText == strReverse)

{


return
true;

}


else

{


return
false;

}

}


else

{


return
false;

}

}


public
void OnCheckPalindrome(Object o, System.EventArgs e)

{


this.Text = this.textboxPalindrome.Text;


this.checkForPalindrome();

}


protected
override
void CreateChildControls()

{


//base.CreateChildControls();

labelForTextBox = new
Label();

labelForTextBox.Text = “Enter a Palindrome”;


this.Controls.Add(labelForTextBox);

textboxPalindrome = new
TextBox();


this.Controls.Add(textboxPalindrome);

Controls.Add(new
LiteralControl(“<br/>”));

buttonCheckForPalindrome = new
Button();

buttonCheckForPalindrome.Text = ” Click For Palindrome”;

buttonCheckForPalindrome.Click+=new
EventHandler(OnCheckPalindrome);


this.Controls.Add(buttonCheckForPalindrome);

Controls.Add(new
LiteralControl(“<br/>”));


this.tablePalindromes = new
Table();


this.Controls.Add(tablePalindromes);


this.ChildControlsCreated = true;

}


protected
void BuildPalindromesTable()

{


this.alPalindromes = (ArrayList)this.ViewState[“palindromes”];


if (this.alPalindromes != null)

{


foreach (string s in
this.alPalindromes)

{


TableCell tablecell = new
TableCell();

tablecell.BorderStyle = BorderStyle.Double;

tablecell.BorderWidth = 3;

tablecell.Text = s;


TableRow tablerow = new
TableRow();

tablerow.Cells.Add(tablecell);


this.tablePalindromes.Rows.Add(tablerow);

 

}

}

}

}

}

 

Step 2

Create a WebForm page to use CompositepalindromeControl 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. FindCustomPalindromeControl, select dll , and click Open to add ServerControl1 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”.

Thanks for reading J

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