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

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

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

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

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

jQuery UI Dialog Exampleدکمه 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 استفاده کنید و یا حتی استایل خود را برای آن بسازید.

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

اهمیت jQuery برای برنامه نویسان ASP.NET

شاید تا به حال برنامه نویسان ASP.NET به لطف کنترل های WebForms و ASP.NET AJAX نیازی به یادگیری جاوا اسکریپت احساس نکرده باشند، اما پس از ارائه ASP.NET MVC و افزایش محبوبیت jQuery در جامعه دات نت، دیگر هر برنامه نویسی برای گذران زندگی از این طریق باید به جاوا اسکریپت و به طور خاص با کتابخانه معروف jQuery آشنایی داشته باشد. در حال حاضر کمتر وب سایت و پروژه تحت وب معروفی در جامعه دات نت پیدا خواهید کرد که از jQuery استفاده نکند.

jQuery چیست و چه فرقی با Java Script دارد؟

JQuery - a new kind on java script libraryjQuery یک فریم ورک سریع و سبک به زبان جاوا اسکریپت است که از CSS3 و اکثر مرورگرهای حال حاضر به صورت کامل پشتیبانی می کند و بسیاری از کارها را که با جاوا اسکریپت به سختی و با نوشتن کدهای فراوان باید انجام داد را به راحتی و با نوشتن کد کمتر می توان انجام داد. جاوا اسکریپت یک زبان اسکریپت نویسی سمت کلاینت است و jQuery یکی از فریم ورک های محبوب برای این زبان است.

jQuery چه ربطی به برنامه نویسان ASP.NET دارد؟

مایکروسافت در حال حاضر به صورت رسمی از jQuery پشتیبانی می کند و پروژه های ASP.NET MVC که در ویژوال استادیو 2010 می سازید، به صورت پیش فرض از jQuery استفاده می کنند. این پشتیبانی رسمی دلیل بسیار محکمی است برای ما برنامه نویسان تکنولوژی های مایکروسافت که به یادگیری jQuery بپردازیم. اما دلایل مهم دیگری نیز وجود دارد. یادگیری و استفاده از jQuery نسبت به کارهایی که برای شما انجام می دهد، آسان است. با تمام مرورگرهای محبوب حال حاضر مثل IE, Firefox, Chrome, Opera, Safari سازگاری کامل دارد. شما کدهای خود را یکبار می نویسید و دیگر نگران نوع مرورگر کاربر برای اجرای این کدها نخواهید بود. با استفاده از jQuery می توانید به راحتی تمام عناصر صفحه را پس از رندر شدن تغییر دهید. انجام اعمال AJAX با استفاده از این فریم ورک امکان پذیر است و معمولاً کارایی بهتری نسبت به ASP.NET AJAX دارد.

از کجا شروع کنیم؟

هرچند jQuery به صورت پیش فرض در پروژه های ویژوال استادیو 2010 پیدا می شود اما شما می توانید آخرین نسخه jQuery را از سایت رسمی اش دانلود کنید. در همین سایت، برای شروع می توانید مستندات jQuery را بخوانید. Rick Strahl در اینجا مطلب آموزشی مناسبی در مورد استفاده از jQuery در ASP.NET نوشته که برای شروع مطلب خوبی است. در کدپلس هم می توانید پروژه های زیادی پیدا کنید که استفاده از jQuery در ASP.NET را آسان تر کرده اند. اگر در سایت های دانلود eBook به دنبال کتاب jQuery for ASP.NET Developers بگردید، کتاب خوبی است برای شروع.

[Code to look] سه شنبه 20 آمرداد 88

Code to lookهای قبلی

ASP.NET, MVC, jQuery

ASP.NET MVC یا ASP.NET کلاسیک! کدام را انتخاب کنیم؟ مقاله

استفاده از تصاویر CAPTCHA در صفحات ASP.NET دانلود کنید

آپلود تصاویر در وب و مدیریت آن ها مقاله

استفاده از ASP.NET، WCF و jQuery برای ساخت ویدجت (Widget) دانلود کنید

شروع کار با jQuery یک مقاله خوب برای شروع یادگیری jQuery

ساخت قالب Tab ساده با jQuery مقاله

WPF و سیلورلایت

به خاطر سپاری موقعیت پنجره WPF مقاله

کلاس Application در یک برنامه WPF مقاله

ساخت Splash Screen با پیغام Loading در WPF

ساخت یک Launchpad زیبا با استفاده از WPF دانلود کنید

ساخت اپلیکیشن های ماژولار سیلورلایت دانلود کنید

سی شارپ

فرستادن و خواندن SMS از طریق GSM Modem با استفاده از دستورات AT و بدون استفاده از کتابخانه اضافی دانلود کنید

توضیح امکانات جدید سی شارپ 4.0 با مثال مقاله

برنامه زمان بندی وظایف یا Task Scheduler دانلود کنید

farasun.wordpress.com

مشترک فید فراسان شوید! نمی دانید فید چیست!؟