ورود / ثبت نام
0
0

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

322 بازدید
ModalPopup

ModalPopup

در این مقاله نشان می دهیم که چگونه در یک اپلیکیشن ASP.Net از ابزار کنترلی Ajax MoalPopup استفاده کنیم.زمانی که یک اپلیکیشن ASP.Net می نویسیم، یکی از جنبه های مهم که کد زدن برای آن سخت است جلوگیری از کلیک کردن کاربر روی کنترل های صفحه در زمان تأیید یک درخواست است. راه های زیادی برای این کار وجود دارد، رایج ترین راه آن استفاده از توابع جاوا اسکریپت برای غیرفعال کردن عناصر کنترلی بعد از انجام یک رویداد می باشد. اما استفاده از Ajax  و  Control Toolkit و ModalPopup ساده تر است. این ابزار به ما این امکان را می دهد که extender ها و control هایی ایجاد کنیم که سرورهای کنترلی را که داریم بهبود ببخشیم.

این ابزار را می توانید از ajax-toolkit دانلود نمایید. اطلاعات نصب آن نیز در http://www.asp.net/ajax آمده است.

ویژوال استودیو را باز کرده و File > New > Web > ASP.NET Web Application را انتخاب می کنیم. به دلیل اینکه ModalPopup از CSS استفاده می کند، فولدر ASP.Net Theme را نیز اضافه می کنیم. روی نام پروژه راست کلیک کرده و Add > Add ASP.Net Folder > Theme را انتخاب می کنیم. نام Theme را ‘Modal’ می گذاریم. در فولدر Theme یک فایل CSS اضافه می کنیم. به این ترتیب Solution Explorer شما باید به شکل زیر باشد:

ModalPopup

فایل Style.css را باز کرده و کد زیر را به آن اضافه می کنیم.

.modalBackground
{
      background-color: Yellow;
      filter: alpha(opacity=60);
      opacity: 0.6;
}
 
.modalPopup
{
      background-color:#ffffdd;
      border-width:3px;
      border-style:solid;
      border-color:Gray;
      padding:5px;
      width: 350px;
      height:300px;
}

کلاس های بالا برای استایل کنترل ModalPopup استفاده می شود. برای اینکه تم در پروژه قابل دسترسی باشد، باید web.config را به روزرسانی کنیم:

<pages theme="Modal">

این خط به وب سایت دستور می دهد که از این تم برای وب سایت استفاده نماید. این یک راه ساده برای مدیریت استایل ها در وب سایت می باشد.

قدم بعدی اضافه کردن رفرنس به Microsoft Ajax Control Toolkit می باشد. برای این کار روی Toolbox راست کلیک می کنیم و Choose Items را انتخاب می کنیم. پنجره زیر ظاهر می شود:

ModalPopup

مسیری را که می خواهید Microsoft Ajax Control Toolkit را می خواهیم نصب کنیم انتخاب کرده و Ok می کنیم. به این ترتیب Ajax control Toolkit به Toolbox اضافه خواهد شد.

صفحه Default.aspx را باز کرده و کد زیر را در آن می نویسیم:

<asp:ScriptManager ID="ScriptManager1" runat="server" />
    Are you sure you want to know the answer?.
    <asp:Button ID="btnYes" runat="server" Text="Yes!" />
    <br />
    <asp:Panel ID="pnlModal" runat="server" CssClass="modalPopup">
ام اس پی سافت آنچه یک برنامه نویس نیاز دارد
        <br />
        <asp:Button ID="btnClose" runat="server" Text="Close" />
    </asp:Panel>

برای اینکه هر یک از کنترل های toolkit کار کند، صفحه ما باید شامل یک ScriptManager باشد. SriptManager اسکریپت های کلاینت را برای صفحه ASP.Net Ajax مدیریت می کند. به حالت design رفته و با بردن ماوس روی پنل، می بینیم که یک تگ هوشمند ظاهر می شود. روی آن کلیک کرده و Add Extender را انتخاب می کنیم:

ModalPopup

یک پنجره جدید با لیستی از extender هایی که در toolkit در دسترس است باز می شود. ModalPopup Extender را انتخاب می کنیم:

ModalPopup

به این ترتیب کد زیر به کنترل پنل اضافه می شود:

<asp:ModalPopupExtender TargetControlID="btnYes" ID="pnlModal_ModalPopupExtender"
        runat="server" DynamicServicePath="" Enabled="True"BackgroundCssClass="modalBackground"
        PopupControlID="pnlModal" CancelControlID="btnClose" DropShadow="true">
    </asp:ModalPopupExtender>

Propertyهایی که باید تنظیم شوند، به صورت زیر می باشند:

  • PopupControlID – شناسه کنترلی که قرار است به عنوان modal popup نمایش داده شود.
  • TargetControlID – شناسه کنترلی که modal popup را فعال می کند.
  • CancelControlID – شناسه کنترلی که modal popup را کنسل می کند.
  • BackgroundCssClass – کلاس CSS ای زمان نمایش modal popup به پس زمینه اعمال می شود.

کد ما تقریبا کامل شد. آخرین چیزی که نیاز دارید این است که مطمئن شوید این کنترل پنل که به عنوان modal popup استفاده کردید تا زمانی که کاربر روی دکمه yes کلیک نکرده، مخفی باقی می ماند. کنترل پنل را با کد زیر آپدیت کنید:

<asp:Panel ID="pnlModal" runat="server" CssClass="modalPopup" Style="display: none;">

حالا برنامه را اجرا می کنیم، زمانی که روی دکمه کلیک کنیم، یک modal popup ظاهر می شود، کنترل ها را در پس زمینه نمایش می دهد.

ModalPopup

Modal popup بهترین روش برای جلوگیری کردن از کلیک کاربران بر روی کنترل هاست، زمانی که نمی خواهید این اتفاق بیفتد.

  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=17909
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
فاطمه زکایی
فاطمه زکایی هستم. فارغ التحصیل کارشناسی مهندسی نرم افزار، مدت سه سال هست که در زمینه توسعه اپلیکیشن های تحت وب و اندروید و همچنین تولید محتوای تخصصی برنامه نویسی تحت وب و اندروید در مجموعه mspsoft در خدمت شما هستم.
مطالب بیشتر
برچسب ها:

نظرات

0 نظر در مورد استفاده از ASP.Net Ajax ModalPopup در ASP.Net

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هیچ دیدگاهی نوشته نشده است.