نمایش پیغام "خوش آمدید" یا "عملیات ثبت با موفقیت انجام شد" یا محتویات چند کنترل به صورت Modal را هم می توان در سمت سرور به کاربر نمایش دهیم یا اینکه در سمت کاربر توسط AJAX این عمل انجام شود .در این مقاله نحوه استفاده از AJAX Modal Popup را همراه با ذکر مثال شرح خواهیم داد

هنگامی که شما ID مربوط به کنترل button را در خاصیت TargetControlID تنظیم می کنید , با کلیک بر روی دکمه اعتبار سنجی انجام نمی پذیرد . برای رفع این مشکل میتوانیم یک کنترل Linkbutton به صفحه اضافه کنیم و ID مربوط به Link Button را برای AJAX Control Tookit تنظیم میکنیم .در آخر اعتبار سنجی را برای کنترل های موجودرا با استفاده از تابع Page ClientValidation در Java Script اعمال میکنیم .

نمایش پیغام موفقیت در اعتبارسنجی توسط AJAX Modal :

تگ HTML زیر شامل یک کنترل TextBox , RequiredFieldValidator, button می باشد .همچنین کنترل  Toolkit ModalPopupExtender را  برای خاصیت TargetControlID دکمه linkButton تنظیم میکنیم .

همچنین دکمه مورد نظر شامل رویداد OnClientClick میباشد و هنگامی که دکمه کلیک میشود , ابتدا اعتبار سنجی برای کنترلها انجرا میشود , سپس ModalPopupExtender اجرا میشود

 <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
Name:
<asp:TextBox ID="txtName" runat="server" />
<asp:RequiredFieldValidator ErrorMessage="Required" ControlToValidate="txtName" ForeColor="Red"
    Display="Dynamic" runat="server" />
<br />
<br />
<asp:Button ID="btnDisplayName" runat="server" Text="Display Name" CausesValidation="false"
    OnClientClick="return DisplayName()" />
<asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton>
<asp:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="mpe" runat="server"
    PopupControlID="pnlPopup" TargetControlID="lnkDummy" BackgroundCssClass="modalBackground">
</asp:ModalPopupExtender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none">
    <div class="header">
        Modal Popup
    </div>
    <div class="body">
        Your name: <span id="lblName"></span>
        <br />
        <asp:Button ID="btnClose" runat="server" Text="Close" OnClientClick="return HideModalPopup()" />
    </div>
</asp:Panel>

تابع اسکریپتی که در ادامه تعریف میکنیم , ID کنترل Textbox را دیافت میکند , سپس محتوای TextBox انتخاب شده را در ModalPopupExtender قرار میدهیم .

 <script type="text/javascript">
    function DisplayName() {
        if (Page_ClientValidate()) {
            $get("lblName").innerHTML = $get("<%=txtName.ClientID %>").value;
            $find("mpe").show();
        }
        return false;
    }
    function HideModalPopup() {
        $find("mpe").hide();
        return false;
    }
</script>