Sử dụng AJAX ValidatorCalloutExtender trong Asp.net

(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.

Nghe những bài hát đỉnh nhất về Thấy cô giáo - 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

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

<%@ RegisterAssembly="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">

        <ContentTemplate>

            <table cellpadding="3"cellspacing="5"border="0"width="60%">

                <tr>

                    <td>

                        <div class="panel panel-default">

                            <div class="panel-heading">

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

                            </div>

                            <div class="panel-body">

                                <table cellpadding="2"cellspacing="3"border="0"width="100%">

                                    <tr>

                                        <td style="width:28%;">

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

                                        </td>

                                        <td>

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

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

                                            <cc1:ValidatorCalloutExtenderID="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:RequiredFieldValidatorID="valPassword"runat="server"Display="None"ControlToValidate="txtPassword"ErrorMessage="Please enter Password"></asp:RequiredFieldValidator>

                                            <cc1:ValidatorCalloutExtenderID="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:ValidatorCalloutExtenderID="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:RequiredFieldValidatorID="valConfirmPassword"runat="server"ErrorMessage="Please enter Password" ControlToValidate="txtConfirmPassword" Display="None"ValidationExpression="^[\s\S]{7,15}$">

                                            </asp:RequiredFieldValidator>

                                            <cc1:ValidatorCalloutExtenderID="ValidatorCalloutExtender3"runat="server"TargetControlID="valConfirmPassword">

                                            </cc1:ValidatorCalloutExtender>

                                            <asp:RegularExpressionValidatorID="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:ValidatorCalloutExtenderID="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:ValidatorCalloutExtenderID="ValidatorCalloutExtender4"runat="server"TargetControlID="cvMatchPassword">

                                            </cc1:ValidatorCalloutExtender>

                                        </td>

                                               </tr>

                                </table>

                            </div>

                            <div class="modal-footer">

                                <div class="btn-group">

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

                                            <i class="icon-update"></i>&nbsp;&nbsp;<asp:label id="lblUpdate" runat="server" Text="Save"></asp:label>

                                        </asp:LinkButton>&nbsp;

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

                                            <i class="icon-close"></i>&nbsp;&nbsp;<asp:label id="lblClose" runat="server" Text="Close"></asp:label>

                                        </asp:LinkButton>

                                   </div>

                            </div>

                        </div>

                    </td>

                </tr>       

            </table>

        </ContentTemplate>

    </asp:UpdatePanel>

</asp:Content>

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

Quang Bình