AJAX FilteredTextBoxExtender

In this article you will get the knowledge of AJAX FilteredTextBoxExtender control with asp.net?


AJAX FilteredTextBoxExtender

There are the following easy steps to understand how to use Ajax FilteredTextBoxExtender control in Asp.Net.
 

Step 1: Create new Ajax enabled web site.
 

Step 2: Now go to solution explorer and right click on root directory and click on Add reference then add AjaxControlTollkit.dll.
 

Step 3: Copy the following code and paste on to your page.


Example:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FilteredTextBox.aspx.cs" Inherits="FilteredTextBox" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head runat
="server">
<
title>Filtered TextBox </title
>
</
head
>
<
body
>
<
form id="form1" runat
="server">
    <
asp:ScriptManager runat="server" ID="scriptManager"
/>
    <table width
="400">
        <tr
>
            <td
>
                <asp:Label ID="label1" runat="server" Text="Only Numbers" Width="150"></asp:Label
>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox
>
                <ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" TargetControlID="TextBox1" FilterType="Numbers"
/>
            </td
>
        </tr
>
        <tr
>
            <td
>
                <asp:Label ID="label2" runat="server" Text="Uppercase Letter" Width="150"></asp:Label
>
                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox
>
                <ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender2" runat="server" TargetControlID="TextBox2" FilterType="UppercaseLetters"
/>
            </td
>
        </tr
>
        <tr
>
            <td
>
                <asp:Label ID="label3" runat="server" Text="Lowercase Letters" Width="150"></asp:Label
>
                <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox
>
                <ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender3" runat="server" TargetControlID="TextBox3" FilterType="lowercaseLetters"
/>
            </td
>
        </tr
>
        <tr
>
            <td
>
                <asp:Label ID="label4" runat="server" Text="Custom numbers" Width="150"></asp:Label
>
                <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox
>
                <ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender4" runat="server" TargetControlID="TextBox4" FilterType="Custom, Numbers" ValidChars="+-=/*()."
/>
            </td
>
        </tr
>
    </table
>
</
form
>
</
body
>
</
html
>

Step4: Now Debug the application by press F5,
 

Output:
Now in the the first textbox you can enter only number, in second textbox you can enter only Uppercase letter.


TextFilter.JPG


Note: You can't enter wrong value in any textbox.


There are the following properties of FilteredTextBoxExtender:

  • TargetControlID
  • FilterType
  • ValidChars etc.


FilterType contain following attributes:

  • Numbers
  • UppercaseLetters
  • lowercaseLetters
  • Custom


If you set FilterType = Numbers like as follows
 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
     <ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" TargetControlID="TextBox1" FilterType="Numbers" />

Then you can enter only numbers.