Asp.Net ajax FilteredTextBox Control

FilteredTextBox Control:

In this post we are going to see 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
We can use the FilteredTextBox extender control to create TextBox that accepts only numbers or characters.

The FilteredTextBox Extender control supports the following properties (this is not a complete list):

Sr.No	Properties	Description
1)	TargetControlID	The ID of the text box for this extender to control it.
2)	FilterType	Is applying type of Filter, as a comma-separated combination of Numbers, LowercaseLetters, UppercaseLetters, and Custom.
3)	FilterMode	It contain ValidChars or InvalidChars.
4)	ValidChars	A string consisting of all characters considered valid for the text field, if "Custom" is specified as the filter type.
5)	InvalidChars	A string consisting of all characters considered invalid for the text field, if "Custom" is specified as the filter type and "InvalidChars" as the filter mode.
6)	FilterInterval	An integer containing the interval in milliseconds in which the field's contents are filtered.

The below example show to how to use the FilteredTextBox control. The page contains two TextBox controls. The first TextBox accepts only numbers. The second TextBox accepts lowercase letters, underscores, and exclamation marks.

We specify the type of characters that a TextBox extended with the FilteredTextBox control accepts by setting the FilterType property. This property accepts the following constants: Numbers, LowercaseLetters, UppercaseLetters, and Custom.

We can assign more than one of these constants to the FilterType property by separating the constants with a comma.If at least one of the FilterType constants is Custom, we can create either a list of valid characters or list of invalid characters for the filter. The second FilteredText control has its FilterMode property set to the value ValidChars. The ValidChars property lists two valid characters (_ and !) that a user can enter in addition to lowercase letters.

Code: ShowFilteredTextBox.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ShowFilteredTextBox.aspx.cs"
                Inherits="LearnAsp.Net.ControlDemo.Ajax.ShowFilteredTextBox" %>
<!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>Show Filtered TextBox</title>
    <style type="text/css">        
                fieldset
        {
                 width: 40%;
                 background-color: #fff6f0;
                 color: #4d7acc;
                 font-size: larger;
                 font-family: sans-serif;
                 border-radius: 10px;
        }
                legend
        {
                 color: #b52525;
                 background-color: #ffe000;
                 border-radius: 10px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <fieldset>
        <legend>   FilteredTextBox Control Example  </legend   >
        <div>
         <h3>Product Details</h3>
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <asp:Label ID="lblNumeric" Text="Enter a Number:" 
                AssociatedControlID="txtNumeric" runat="server" />
            <br />
            <asp:TextBox ID="txtNumeric" runat="server" />
            <ajax:FilteredTextBoxExtender ID="fte1" TargetControlID="txtNumeric" 
            FilterType="Numbers" runat="server" />
            <br />
            <br />
            <asp:Label ID="lblProductCode" Text="Enter a Product Code:" 
                AssociatedControlID="txtProductCode" runat="server" />
            <br />
            <asp:TextBox ID="txtProductCode" runat="server" />
            <ajax:FilteredTextBoxExtender ID="fte2" TargetControlID="txtProductCode" 
                FilterType="LowercaseLetters,Custom" FilterMode="ValidChars" 
                ValidChars="_!" runat="server" />
            <br />
            (A product code can contain only lower-case characters, 
            underscores, exclamation marks, and no spaces)
        </div>
    </fieldset>
    </form>
</body>
</html>

Output:

07 January 2020

Asp.Net ajax FilteredTextBox Control

No comments:

Post a Comment