معرفی کنترل ها و تکنیک های موجود در ASP.NET Ajax - قسمت دوم
  در این مقاله به معرفی کنترل ModalPopupExtender می پردازم.
   Ajax
   ۲۳۶۲۱
   دانلود
   مرتضی صحراگرد
   ۱۳۸۶/۲/۲۱
ارسال لینک صفحه برای دوستان ارسال لینک صفحه برای دوستان  اضافه کردن به علاقه مندیها اضافه کردن به علاقه مندیها   نسخه قابل چاپ نسخه قابل چاپ

 

در اين مقاله به معرفي کنترل ModalPopupExtender مي پردازم.

مقدمه :

همگي ما پيام هايي را که قبلا با استفاده از تابع window.confirm مربوط به زبان جاوااسکريپت به کاربر نشان مي داديم را به ياد مي آوريم.

با استفاده از کنترل ModalPopupExtender  مربوط به Microsoft Ajax مي توان پنجره هايي با ظاهري بسيار زيبا به کاربر نشان داد. در اين مقاله ما دو مثال از کاربرد اين کنترل را انجام خواهيم داد.

مثال اول :

در مثال اول ما يک پنجره پيغام Popup به کاربر نشان خواهيم داد تا رنگ پس زمينه صفحه را انتخاب نموده و تاييد نمايد. سپس بدون اينکه صفحه PostBack نمايد، تغييرات به صفحه اعمال خواهد شد.

در شکل زير اين پنجره را مشاهده مي نماييد.

لازم به ذکر مي باشد که براي اينکه بتوانيم از کنترل ModalPopupExtender  استفاده نماييم، ابتدا بايد کتابخانه ASP.NET AJAX Control Toolkit را از اينجا دانلود نماييد. و سپس فايل دانلود شده ، که يک فايل زيپ مي باشد را استخراج نماييد.

همراه با ساير فايل هاي موجود در اين فايل زيپ، يک اسمبلي به نام AjaxControlToolkit.dll موجود مي باشد که در حقيقت تمام کنترل هاي موجود در  ASP.NET AJAX Control Toolkit ، در اين اسمبلي مي باشند.

يک پروژه وب سايت از نوع ASP.NET Ajax-Enabled Web Site ايجاد نماييد. اسمبلي  AjaxControlToolkit.dll را به Toolbox برنامه ويژوال استوديو اضافه نماييد.

اکنون کنترل هاي موجود در اين اسمبلي را در Toolbox مشاهده مي کنيد.

قبل از ايجاد اجزاي اصلي مثال، لطفا استايل هاي زير را به صفحه (در داخل تگ Head) اضافه نماييد.


<style type="text/css">
.ModalBackColor
{
 background-color:Gray;
 filter:alpha(opacity=70);
 opacity:0.7;
}
.modalPopup {
 background-color:#ffffdd;
 border-width:3px;
 border-style:solid;
 border-color:Gray;
 padding:3px;
 width:250px;
}
</style>

در اينجا دو عدد استايل تعريف شده است که در آينده از آن ها استفاده خواهيم کرد.

کدهاي جاوا اسکريپت زير را به صفحه اضافه کنيد.(در داخل تگ Head)


<script type="text/javascript">
var SelectedColorName;
function onOk()
{
    document.bgColor=SelectedColorName;
}
</script>

ملاحظه مي کنيد که در اين قسمت ما يک متغير عمومي جاوا اسکريپت به نام SelectedColorName تعريف کرده ايم  که وظيفه آن نگهداري نام رنگي است که کاربر در پنجره Popup انتخاب مي کند. وظيفه تابع onOk، اعمال رنگي که در متغير SelectedColorName  ذخيره شده است به پس زمينه صفحه مي باشد.

پنجره Popup که به کاربر نمايش داده مي شود درحقيقت يک کنترل Panel مي باشد که سفارشي سازي شده است.

اکنون نوبت به طراحي پنجره Popup يعني همان Panel مي باشد. يک Panel به صفحه اضافه کنيد و تغييرات زير را روي آن اعمال نماييد.


<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="display: none"
      Width="233px" Direction="RightToLeft">
  <p>آيا مايل هستيد :</p>
  <input id="RadioA" name="Radio" onclick="SelectedColorName = 'Yellow';" type="radio"  />
  <label for="RadioA" class="YellowColor" >رنگ پس زمينه زرد شود.</label><br />
  <input id="RadioB" name="Radio" onclick="SelectedColorName = 'Red';" type="radio" />
  <label class="RedColor" for="RadioB" > رنگ پس زمينه قرمز شود.</label><br />
               
  <br />
  <div align="center">
  <asp:Button ID="btnOk" runat="server" Text="OK" />
  <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
  </div>
</asp:Panel>

در قطعه کد بالا دو دکمه راديويي داريم که کاربر رنگ مورد نظر خود را از آنها انتخاب مي کند و دو دکمه داريم که کاربر به وسيله آنها مي تواند انصراف يا تاييد را انتخاب کند.

هنگامي که کاربر دکمه هاي راديويي را انتخاب مي نمايد، متغير SelectedColorName  مقدار دهي مي شود.

اکنون يک کنترل LinkButton به صفحه به شکل زير اضافه نماييد.


<asp:LinkButton ID="LinkButton1" runat="server">Click Here For Change Color</asp:LinkButton>

