article
شنبه 30 شهریور 1392, 16:15 عصر
در مثال اول ما يک پنجره پيغام 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 را نگهداري مي کنند.