Post
Ask Question

AJAX FilteredTextBoxExtender


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.


Similar Articles