Trong quá trình thiết kế web ASP.Net hay bất kỳ một loại công nghệ nào thì việc bẩy lỗi luôn luôn là cần thiết, trong bài hôm nay mình muốn chia sẻ cách sử dụng Ajax AutoComplete MaskedEdit để kiểm tra tính hợp lệ của số, giờ và ngày khi xử lý Form.
AutoComplete là gì?
Việc đầu tiên là ban tìm hiểu khái niệm của AutoComplete, đây là một chức năng tự động hoàn thành cho người dùng sử dụng tính năng nào đó đã được cài đặt trong web, ví dụ như: Khi nhập từ khóa vào trong khung search của google thì sẽ hiện ra các từ gợi ý và nhân mũi tên xuống sẽ tự điền từ khóa vào cho mình, một ứng dụng nữa là khi nhập vào text box ngày tháng mình không cần nhập dấu phân cách “/” nó sẽ tự điền vào cho mình, đó cũng là tính năng quan trọng của AutoComplete MaskedEdit Control ASP.Net.
Với Ajax AutoComplete mình có thể làm được rất nhiều tiện ích chuyên nghiệp cho người dùng, tuy nhiên trong giới hạn của bài viết hôm nay mình chỉ dùng một control là AutoComplete MaskedEdit để xử lý Ngày giờ và sự hợp lệ của số trong ASP.Net. bcdonline cũng xin nhắc với các bạn, khi sử dụng Ajax AutoComplete nói chung phải cài đặt Ajax Control Toolkit vào trong Visual trước.
Hợp lệ của số với AutoComplete MaskedEdit
Đầu tiên bạn thiết kế một giao diện để nhập dữ liệu số và test, với một Text Box. Sau đó kéo Control Ajax ToolkitScriptManager vào trên sau trong thẻ DIV. Control này để điều khiển các AutoComplete control mình sẽ sử dụng sau đó.
Sau khi đã có được ToolkitScriptManager rồi thì bạn từ toolbox kéo control MaskedEditExtender vào, đây là phần control chính để sử dụng.
Ở đây mình muốn sử dụng thêm một tiện ích thông báo lỗi hay tình hợp lệ … với người dùng thông qua MaskedEdit cotrol này, điều này không bắt buột vì trên lý thuyết có text box với MaskedEdit là dùng được rồi mình muốn mở rộng thêm cho bạn nào thích tìm hiểu. Vào tool box kéo cái MaskedEditValidator vào trong trang.
Kết quả trong Code mình sẽ được đoạn như sau:
1
2
3
4
5
6
7
8
9
10
11
12
| <!--<asp:TextBox ID="TextBox1" runat="server" Width="180"></asp:TextBox><asp:MaskedEditExtender ID="MaskedEditExtender1" runat="server" TargetControlID="TextBox1"Mask="999" MessageValidatorTip="true" MaskType="Number" InputDirection="RightToLeft"AcceptNegative="Left" ErrorTooltipEnabled="True" /><asp:MaskedEditValidator ID="MaskedEditValidator1" runat="server" ControlExtender="MaskedEditExtender1"ControlToValidate="TextBox1" IsValidEmpty="false" MaximumValue="100" MinimumValue="0"EmptyValueMessage="Nhập Số Test" MaximumValueMessage="Lớn nhất là 100"MinimumValueMessage="Nhỏ nhất là 0" EmptyValueBlurredText="*"ToolTip="Nhập số trong khoảng từ 0 -100"></asp:MaskedEditValidator>--> |
Giải thích:
Trong MaskedEditExtender ta có:
Trong MaskedEditExtender ta có:
- TargetControlID: Là ID textbox cần kiểm tra.
- Mask: Qui định số lượng ký tự và định dạng nhập, ở đây có “999″ tức là phải nhập 3 ký tự số từ 0-9.
- MessageValidatorTip: Có bật tooltip thông báo hay không.
- MaskType: Qui đinh kiểu dữ liệu.
Trong MaskedEditValidator cũng có:
- ControlExtender: Nhập điểu khiển lỗi cho Extender nào ở đây là MaskedEditExtender1
- ControlToValidate: Điều khiển TextBox nào?
- MaximumValue: Số lớn nhất cho phép nhập
- MinimumValue: Số nhỏ nhất cho phép nhập
- MaximumValueMessage: Thông báo khi nhập số lớn hơn số cho phép.
- MinimumValueMessage: Thông báo khi nhập số nhỏ hơn số cho phép
- ToolTip: Tooltip Thông báo.
AutoComplete MaskedEdit Cho Giờ : Phút : Giây
Mình đã làm xong phần MaskedEdit Num rồi, các phần sau cứ dựa vào đó mà làm, cũng kéo vào TextBox, và MaskedEditExtender, MaskedEditValidator như sau:
1
2
3
4
5
6
7
8
9
10
11
12
| <!--<asp:TextBox ID="TextBox2" runat="server" Width="180"></asp:TextBox><asp:MaskedEditExtender ID="MaskedEditExtender2" runat="server" TargetControlID="TextBox2"Mask="99:99:99" MessageValidatorTip="true" MaskType="Time" InputDirection="RightToLeft"ErrorTooltipEnabled="True" /><asp:MaskedEditValidator ID="MaskedEditValidator2" runat="server" ControlExtender="MaskedEditExtender2"ControlToValidate="TextBox2" IsValidEmpty="false" MaximumValue="23:59:59" MinimumValue="00:00:00"EmptyValueMessage="Nhập thời gian" MaximumValueMessage="Max 23:59:59" InvalidValueBlurredMessage="Không hợp lệ"MinimumValueMessage="Min 00:00:00" EmptyValueBlurredText="*"ToolTip="Nhập Time 00:00:00 to 23:59:59"></asp:MaskedEditValidator>--> |
AutoComplete MaskedEdit cho Ngày, Tháng, Năm
Với AutoComplete MaskedEdit Date bạn có thể bẩy lỗi, ngày tháng năm hợp lệ, ngày tháng năm thuộc vào khoảng nào đó, nếu không hợp lệ thì xuất thông báo cho người dùng.
1
2
3
4
5
6
7
8
9
10
11
12
| <!--<asp:TextBox ID="TextBox3" runat="server" Width="180"></asp:TextBox><asp:MaskedEditExtender ID="MaskedEditExtender3" runat="server" TargetControlID="TextBox3"Mask="99/99/9999" MessageValidatorTip="true" MaskType="Date" InputDirection="RightToLeft"ErrorTooltipEnabled="True" /><asp:MaskedEditValidator ID="MaskedEditValidator3" runat="server" ControlExtender="MaskedEditExtender3"ControlToValidate="TextBox3" IsValidEmpty="false" MaximumValue="01/01/2099" MinimumValue="01/01/2013"EmptyValueMessage="Nhập ngày tháng năm" MaximumValueMessage="Max 01/01/2099"InvalidValueBlurredMessage="Không hợp lệ" MinimumValueMessage="Min 01/01/2013"EmptyValueBlurredText="*" ToolTip="Date 01/01/2013 to 01/01/2099"></asp:MaskedEditValidator>--> |
Kết luận: Trong việc thu thập dữ liệu từ người dùng là một trong những nghệ thuật, có sự tiện lợi, sáng tạo, bắt mắt và cảm giác dễ chịu cho người truy cập họ mới cung cấp thông tin cho chúng ta. Mong là bài Sử dụng AutoComplete MaskedEdit Trong ASP.Net của bcdonline.net sẽ giúp được nhiều cho các bạn. Chúc thành công!
Comments[ 0 ]
Đăng nhận xét