نحوه استفاده از ModalPopupExtender آژاکس در ASP.Net

تو این پست از ModalPopupExtender میگم.خیلی وقتها شما می خواید که از کاربر یه بله و خیر یا تایید و انصراف بپرسید که یه کاری انجام بدید یا یک پیام به کاربر بدید، ایمیل ارسال کنید یا قالب سایت رو براش تغییر بدید. بدون استفاده از آژاکس  چند بار صفحه باید رفرش شه. اما با آژاکس بدونه رفرش کردن صفحه تمام تغییرات رو انجام میدیم.

تو این مثال من با استفاده از ModalPopupExtender به کاربر چند مدل استایل نشون میدم و کاربر با انتخاب هر کدوم استایل مربوطه بر روی صفحه اعمال میشه.

برای دیدن کد ها به ادامه مطلب مراجعه کنید

ابتدا یک سایت با قالب آژاکس ایجاد می کنیم.

بعد یه پاراگراف یا بخش با یک آی دی مشخص ایجاد میکنیم. متن دلخواهمون رو توش می نویسیم. بعد یک دکمه یا عکس یا لیبل یا هر چیز دیگه که می خوایم با کلیک بر روی اون تنظیمات به کاربر نشون داده شه ایجاد می کنیم که من یک لینک لیبل درست کردم :

<asp:LinkButton ID="btnpopup" runat="server">برای دیدن استایلها اینجا کلیک کنید</asp:LinkButton>

حالا من تنظیمات رو می خوام در قالب یک پنل که 3 دکمه رادیویی برای استایل ها و 2 دکمه برای تایید و انصراف داره به کاربر نشون بدم. پس از کد زیر استفاده می کنم:

<asp:Panel runat="server" ID="panel1" Width="173px" Height="90px"
BackColor="Lavender"
BorderStyle="Double"
Direction="RightToLeft"
Font-Names="tahoma"
Font-Size="12px"
Style="display: none" >
<asp:RadioButton ID="rad1" runat="server" Text="متن کج و سبز" onclick="s='ig'" GroupName="rad"/><br />
<asp:RadioButton ID="rad2" runat="server" Text="متن توپر و کج" onclick="s='bi'" GroupName="rad" /><br />
<asp:RadioButton ID="rad3" runat="server" Text="متن توپر و زمینه سبز" onclick="s='bbgg'" GroupName="rad"/><br />
<div align="center">
<asp:Button ID="btnok" runat="server" Text="تایید"/>&nbsp;
<asp:Button ID="btncancel" runat="server" Text="انصراف" />
</div>
</asp:Panel>

توی پنل برای هر 3 دکمه رادیویی در رویداد onclick گفتم یه متغیری رو مقدار دهی کنن که در ادامه می گم برای چی هست.

بعد یک ModalPopupExtender رو به صفحه با خواص زیر اضافه می کنیم :

TargetControlID="btnpopup"
PopupControlID="panel1"
OkControlID="btnok"
OnOkScript="changestyle()"
CancelControlID="btncancel"

TargetControlID که قبلا هم گفتیم کنترلی رو تحت تاثیر قرار میده که می خوایم با کلیک کردن بر روی اون تنظیمات به کاربر نشون داده شه.

PopupControlID که تنظیمات رو ( که من در قالب یک پنل آوردم ) به صورت popup نشون میده.

OkControlID برای تعیین دکمه تایید هست که با کلیک بر روی اون صفحه رفرش نشه اما تغییرات اعمال شه.

OnOkScript اسکریپتی هست که با زدن کنترلی که به عنوان دکمه تایید انتخاب کردیم انجام میشه.

CancelControlID کنترلی به عنوان کنترل انصراف عمل می کنه. اگه تعیین نشه با زدن دکمه انصراف صفحه رفرش میشه.

حالا استایل های مورد نظرم رو می نویسم :

    <style type="text/css">
        .ig{font-style:italic;color:Green;}
        .bi{font-style:italic;font-weight:bold}
        .bbgg{font-weight:bold;background-color:Green;}
    </style>

 اگه دقت کنید می بینید که هر کدوم از  استایل هام رو به یکی از دکمه های رادیویی نسبت دادم. حالا می رسیم به تابع جاوا اسکریپتمون :

<script type="text/javascript">
    var s;
    function changestyle()
        {
            document.getElementById("paragraph").className=s;
        }
</script>

هر وقت که این کد فراخوانی میشه ( با زدن کنترلی که به عنوان تایید تعیین شده ) تابع توی صفحه می گرده و المنت هایی یا کنترل هایی که آی دی paragraph داشته باشن کلاسشون رو برابر متغیر s که با زدن دکمه رادیویی مقدار دهی مشید قرار میده و تغییرات اعمال میشه و پنجره popup بسته میشه.

لینک دانلود نمونه کدهای ModalPopupExtender از 4Shared