همانطور که میدانید Asynchronous JavaScript and XML را به صورت اختصاری ، Ajax مینامیم. البته بخش XML آن در حال حاظر نقش آنچنان بسزایی نسبت به آنچه در قبل ایفا میکرده ندارد
چگونگی استفاده از Unobtrusive Ajax در MVC
همانطور که میدانید Asynchronous JavaScript and XML را به صورت اختصاری ، Ajax مینامیم. البته بخش XML آن در حال حاظر نقش آنچنان بسزایی نسبت به آنچه در قبل ایفا میکرده ندارد ، ولی قسمت Asynchronous آن همان چیزی است که Ajax را مفید و قابل توجه مینماید . این یعنی ارسال درخواست به سرور و دریافت جواب لازم بدون ایجاد یک Reload سنگین و قابل مشاهده در صفحه وب !.
در بستر MVC شما برای امور مرتبط با Ajax یک بستر بسیار قوی برای پشتیبانی و پیاده سازی unobtrusive Ajax وجود دارد. این یعنی شما از Helper متدها برای پیاده سازی ajax در View های خود میبایست استفاده کنید بدون اینکه نیاز باشد بلاکهای بزرگی از کد را به View خود اضافه کنید .
نکته : در MVC ، بستر Unobtrusive Ajax مبتنی بر JQuery میباشد . اگر با شیوه کارکرد JQuery به صورت کلی آشنایی داشته باشید ، در MVC هم میتوانید به صورت ساده تر از دانش خود استفاده کنید آنرا سریعتر یادبگیرید .
ایجاد یک فرم Synchronous
برای شروع باید یک View برای اکشن متد GetPeople که در Controller ساختیم ، ایجاد کنیم. مسیر و نام فایل به این صورت خواهد بود .
/Views/People/GetPeople.cshtml
محتوای View به شکل زیر خواهد بود .
یک توضیح کوتاه در مورد چگونگی دریافت Data درون Dropdownlist
در Dropdown که مشاهده میکنید ، به کلیه Role ها به همراه یک Item به نام All نیاز بوده است . درون متد هم اگر عبارت All انتخاب شود ، همه رکوردها بازگردانده خواهد شد . برای دریافت داده ، عبارت All به همراه یک Reflection ساده ولی زیبا به همدیگر Conact شده و درون Dropdown لیست میشوند .
Enum.GetNames(Typeof(Role))
شرح کلی این View همانطور که مشخص است به یک strongly typed view باز میگردد که Model Type آن IEnumerable<Person> میباشد . توسط Html.Beginform که مشاهده میکنید ، یک فرم جهت Postback شدن به Action وجود دارد . یک DropDown هم قرار داده شده تا بر اساس Role انتخاب شده در آن ، اطلاعات برای ما درون Table ایجاد شده ، لیست شود. یک Button هم داریم برای Submit کردن فرم . کل سناریو در آخر را میتوان اینگونه تشریح کرد : لیست اشخاص بر اساس Role آنها را میتوان با Submit کردن فرم توسط Button در اختیار داشت .برای مشاهده صفحه باید به ادرس /People/GetPeople پس از اجرای پروژه رفت .
اگر مقادیر درون Dropdown را چند بار با دقت عوض کنید و فرم را Submit کنید ، خواهید دید که با تغییر Role و انجام عملیات Submit ؛ همه صفحه مجددا باید به سمت سرور ارسال شده و دوباره تشکیل گردد. خوب در اینجا در حال تست یک پروژه کوچک هستیم . فرض کنید در یک صفحه سنگین وب ؛ بخواهیم به ازای یک تغییر ساده در Role انتخابی به عنوان مثال، همه صفحه را مجددا Reload کنیم . اولا کاربر باید برای هر تغییر ؛ تا Load مجدد صفحه صبر کند و در عین حال اگر تغییر دیگری در بخش دیگری از صفحه داده باشد ، آنرا از دست خواهد داد. در ضمن در حال تست، سرور و کلاینت بر روی یک دستگاه قرار دارند ، ولی حالتی را در نظر بگیرید که پروژه واقعی است و سرور حتی شاید در کشور دیگری است و باید هر درخواست دوباره به صورت کلی به سرور ارسال شود ، در این حالات و در دنیای امروز وب ، کاربر این وضع را زیاد تحمل نخواهد کرد و در ضمن این روند به نفع منابع سرور و پهنای باند و ... هم نخواهد بود .
این همه مقدمه چینی برای چیست ؟. برای آنکه به سراغ AJAX برویم و از مزایای آن بهره مند شویم .
چگونه پروژه را برای Unobtrusive Ajax آماه کنیم.
قابلیت Unobtrusive Ajax در دو بخش پروژه باید فعال شود .
1- درون WebConfig پروژه باید خاصیت "UnobtrusiveJavaScriptEnabled" دارای مقدار True باشد. یعنی باید فعال باشد. البته باید اشاره کرد که در پروژه های MVC ، این قابلت به صورت Default بر روی True مقدار دهی شده است ، ولی برای اطمینان ؛ آنرا باز هم کنترل کنید . فایل Web.config درون Root پروژه شما قرار دارد و به آسانی میتوانید آنرا پیدا کنید .
2- فایلهای کتابخانه JQuery باید به پروژه شما افزوده شود . این کار به سادگی توسط Nuget قابل انجام است . در تصویر زیر میتوانید چگونگی ایجاد تغییر در Layout کلی پروژه را برای داشتن این کتابخانه در کل پروژه مشاهده کنید .
اگر از Nuget استفاده کرده باشید ، خواهید دید که فایلهای JQuery لازم را درون فولدر Script پروژه شما اضافه کرده و پروژه آماده استفاده از قابلیتهای این مدل از AJAX میباشد.