[Previous] [TOC] [Next]

A Palindrome Checker

The preceding exercise shows the fundamentals of writing a simple server-side control that renders. However, ASP.NET already delivers a perfectly good Label control. Why do you need another one? To further illustrate rendered server-side controls, here's a simple control that checks to see if the string typed by the client is a palindrome. We'll observe some more advanced rendering techniques as well as how control events work.

The Palindrome Checker Control

  1. Create the Palindrome checker control. In the Solution Explorer, highlight the CustomControlLib node. Right-click on the node and select Add New Item from the shortcut menu. Highlight the Web Custom Control node. Enter PalindromeCheckerRenderedControl.cs in the Name text box and generate the code.

    Graphic
  2. Keep the control's Text property. This will hold the palindrome text.

  3. Add a method to test for a palindrome. A palindrome is a word, sentence, or phrase that reads the same forward as it does backwards. Add a method to the control that checks to see whether the internal text is a palindrome. This is a simple test for a palindrome that converts the text to uppercase, reverses it, and then compares the result to the original text. You should also strip out nonalphanumeric characters. Here is some code that does the trick.

       protected string StripNonAlphanumerics(string str)
       {
          string strStripped = (String)str.Clone();
          if (str != null)
          {
             char[] rgc = strStripped.ToCharArray();
             int i = 0;
             foreach (char c in rgc)
             {
                if (char.IsLetterOrDigit(c))
                {
                   i++;
                }
                else
                {
                   strStripped = strStripped.Remove(i, 1);
                }
             }
          }
          return strStripped;
       }
       protected bool CheckForPalindrome()
       {
          if (this.Text != null)
          {
             String strControlText = this.Text;
             String strTextToUpper = null;
             strTextToUpper = Text.ToUpper();
    
             strControlText =
                         this.StripNonAlphanumerics(strTextToUpper);
    
             char[] rgcReverse = strControlText.ToCharArray();
             Array.Reverse(rgcReverse);
             String strReverse = new string(rgcReverse);
    
             if (strControlText == strReverse)
             {
                return true;
             }
             else
             {
                return false;
             }
          }
          else
          {
             return false;
          }
       }
    
  4. Change the rendering method to print palindromes in blue and nonpalindromes in red. The Render method takes a single parameter of type HtmlTextWriter. In addition to allowing you to stream text to the browser, HtmlTextWriter is full of other very useful features we'll see shortly. For now, you can treat it very much like Response.Write. Whatever you send through the Write method will end up at the client's browser.

    protected override void Render(HtmlTextWriter output)
       {
          if (this.CheckForPalindrome())
          {
             output.Write("This is a palindrome: <br>");
             output.Write("<FONT size=5 color=Blue>");
             output.Write("<B>");
             output.Write(Text);
             output.Write("</B>");
             output.Write("</FONT>");
          } else {
             output.Write("This is NOT a palindrome <br>");
             output.Write("<FONT size=5 color=red>");
             output.Write("<B>");
             output.Write(Text);
             output.Write("</B>");
             output.Write("</FONT>");
          }
       }
    
  5. Build the project by selecting Build | Build Solution from the main menu.

  6. Add the PalindromeCheckerRenderedControl to the toolbox. Right-click on the toolbox and select Choose Item. Use the Browse button to find the CustomcontrolLib.DLL assembly and select it. Visual Studio will load the new control in the toolbox.

    Graphic
  7. Add a page to use the palindrome checker control. Add a new Web form to the ControlORama project and name it UsePalindromeCheckerControls.aspx. Pick up the PalindromCheckerRenderedControl and drop it on the page. Add a TextBox and a push button so you can add a palindrome to the control and check it.

    public partial class UsePalindromeCheckerControls : System.Web.UI.Page
    {
       protected void Page_Load(object sender, EventArgs e)
       {
    
       }
       protected void Button1_Click(object sender, EventArgse)
       {
          this.PalindromeCheckerRenderedControl1.Text = this.TextBox1.Text;
       }
    }
    
  8. Run the page and test for a palindrome. Palindromes should appear in blue and nonpalindromes in red.

    Graphic

[Previous] [TOC] [Next]