خوب همه چيز آماده است و اکنون نوبت اضافه کردن کنترل ModalPopupExtender  به صفحه مي باشد. با استفاده از Drag And Drop کنترل ModalPopupExtender  را به صفحه اضافه کنيد. سپس به نماي Markup برويد و کدها را به صورت زير تغيير دهيد.


<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
    TargetControlID="LinkButton1"
    PopupControlID="Panel1"
    BackgroundCssClass="ModalBackColor"
    DropShadow="true"
    OkControlID="btnOk"
    OnOkScript="onOk()"
    CancelControlID="btnCancel"
 />

کنترل ModalPopupExtender داراي صفات مختلفي مي باشد که در زير به معرفي تعدادي از آنها مي پردازم :

  • TargetControlID   : اين صفت ID کنترلي را نگهداري مي کند که وظيفه آن فعال کردن پنجره Popup مي باشد. در اين مثال ما از کنترل LinkButton1 براي فعال کردن اين پنجره استفاده مي کنيم. يعني وقتي شما روي اين دکمه کليک مي کنيد، پنجره Popup  نمايش داده مي شود.
  • PopupControlID : اين صفت ID کنترلي را نگهداري مي کند که قرار است به صورت Popup نمايش داده شود. در اين مثال ما از کنترل Panel1 براي انجام اين کار استفاده نموده ايم.
  • BackgroundCssClass : اين صفت نام يک  استايل را نگهداري مي کند. هنگامي که پنجره Popup در حال نمايش است اين استايل به صفحه اعمال مي شود. و پس از بسته شده پنجره ، از بين مي رود.
  • DropShadow : در صورتي که مقدار اين صفت true باشد، هنگام نمايش پنجره Popup ، يک سايه اطراف آن رسم مي شود.
  • OkControlID : اين صفت ID کنترلي را نگهداري مي کند که توسط آن ما متوجه مي شويم کاربر پيام نمايش داده شده  در پنجره Popup را تاييد نموده است. در اين مثال ما از دکمه btnOk داخل پنل استفاده نموده ايم.
  • OnOkScript : اين صفت نام يک تابع جاوا اسکريپت را نگهداري مي کند. در صورتي که کاربر پيام پنجره Popup را تاييد نمايد اين تابع فراخواني مي شود. در اينجا ما از تابع جاوا اسکريپتي که در ابتداي صفحه نوشتيم (onOk) استفاده کرديم.
  • CancelControlID : کاربرد اين صفت در حقيقت عکس صفت OkControlID مي باشد. اين صفت ID کنترلي را نگهداري مي کند که هنگام نمايش پنجره Popup ، توسط آن متوجه مي شويم کاربر گزينه انصراف را انتخاب نموده است که در اين مثال دکمه btnCancel مي باشد.
  • OnCancelScript : وظيفه اين صفت نيز عکس صفت  OnOkScript  مي باشد که ما در اين مثال از اين صفت استفاده نکرديم. در نتيجه وقتي کاربر دکمه btnCancel را کليک مي کند اتفاق خاصي نمي افتد و فقط پنجره Popup بسته مي شود.
  • X , Y : به طور پيشفرض پنجره Popup در وسط صفحه نمايش ديده مي شود. در صورتي که بخواهيم مکان آن را عوض کنيم بايد به اين دو صفت، مقدار مناسب را بدهيم . مقدار X ,Y مختصات گوشه بالا و سمت چپ پنجره Popup را نگهداري مي کنند.

اکنون صفحه آماده اجرا مي باشد. آن را اجرا نموده و تغييرات را مشاهده نماييد.

مثال دوم :

در مثال قبل تغييرات انتخاب شده توسط کاربر در پنجره Popup، بدون انجام عمل PostBack، به صفحه اعمال شدند.

گاهي اوقات ما احتياج داريم با توجه به انتخاب کاربر، صفحه را PostBack نماييم.  در  اين مثال اين کار را انجام خواهيم داد.

در اين مثال يک پنجره Popup به کاربر نشان مي دهيم که در صورت تاييد کاربر، صفحه را به سايت 30sharp.com انتقال مي دهيم.

يک صفحه جديد به برنامه اضافه نماييد و يک کنترل ScriptManager به آن اضافه کنيد.

کنترل هاي مثال قبل را به صفحه جديد اضافه کنيد و تغييرات زير را روي آنها اعمال نماييد.

ابتدا در رويدا Click مربوط به کنترل LinkButton قطعه کد زير را بنويسيد.


Response.Redirect("http://www.30sharp.com");

محتواي کنترل Panel1 را به صورت زير تغيير دهيد.


<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Direction="RightToLeft"
    Style="display: none" Width="233px">
    <p>
        آيا مايل هستيد به سايت 30sharp.com انتقال يابيد؟</p>
   
    <br />
    <div align="center">
        <asp:Button ID="btnOk" runat="server" Text="OK" />
        <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
    </div>
</asp:Panel>

تابع onOk را به صورت زير تغيير دهيد.


<script type="text/javascript">
 var SelectedColorName;
function onOk() {
__doPostBack('LinkButton1','');
}
</script>

نکته اصلي در همين جا مي باشد. اگر به تابع onOk توجه کنيد متوجه مي شويد که ما از تابع PostBack__ جهت ارسال صفحه به سمت سرور استفاده کرده ايم. پس از اينکه صفحه PostBack نمود به طور خود کار رويداد Click مربوط به LinkButton اجرا مي شود و صفحه به  سايت 30sharp.com انتقال مي يابد.

مثال هاي انجام شده در اين مقاله از لينک بالاي صفحه قابل دانلود مي باشند.