Dotnet with Naveen: Filtered TextBox

In this article I'm trying to explain how to work with AJAX FilteredTextBox control in ASP.net. It Prevents a user enter some invalid characters into Textbox control. Without JavaScript we can achieve this by using AJAX FilteredTextbox Extender control in ASP.net.

AJAX FilteredTextBox Control in ASP.net:

Description:

Filtered Textbox is an extender which prevents a user enters some invalid characters into textbox control.

AJAX:

For this we must download AJAX control Toolkit dll and add reference to the project , by right clicking the project and choose assembly reference to add that.

After added the dll add below lines of code in source code.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

Now, you are able to call the AJAX Controls in your source.

<ajaxToolkit:FilteredTextBoxExtender ID="fte1" runat="server" TargetControlID="txt1" FilterType="Numbers" ></ajaxToolkit:FilteredTextBoxExtender>

Properties:

TargetControlID- ID of the textbox for this extender to operate it.

FilterType – Type of filter to apply to the control, we can add multiple types with comma separator.

ValidChars – Textbox allows only what are the character enter into this property.

InValidChars – Textbox won't allow what are the Characters enter into this property.

Filter Types:

There are 4 types of Filter techniques available in FilteredTextBoxExtender control.

1) Custom – We can able to give custom type for filtering, if we set FilterType property as "Custom".

2) Numbers – we can able to enter numbers alone, if we set Filter type property as "Numbers".

3) Lowercase Letters – we can able to enter lowercase letters alone, if we set filter Type property as "Lowercase Letters".

4) Uppercase Letters – we can able to enter uppercase letters alone, if we set filter type property as "Uppercase Letters".

How to work with FilteredTextBox extender Control with Examples :

1) Enter Digits only:

Now, I try to enter only digits into the textbox, for that I set the property FilterType as "Numbers". Now, it allows only numbers if you try to enter other than that control won't accept.

a) Simply drag & drop one textbox control and Design the page like below

        <tr>
            <td width="50%" align="right">Enter Digits only:</td>
            <td width="50%" align="left">
                <asp:TextBox ID="txt1" runat="server" ></asp:TextBox>        
            </td>
        </tr>

b) And now add AJAX FilteredTextboxExtender control

<ajaxToolkit:FilteredTextBoxExtender ID="fte1" runat="server" TargetControlID="txt1" FilterType="Numbers" ></ajaxToolkit:FilteredTextBoxExtender>

output:

2) Enter Lower Case Letters only:

Now, I try to enter lowercase letters into the textbox, for that I set the property FilterType as “LowerCaseLetters”. Now, it allows only lowercase letters if you try to enter other than that control won’t accept.

a) Simply drag and drop one textbox control.

        <tr>
            <td width="50%" align="right">
                Enter Lower Case Letters only:
            </td>
            <td width="50%" align="left">
                <asp:TextBox ID="txt2" runat="server"></asp:TextBox>
            </td>
        </tr>

b) After that call that textbox control id into ajaxFilteredTextboxControl like below.

<ajaxToolkit:FilteredTextBoxExtender ID="fte2" runat="server" TargetControlID="txt2" FilterType="LowercaseLetters"></ajaxToolkit:FilteredTextBoxExtender>

output:

3) Enter Uppercase letters only:

Now, I try to enter uppercase letters into the textbox, for that I set the property FilterType as “UppercaseLetters”. Now, it allows only uppercase letters alone. If you try to enter other than that control won’t accept.

a) Simply drag and drop one textbox control into the page.

        <tr>
            <td width="50%" align="right">
                Enter Upper Case Letters Only:
            </td>
            <td width="50%" align="left">
                <asp:TextBox ID="txt3" runat="server"></asp:TextBox>
            </td>
        </tr>

b) After drag the textbox control simply add ajaxFilteredTextboxExtender control find that textbox control in that using FindControlId property.

<ajaxToolkit:FilteredTextBoxExtender ID="fte3" runat="server" TargetControlID="txt3" FilterType="UppercaseLetters"></ajaxToolkit:FilteredTextBoxExtender>

output:

4) Enter both Uppercase and Lowercase letters:

Up to now I try to enter one type of control, if we want to enter multiple types simply use comma separator into FilterType property then give the type whatever you need.

a) Drag and drop textbox control into the page.

        <tr>
            <td width="50%" align="right">
                Enter Both Upper & Lower Case Letters:
            </td>
            <td width="50%" align="left">
                <asp:TextBox ID="txt4" runat="server"></asp:TextBox>
            </td>
        </tr>

b) After that call that textbox control into AjaxFilteredTextBoxExtender control using TargetControlId property.

<ajaxToolkit:FilteredTextBoxExtender ID="fte4" runat="server" TargetControlID="txt4" FilterType="UppercaseLetters,LowercaseLetters " ></ajaxToolkit:FilteredTextBoxExtender>

output:

5) Enter Special Characters only:

Now, I try to enter special characters into the textbox, for that I set the property FilterType as “Custom”, Filter mode as “ValidChars” and ValidChars as “@#$%.”.

