Thủ thuật AJAX FilteredTextBoxExtender trong Asp.net

(How to use Ajax FilteredTextBoxExtender for validating in ASP.NET) – Việc kiểm soát thông tin nhập vào Textbox trên Form nhập liệu rất quan trọng, nó không chỉ giúp ngăn chặn người dùng nhập các ký tự không hợp lệ vào Textbox mà còn cho phép người dùng chỉ nhập các ký tự mà bạn đã định nghĩa trước. Ví dụ đối với Textbox nhập số điện thoại bạn chỉ muốn Textbox này chỉ chấp nhận các giá trị số được đưa vào còn với các ký tự sẽ không được phép. Hay với các Textbox liên quan đến việc tính toán thì sẽ không cho phép người dùng nhập vào ký tự .

Nghe những bài hát đỉnh nhất về Thấy cô giáo - Nghe trên Youtube

Có rất nhiều cách để giải quyết vấn đề này như sử dụng Javasript hoặc các control có sẵn trong Asp.net như: RequiredFieldValidator, RegularExpressionValidator, CompareValidator… Hôm nay chúng tôi sẽ giới thiệu với các bạn thêm 1 cách để có thể kiểm soát dễ dàng tính hợp lệ của dữ liệu khi nhập vào Textbox, đó là sử dụng Control Ajax FilteredTextBoxExtender. Đây là một Control có sẵn trong bộ công cụ AjaxControlToolkit và dưới đây là các bước thực hiện.

- B1: Tạo Project trong Microsoft Visual Studio 2010

- B2: Download  thư viện AjaxControlToolkit tại đây.

- B3: Giải nén AjaxControlToolkit.Binary.NET4, và References Ajaxcontroltoolkit.dll trong thư mục vừa giải nén vào Project.

- B4: Đăng ký thư viện AjaxControlToolkit vào trang Default.aspx

<%@ RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1"%>

Sau khi đã thực hiện xong 4 bước trên bây giờ là lúc sử dụng FilteredTextBoxExtender. Với Ajax FilteredTextBoxExtender người lập trình có nhiều lựa chọn để kiểm soát dữ liệu nhập vào Textbox và dưới đây các các lựa chọn.

1. Chỉ cho phép người dùng nhập số (Allow only Numbers)

<asp:TextBox ID="txtOnlyNumbers" CssClass="form-control" runat="server" Width="220"></asp:TextBox>

<cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server"FilterType="Numbers"TargetControlID="txtOnlyNumbers"/>

2. Chỉ cho phép người dùng nhập số và các ký tự +,-,*,/,= (Allow only Numbers and math symbols (+,-,*,/,=,.)

<asp:TextBox ID="txtOnlyNumbersAndSymbols" CssClass="form-control" runat="server" Width="220"></asp:TextBox>

<cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender7" runat="server"FilterType="Custom, Numbers" ValidChars="+-=/*()." TargetControlID="txtOnlyNumbersAndSymbols" />

3. Chỉ cho phép người dùng nhập ký tự chữ hoa (Allow only Uppercase Alphabets)

<asp:TextBox ID="txtUppercase" CssClass="form-control" runat="server" Width="220"></asp:TextBox>

<cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender2" runat="server"FilterType="UppercaseLetters"TargetControlID="txtUppercase"/>

4. Chỉ cho phép người dùng nhập ký tự thường (Allow only Lowercase Alphabets)

<asp:TextBox ID="txtLowercase" CssClass="form-control" runat="server" Width="220"></asp:TextBox>

<cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender3" runat="server"FilterType="LowercaseLetters"TargetControlID="txtLowercase"/>

5. Chỉ cho người dùng nhập ký tự (Allow only Alphabets)

<asp:TextBox ID="txtAlphabets" CssClass="form-control" runat="server" Width="220"></asp:TextBox>

<cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender4" runat="server"FilterType="LowercaseLetters, UppercaseLetters" TargetControlID="txtAlphabets" />

6. Chỉ cho phép người dùng nhập số và ký tự (Allow Alphabets and Numbers)

<asp:TextBox ID="txtAlphabetsAndNumbers" CssClass="form-control" runat="server" Width="220"></asp:TextBox>

<cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender5" runat="server"FilterType="Numbers, UppercaseLetters, LowercaseLetters" TargetControlID="txtAlphabetsAndNumbers" />

7. Cho phép người dùng nhập số, ký tự và dấu cách (Allow Alphabets and Numbers and Spaces)

<asp:TextBox ID="txtAlphabetsAndNumbersAndSpaces" CssClass="form-control"runat="server"Width="220"></asp:TextBox>

<cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender6" runat="server"FilterType="Numbers, LowercaseLetters, UppercaseLetters,Custom" ValidChars=" " TargetControlID="txtAlphabetsAndNumbersAndSpaces" />

8. Cho phép người dùng nhập thông tin dạng Email (Email Address)

<asp:TextBox ID="txtEmailAddress" CssClass="form-control" runat="server" Width="220"></asp:TextBox>

<cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender8" runat="server"FilterType="Numbers, LowercaseLetters, UppercaseLetters,Custom" ValidChars=".@" TargetControlID="txtEmailAddress" />

9. Cho phép người dùng nhập số thập phân (Decimal Number)

<asp:TextBox ID="txtDecimalNumber" CssClass="form-control" runat="server" Width="220"></asp:TextBox>

<cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender9" runat="server"FilterType="Numbers,Custom"ValidChars="."TargetControlID="txtDecimalNumber"/>

Chúc các bạn thành công!

Quang Bình