استفاده از jQuery UI Dialog در ASP.NET

یکی از نیازهای مهم برنامه نویسان وب، مخصوصاً هنگام توسعه وب اپلیکیشن ها، استفاده از دیالوگ ها برای کاربردهای مختلف است. در حالی که در برنامه های ویندوزی استفاده از پنجره های دیالوگ امری رایج و ساده است، در محیط وب اینگونه نیست. در واقع در وب چیزی که به عنوان دیالوگ در ویندوز می شناسیم وجود ندارد، و باید با همین صفحات معمولی و مقداری کد جاوا اسکریپت یک پنجره دیالوگ را ایجاد کنیم. این مسئله در برخی مواقع واقعاً مشکل ساز می شود و دست برنامه نویس را می بندد.

خوشبختانه کتابخانه jQuery UI دارای یک کامپوننت Dialog مناسب برای استفاده در محیط وب است که با تمامی مرورگرهای مدرن سازگاری کامل دارد و به علت اینکه بر روی کتابخانه jQuery کار می کند در تمام پلت فرم های توسعه وب قابل استفاده است.

برای استفاده از این Dialog در یک صفحه ASP.NET باید کتابخانه های jQuery و jQuery UI را دانلود کنید و در صفحه مورد نظر خود به آن ها ارجاع اسکریپتی بدهید. در این مطلب یک مثال ساده در مورد استفاده از jQuery UI Dialog  را توضیح خواهیم داد. پروژه مثال این مطلب را از اینجا دریافت کنید. قصد ندارم تمام کدهای نوشته شده در این پروژه مثال را توضیح بدهم، فقط نکات مهم مربوط به موضوع بحث را خواهید خواند. خواندن سورس کد و مشاهده مثال بهتر از توضیحات متنی به شما کمک می کند.

پس از دانلود و اجرای پروژه، با یک صفحه ساده مواجه خواهید شد که یک دکمه با عنوان Set Values در آن وجود دارد. با کلیک کردن بر روی این دکمه یک دیالوگ jQuery شبیه به تصویر زیر خواهید داشت :

دکمه Cancel دیالوگ را می بندد و دکمه OK برچسب های روی صفحه را با مقادیر تکست باکس ها هماهنگ می کند. jQuery UI Dialog در حالت معمول بعد از تگ form در ASP.NET رندر می شود که این باعث می شود تا دکمه های موجود در دیالوگ هیچ Post Backی به صفحه نداشته باشند که البته این مشکل به راحتی حل می شود. برای اینکه دکمه های موجود در دیالوگ بدون رفرش شدن صفحه کار خود را انجام بدهند، محتویات دیالوگ را درون یک UpdatePanel قرار می دهیم. مهمترین کدهایی که در مورد آن ها بحث می کنیم، کدهای جاوا اسکریپت زیر هستند :

<script type="text/javascript">
 $(document).ready(function () {
 $('#divValues').dialog({
 autoOpen: false,
 draggable: true,
 maxHeight: 440,
 width: 400,
 modal: true,
 title: "Enter values",
 open: function (type, data) {
 $(this).parent().appendTo("form");
 }
 });
 });

 function openDialog(id) {
 $('#' + id).dialog("open");
 }

 function closeDialog(id) {
 $('#' + id).dialog("close");
 }

 </script>

در واقع این کدهای بالا هستند که دیالوگ jQuery را می سازند و آن را باز و بسته می کنند. علامت $ که در ابتدای کد بکار رفته نشان دهنده این است که در حال استفاده از توابع کتابخانه jQuery هستیم. تابع اول دیالوگ را با خصوصیات مشخص شده مقدار دهی می کند. لیست کامل این خصوصیات را می توانید اینجا مشاهده کنید و بر اساس نیاز خود تغییر دهید. بعد از اجرای برنامه، تا زمانی که تابع openDialog صدا زده نشود، دیالوگ ما هم نشان داده نخواهد شد و در واقع jQuery آن را از دید کاربر مخفی نگه خواهد داشت. محتویات یک دیالوگ باید در یک div قرار بگیرند که نام آن باید برای dialog مشخص شود. نکته ای که شما به عنوان یک برنامه نویس ASP.NET در این مورد باید بدانید این است که حتماً UpdatePanel دیالوگ را داخل این div قرار دهید تا کدهایتان به درستی کار کند.

ویژگی خوب کتابخانه jQuery UI سبک بودن و سازگار بودن با اکثر مرورگرهای مدرن امروزی است. برای تغییر ظاهر دیالوگ هم دست شما بسیار باز است و می توانید از تم های آماده jQuery UI استفاده کنید و یا حتی استایل خود را برای آن بسازید.

دریافت پروژه مثال