پیاده سازی Unobtrusive Ajax را در ASP.NET MVC 5.x، میتوانید در مطلب «
ASP.NET MVC #21» مطالعه کنید. HTML Helpers مرتبط با Ajax، به طور کامل از ASP.NET Core 1.0 حذف شده‌اند. اما این مورد به این معنا نیست که نمی‌توان Unobtrusive Ajax را در ASP.NET Core که تمرکزش بیشتر بر روی
Tag Helpers جدید هست تا HTML Helpers قدیمی، پیاده سازی کرد.
Unobtrusive Ajax چیست؟
در حالت معمولی، با استفاده از متد ajax جی‌کوئری، کار ارسال غیرهمزمان اطلاعات، به سمت سرور صورت می‌گیرد. چون در این روش کدهای جی‌کوئری داخل صفحات برنامه‌های ما قرار میگیرند، به این روش، «روش چسبنده» می‌گویند. اما با استفاده از افزونه‌ی «
jquery.unobtrusive-ajax.min.js» مایکروسافت، می‌توان این کدهای چسبنده را تبدیل به کدهای غیرچسنبده یا Unobtrusive کرد. در این حالت، پارامترهای متد ajax، به صورت ویژگی‌ها (attributes) به شکل data-ajax به المان‌های مختلف صفحه اضافه می‌شوند و به این ترتیب، افزونه‌ی یاد شده به صورت خودکار با یافتن مقادیر ویژگی‌های data-ajax، این المان‌ها را تبدیل به المان‌های ای‌جکسی میکند. در این حالت به کدهایی تمیزتر و عاری از متدهای چسبنده‌ی ajax قرار گرفته‌ی در داخل صفحات وب خواهیم رسید.
روش طراحی Unobtrusive را در کتابخانه‌های معروفی مانند بوت استرپ هم می‌توان مشاهده کرد.
پیشنیازهای فعال سازی Unobtrusive Ajax در ASP.NET Core 1.0
توزیع افزونه‌ی «jquery.unobtrusive-ajax.min.js» مایکروسافت، از طریق bower صورت می‌گیرد که پیشتر در مطلب «
ارتقاء به ASP.NET Core 1.0 - قسمت 14 - فعال سازی اعتبارسنجی ورودی‌های کاربران» با آن آشنا شدیم. در اینجا نیز برای دریافت آن، تنها کافی است فایل bower.json را به نحو ذیل تکمیل کرد:
{
"name": "asp.net",
"private": true,
"dependencies": {
"bootstrap": "3.3.6",
"jquery": "2.2.0",
"jquery-validation": "1.14.0",
"jquery-validation-unobtrusive": "3.2.6",
"jquery-ajax-unobtrusive": "3.2.4"
}
}
و پس از آن فایل bundleconfig.json مطلب «
ارتقاء به ASP.NET Core 1.0 - قسمت 21 - بررسی تغییرات Bundling و Minification» یک چنین شکلی را پیدا میکند:
[
{
"outputFileName": "wwwroot/css/site.min.css",
"inputFiles": [
"bower_components/bootstrap/dist/css/bootstrap.min.css",
"content/site.css"
]
},
{
"outputFileName": "wwwroot/js/site.min.js",
"inputFiles": [
"bower_components/jquery/dist/jquery.min.js",
"bower_components/jquery-validation/dist/jquery.validate.min.js",
"bower_components/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js",
"bower_components/jquery-ajax-unobtrusive/jquery.unobtrusive-ajax.min.js",
"bower_components/bootstrap/dist/js/bootstrap.min.js"
],
"minify": {
"enabled": true,
"renameLocals": true
},
"sourceMap": false
}
]
در اینجا فایلهای css و اسکریپت مورد نیاز برنامه، به ترتیب اضافه شده و یکی خواهند شد. خروجی نهایی آنها به شکل زیر در صفحات وب مورد استفاده قرار میگیرند:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
<link href="~/css/site.min.css" rel="stylesheet" />
</head>
<body>
<div>
<div>
@RenderBody()
</div>
</div>
<script src="~/js/site.min.js" type="text/javascript" asp-append-version="true"></script>
@RenderSection("Scripts", required: false)
</body>
</html>
در اینجا تنها دو فایل نهایی این عملیات، یعنی css/site.min.css و js/site.min.js به صفحه الحاق شده‌اند که حاوی تمام پیشنیازهای اسکریپتی و شیوه‌نامه‌های برنامه هستند و در این حالت دیگر نیاز به افزودن آنها به دیگر صفحات سایت نیست.
استفاده از معادل‌های واقعی Unobtrusive Ajax در ASP.NET Core 1.0
واقعیت این است که HTML Helper ای‌جکسی حذف شده‌ی از ASP.NET Core 1.0، کاری بجز افزودن ویژگی‌های data-ajax را که توسط افزونه‌ی jquery.unobtrusive-ajax.min.js پردازش می‌شوند، انجام نمی‌دهد و این افزونه مستقل است از مباحث سمت سرور و به نگارش خاصی از ASP.NET گره نخورده است. بنابراین در اینجا تنها کاری را که باید انجام داد، استفاده از همان ویژگی‌های اصلی است که این افزونه قادر به شناسایی آنها است.
خلاصه‌ی آنها را جهت انتقال کدهای قدیمی و یا تهیه‌ی کدهای جدید، در جدول ذیل میتوانید مشاهده کنید:
| HTML attribute | AjaxOptions |
| data-ajax-confirm | Confirm |
| data-ajax-method | HttpMethod |
| data-ajax-mode | InsertionMode |
| data-ajax-loading-duration | LoadingElementDuration |
| data-ajax-loading | LoadingElementId |
| data-ajax-begin | OnBegin |
| data-ajax-complete | OnComplete |
| data-ajax-failure | OnFailure |
| data-ajax-success | OnSuccess |
| data-ajax-update | UpdateTargetId |
| data-ajax-url | Url |
در ASP.NET Core 1.0، به علت حذف متدهای کمکی Ajax دیگر خبری از AjaxOptions نیست. اما اگر علاقمند به انتقال کدهای قدیمی به ASP.NET Core 1.0 هستید، معادل‌های اصلی این پارامترها را میتوانید در ستون HTML attribute مشاهده کنید.
چند نکته:
- اگر قصد استفاده‌ی از این ویژگی‌ها را دارید، باید ویژگی "data-ajax="true را نیز حتما قید کنید تا سیستم Unobtrusive Ajax فعال شود.
- ویژگی data-ajax-mode تنها با ذکر data-ajax-update (و یا همان UpdateTargetId پیشین) معنا پیدا میکند.
- ویژگی data-ajax-loading-duration نیاز به ذکر data-ajax-loading (و یا همان LoadingElementId پیشین) را دارد.
- ویژگی data-ajax-mode مقادیر before، after و replace-with را می‌پذیرد. اگر قید نشود، کل المان با data دریافتی جایگزین میشود.
- سه callback قابل تعریف data-ajax-complete، data-ajax-failure و data-ajax-success، یک چنین پارامترهایی را از سمت سرور در اختیار کلاینت قرار می‌دهند:
parameters
| Callback |
| xhr, status | data-ajax-complete |
| data, status, xhr | data-ajax-success |
| xhr, status, error | data-ajax-failure |
برای مثال می‌توان ویژگی data-ajax-success را به نحو ذیل در سمت کلاینت مقدار دهی کرد:
data-ajax-success = "myJsMethod"
این متد جاوا اسکریپتی یک چنین امضایی را دارد:
function myJsMethod(data, status, xhr) {
}
در این حالت در سمت سرور، پارامتر data در یک اکشن متد، به صورت ذیل مقدار دهی میشود:
return Json(new { param1 = 1, param2 = 2, ... });
و در سمت کلاینت در متد myJsMethod این پارامترها را به صورت data.param1 می‌توان دریافت کرد.
مثال‌هایی از افزودن ویژگی‌های data-ajax به المان‌های مختلف
در حالت استفاده از Form Tag Helpers که در مطلب «
ارتقاء به ASP.NET Core 1.0 - قسمت 12 - معرفی Tag Helpers» بررسی شدند، یک فرم ای‌جکسی، چنین تعاریفی را پیدا خواهد کرد:
با این ViewModel فرضی
using System.ComponentModel.DataAnnotations;
namespace Core1RtmEmptyTest.ViewModels.Account
{
public class RegisterViewModel
{
[Required]
[EmailAddress]
[Display(Name = "Email")]
public string Email { get; set; }
}
}
که در View متناظر Ajax ایی ذیل استفاده شده‌است:
@using Core1RtmEmptyTest.ViewModels.Account
@model RegisterViewModel
@{
}
<form method="post"
asp-controller="TestAjax"
asp-action="Index"
asp-route-returnurl="@ViewBag.ReturnUrl"
class="form-horizontal"
role="form"
data-ajax="true"
data-ajax-loading="#Progress"
data-ajax-success="myJsMethod">
<input asp-for="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger"></span>
<button type="submit">ارسال</button>
<div id="Progress" style="display: none">
<img src="images/loading.gif" alt="loading..." />
</div>
</form>
@section scripts{
<script type="text/javascript">
function myJsMethod(data, status, xhr) {
alert(data.param1);
}
</script>
}
در اینجا تمام تعاریف مانند قبل است؛ تنها سه ویژگی data-ajax جهت فعال سازی jquery-ajax-unobtrusive به فرم اضافه شده‌اند. همچنین یک callback دریافت پیام موفقیت آمیز بودن عملیات Ajax ایی نیز تعریف شده‌است.
این View از کنترلر ذیل استفاده میکند:
using Core1RtmEmptyTest.ViewModels.Account;
using Microsoft.AspNetCore.Mvc;
namespace Core1RtmEmptyTest.Controllers
{
public class TestAjaxController : Controller
{
public IActionResult Index()
{
return View();
}
[HttpPost]
public IActionResult Index([FromForm]RegisterViewModel vm)
{
var ajax = isAjax();
if (ajax)
{
// it's an ajax post
}
if (ModelState.IsValid)
{
//todo: save data
return Json(new { param1 = 1, param2 = 2 });
}
return View();
}
private bool isAjax()
{
return Request?.Headers != null && Request.Headers["X-Requested-With"] == "XMLHttpRequest";
}
}
}
به ASP.NET Core 1.0، متد کمکی IsAjax اضافه نشده‌است؛ اما تعریف آن‌را در این کنترلر مشاهده میکنید. در مورد قید FromForm در ادامه توضیح داده خواهد شد (هرچند در این مورد خاص، حالت پیش فرض است و الزامی به قید آن نیست).
و یا Action Link ای‌جکسی نیز به صورت خلاصه به این نحو قابل تعریف است:
<div id="EmployeeInfo">
<a
asp-controller="MyController" asp-action="MyAction"
data-ajax="true"
data-ajax-loading="#Progress"
data-ajax-method="POST"
data-ajax-mode="replace"
data-ajax-update="#EmployeeInfo">
Get Employee-1 info
</a>
<div id="Progress" style="display: none">
<img src="images/loading.gif" alt="loading..." />
</div>
</div>
نکته‌ای در مورد اکشن متدهای ای‌جکسی در ASP.NET Core 1.0
همانطور که در مطلب «
ارتقاء به ASP.NET Core 1.0 - قسمت 18 - کار با ASP.NET Web API»، قسمت «تغییرات Model binding پیش فرض، برای پشتیبانی از ASP.NET MVC و ASP.NET Web API» نیز ذکر شد:
public IActionResult Index([FromBody] MyViewModel vm)
{
return View();
}
ذکر ویژگی FromBody در اینجا الزامی است. از این جهت که اطلاعات با فرمت JSON، از قسمت body درخواست استخراج و به MyViewModel بایند خواهند شد (در حالت dataType: json). و اگر dataType : application/x-www-form-urlencoded; charset=utf-8 بود (مانند حالت پیش فرض Unobtrusive Ajax)، باید از ویژگی FromForm استفاده شود. در غیر اینصورت در سمت سرور نال دریافت خواهیم کرد.