a) Drag and drop one textbox control into the page.

        <tr>
            <td width="50%" align="right">
                Enter Only Special Characters (!,@,#,$,%,^,& etc.):
            </td>
            <td width="50%" align="left">
                <asp:TextBox ID="txt5" runat="server"></asp:TextBox>
            </td>
        </tr>

b) After that add AjaxFilteredTextBoxExtender control using TargetControlId property.

<ajaxToolkit:FilteredTextBoxExtender ID="fte5" runat="server" TargetControlID="txt5" FilterType="Custom" FilterMode="ValidChars" ValidChars="!@#$%^&*(){}[]?<>"></ajaxToolkit:FilteredTextBoxExtender>

output:

6) No digits:

Now, I don’t want to enter digits into the textbox, for that I set the property FilterType as “custom”, and Filter Mode as “InValidChars” and InValidChars as” numbers”.

a) Drag and drop textbox control in to the page.

        <tr>
            <td width="50%" align="right">
                No digits: 
            </td>
            <td width="50%" align="left">
                <asp:TextBox ID="txt6" runat="server"></asp:TextBox>
            </td>
        </tr>

b) Find that textbox control into FilteredTextBoxExtender Control of AJAX.

<ajaxToolkit:FilteredTextBoxExtender ID="fte6" runat="server" TargetControlID="txt6" FilterType="Custom" FilterMode="InvalidChars" InvalidChars="0123456789"></ajaxToolkit:FilteredTextBoxExtender>

output:

Source Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FilterTextBox.aspx.cs" Inherits="FilterTextBox" %>
<%@ 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></title>
    <style type="text/css">
        .style1
        {
            color: #000066;
            font-family: "Trebuchet MS";
            font-size: large;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" />
    <div align="center" class="style1">
        <strong>FilterTextbox Demo
    </strong>
    <br />
    <br />
    <br />
    <table width="100%" style="font-size: small" >
        <tr>
            <td width="50%" align="right">Enter Digits only:</td>
            <td width="50%" align="left">
                <asp:TextBox ID="txt1" runat="server" ></asp:TextBox>        
            </td>
        </tr>
        <tr>
            <td width="50%" align="right">
                Enter Lower Case Letters only:
            </td>
            <td width="50%" align="left">
                <asp:TextBox ID="txt2" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td width="50%" align="right">
                Enter Upper Case Letters Only:
            </td>
            <td width="50%" align="left">
                <asp:TextBox ID="txt3" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td width="50%" align="right">
                Enter Both Upper & Lower Case Letters:
            </td>
            <td width="50%" align="left">
                <asp:TextBox ID="txt4" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td width="50%" align="right">
                Enter Only Special Characters (!,@,#,$,%,^,& etc.):
            </td>
            <td width="50%" align="left">
                <asp:TextBox ID="txt5" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td width="50%" align="right">
                No digits: 
            </td>
            <td width="50%" align="left">
                <asp:TextBox ID="txt6" runat="server"></asp:TextBox>
            </td>
        </tr>
    </table>
    
    <ajaxToolkit:FilteredTextBoxExtender ID="fte1" runat="server" TargetControlID="txt1" FilterType="Numbers" ></ajaxToolkit:FilteredTextBoxExtender>
    <ajaxToolkit:FilteredTextBoxExtender ID="fte2" runat="server" TargetControlID="txt2" FilterType="LowercaseLetters"></ajaxToolkit:FilteredTextBoxExtender>
    <ajaxToolkit:FilteredTextBoxExtender ID="fte3" runat="server" TargetControlID="txt3" FilterType="UppercaseLetters"></ajaxToolkit:FilteredTextBoxExtender>
    <ajaxToolkit:FilteredTextBoxExtender ID="fte4" runat="server" TargetControlID="txt4" FilterType="UppercaseLetters,LowercaseLetters "></ajaxToolkit:FilteredTextBoxExtender>
    <ajaxToolkit:FilteredTextBoxExtender ID="fte5" runat="server" TargetControlID="txt5" FilterType="Custom" FilterMode="ValidChars" ValidChars="!@#$%^&*(){}[]?<>"></ajaxToolkit:FilteredTextBoxExtender>
    <ajaxToolkit:FilteredTextBoxExtender ID="fte6" runat="server" TargetControlID="txt6" FilterType="Custom" FilterMode="InvalidChars" InvalidChars="0123456789"></ajaxToolkit:FilteredTextBoxExtender>
    </div>
    </form>
</body>
</html>

ScriptManager:

<ajaxToolkit:ToolkitScriptManager EnablePartialRendering="true" runat="Server" ID="ScriptManager1" />

Without wrote this line in source code it’s throws the server error to overcome this issue we just add above lines of code in source.

Conclusion:

This article will help you how to filter textbox control while entering unwanted information into that.

Dotnet with Naveen

About Me

Friday 20 November 2015

Filtered TextBox

AJAX FilteredTextBox Control in ASP.net:

Description:

AJAX:

Properties:

Filter Types:

How to work with FilteredTextBox extender Control with Examples :

1) Enter Digits only:

2) Enter Lower Case Letters only:

3) Enter Uppercase letters only:

4) Enter both Uppercase and Lowercase letters:

5) Enter Special Characters only:

6) No digits:

Source Code:

ScriptManager:

Conclusion:

No comments:

Post a Comment