Sử dụng AJAX ValidatorCalloutExtender trong Asp.net

By Unknown - Thursday, August 27, 2015 - No Comments

(Display Validation in ToolTip Using ValidatorCalloutExtender in Asp.Net) - RequiredFieldValidator là Control cho phép bạn yêu cầu người sử dụng phải nhập trước khi gửi dữ liệu đi, hoặc Control Comparevalidator cho phép bạn kiểm soát được các kiểu dữ liệu nhập vào Textbox như: integer, date, string… Khi người sử dụng không nhập dữ liệu hoặc đưa dữ liệu không hợp lệ các Control này sẽ đưa ra các thông báo để người dùng biết. Vậy làm sao để những thông báo này trông đẹp và chuyên nghiệp hơn? Bài viết dưới đây sẽ hướng dẫn các bạn tích hợp Control AJAX AutoCompleteExtender vào các Form, và khi thông báo xuất hiện trong nó giống như tooltip đẹp và gần gũi hơn.
AutoCompleteExtender sẽ đưa ra thông báo trong các trường hợp:
- Nếu không nhập dữ liệu
- Nếu 2 mật khẩu không giống nhau
- Nếu mật khẩu có độ dài nhỏ hơn 7 hoặc lớn hơn 15.

Xem những Video hay dành cho thiếu nhi - Nghe trên Youtube

- 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: Mở file Site.css nhập thêm đoạn Code phía dưới

.ajax__validatorcallout_popup_table

{

min-width: 300px;

min-height: 40px;

margin-left:250px;

margin-top:-20px;

}

.customCalloutStyle div, .customCalloutStyle td

{

border:1px solid #cfcece;

background-color: #f2dede;

font-family: Arial;

font-size: 11px;

font-weight: bold;

color: #c24442;

}

- B5: Mở file Default.aspx dưới dạng HTML và nhập mã HTML

<%@ Page Title=" Display Validation in ToolTip Using AJAXValidatorCalloutExtender in Asp.Net" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AJAXValidatorCalloutExtender._Default" %>

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

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<asp:ScriptManager ID="ScriptManager1" EnablePageMethods = "true" runat="server">

</asp:ScriptManager>

<h4>

Display Validation in ToolTip Using AJAXValidatorCalloutExtender in Asp.Net

</h4>

<br />

<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">

<tr>

<td>

<asp:label id="lblHeader" runat="server" Text="Register User"></asp:label>

</div>

<tr>

<asp:Label ID="plUserName" runat="server" Text="UserName (*)" />

</td>

<td>

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

<asp:RequiredFieldValidator ID="valUserName" runat="server" ErrorMessage="Please enter User Name" ControlToValidate="txtUserName" Display="None"></asp:RequiredFieldValidator>

<cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" CssClass="customCalloutStyle" TargetControlID="valUserName">

</cc1:ValidatorCalloutExtender>

</td>

</tr>

<tr>

<td>

<asp:Label ID="plPassword" runat="server" Text="Password (*)" />

</td>

<td>

<asp:TextBox ID="txtPassword" CssClass="form-control" runat="server" TextMode="password" Width="200"></asp:TextBox>

<asp:RequiredFieldValidator ID="valPassword" runat="server" Display="None" ControlToValidate="txtPassword" ErrorMessage="Please enter Password"></asp:RequiredFieldValidator>

<cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender2" runat="server" TargetControlID="valPassword">

</cc1:ValidatorCalloutExtender>

<asp:RegularExpressionValidator ID="valPasswordLength" Display="None" ControlToValidate="txtPassword" ValidationExpression="^[\s\S]{7,15}$" runat="server" ErrorMessage="Password must be at least 7 characters, no more than 15 characters"></asp:RegularExpressionValidator>

<cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender5" runat="server" TargetControlID="valPasswordLength">

</cc1:ValidatorCalloutExtender>

</td>

</tr>

<tr>

<td>

<asp:Label id="plConfirmPassword" runat="server" Text="Confirm Password (*)"></asp:Label>

</td>

<td>

<asp:textbox id="txtConfirmPassword" runat="server" maxlength="20" textmode="Password" CssClass="form-control" Width="200"></asp:textbox>

<asp:RequiredFieldValidator ID="valConfirmPassword" runat="server" ErrorMessage="Please enter Password" ControlToValidate="txtConfirmPassword" Display="None" ValidationExpression="^[\s\S]{7,15}$">

</asp:RequiredFieldValidator>

<cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender3" runat="server" TargetControlID="valConfirmPassword">

</cc1:ValidatorCalloutExtender>

<asp:RegularExpressionValidator ID="valConfirmPasswordLength" Display="None" ControlToValidate="txtConfirmPassword" ValidationExpression="^[\s\S]{7,15}$" runat="server" ErrorMessage="Password must be at least 7 characters, no more than 15 characters"></asp:RegularExpressionValidator>

<cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender6" runat="server" TargetControlID="valConfirmPasswordLength">

</cc1:ValidatorCalloutExtender>

<asp:CompareValidator ID="cvMatchPassword" runat="server" Display="None" ControlToValidate="txtConfirmPassword" CssClass="ValidationError" ControlToCompare="txtPassword" ErrorMessage="Password No Match" />

<cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender4" runat="server" TargetControlID="cvMatchPassword">

</cc1:ValidatorCalloutExtender>

</td>

</tr>

</table>

</div>

<asp:LinkButton id="cmdUpdate" runat="server" CssClass="btn btn-small" CausesValidation="true">

</asp:LinkButton> 

<asp:LinkButton id="cmdCancel" runat="server" CssClass="btn btn-small" Causesvalidation="false">

</asp:LinkButton>

</div>

</td>

</tr>

</table>

</ContentTemplate>

</asp:UpdatePanel>

</asp:Content>

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

Quang Bình

News Ticker