استفاده از ModalPopup با AJAX در ASP.Net

دراین مقاله قصد داریم چگونگی استفاده از Modal Popup با بروزرسانی کردن پنل در ASP.Net بررسی کنیم که در مقاله با مثال توضیح داده میشود.

استفاده از ModalPopup با AJAX در ASP.Net

عموما توسعه دهندگان در قرار دادن ModalPopu در داخل AJAX UpdatePanel  دچار اشتباه میشوند و از این جا وقتی که Partial Postback اتفاق می افتد ModalPopup بسته میشود.

HTML شامل یک کنترل ModalPopup خارجی (Extender) است که در داخل آن یک پنل DropDownList است که در حال انجام postBack از رویداد OnSelectedIndexChanged  است.

برای جلوگیری از postBack کامل DropDownList در UpdatePanel قرار گرفته است.

در زیر کد را ملاحظه میکنیم :

<cc1:ToolkitScriptManager runat="server">
</cc1:ToolkitScriptManager>
<asp:Button ID="btnShow" runat="server" Text="Show Modal Popup" />
<!-- ModalPopupExtender -->
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panel1" TargetControlID="btnShow"
    CancelControlID="btnClose" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" Style="display: none">
    <div style="height: 60px">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                Do you like this product?&nbsp;
                <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="OnSelectedIndexChanged">
                    <asp:ListItem Text="Please Select" Value="0"></asp:ListItem>
                    <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
                    <asp:ListItem Text="No" Value="2"></asp:ListItem>
                </asp:DropDownList>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    <asp:Button ID="btnClose" runat="server" Text="Close" />
</asp:Panel>
<!-- ModalPopupExtender -->

 

رویداد  SelectedIndexChanged  از DropDownList :

هنگامی که یک آیتم از DropDownList  انتخاب شود این رویداد فراخوانی میشود.

در داخل این رویداد با استفاده از JavaScript  یک alert برای پیام مینویسیم.

 

کد های مربوط به #C :

protected void OnSelectedIndexChanged(object sender, EventArgs e)
{
    string message = "Selected Item: " + DropDownList1.SelectedItem.Text;
    ScriptManager.RegisterClientScriptBlock((sender as Control), this.GetType(), "alert", "alert('" + message + "');", true);
}

 

در نهایت  خروجی زیر را داریم : 

 

دانلود فایل های ضمیمه مخصوص اعضای سایت می باشد !
کاربر مهمان! جهت دانلود و استفاده از امکانات سایت لطفا وارد سایت شوید و یا ثبت نام کنید
دانلود نسخه ی PDF این مطلب