EF Code First #12
WebDAV استانداردی است بر روی پروتکل HTTP که Requestها و Responseهای مدیریت یک فایل را بر روی سرویس دهنده وب، تشریح میکند.
برای درک چرایی وجود این استاندارد بهتر است ذهن خود را معطوف به نحوهی عملکرد سیستم فایل در OS کنیم که شامل APIهای خاص برای دسترسی نرم افزارهای گوناگون به فایلهای روی یک سیستم است.
حال فکر کنید یک سرور Cloud راه اندازی نمودهاید که قرار است مدیریت فایلها و پروندههای Office را بر عهده داشته باشد و چون امکان ویرایش اسناد Office بر روی وب را ندارید، نیاز است تا اجازه دهید نرم افزارهای Office مستقیما فایلها را از روی سرور شما باز کنند و بعد از تغییرات، به جای ذخیره در سیستم local، محتوا را به فایل روی سرور ارسال کنند.
در مفهوم web عملا این کار غیر استاندارد و نادرست است. همه درخواستها و جوابها باید بر روی پروتکل Http باشند. خوب حال تصور کنید نرم افزارهای Office قابلیت آن را داشته باشند که به جای تحویل محتوا به سیستم عامل برای ذخیرهی آن بر روی سیستم local، محتوا را به یک آدرس ارسال نمایند و پشت آن آدرس، متدی باشد که بتواند به درخواست رسیده، به درستی پاسخ دهد.
این یعنی باید سمت سرور متدی با قابلیت ارسال پاسخهای درست و در سمت کلاینت نرم افزاری با قابلیت ارسال درخواستهای مناسب وجود داشته باشد.
WebDAV استاندارد تشریح محتوای درخواستها و پاسخهای مربوط به مدیریت فایلها است.
خوشبختانه نرم افزارهای Office و بسیاری از نرم افزارهای دیگر، استاندارد WebDAV را پشتیبانی میکنند و فقط لازم است برای سرورتان متدی با قابلیت پشتیبانی از درخواستهای WebDAV پیاده سازی نمایید و البته متاسفانه کتابخانههای سورس باز چندانی برای WebDAV در سرور دات نت وجود ندارد. من ماژولی را برای کار با WebDAV نوشتم و سورسش را در Git قرار دادم. برای این مثال هم از همین کتابخانه استفاده میکنم.
ابتدا یک پروژهی وب MVC ایجاد نمایید و پکیج xDav را از nugget نصب کنید.
PM> Install-Package xDav
اگر به web.config نگاهی بیاندازیم میبینیم یک module به نام xDav به وب سرور اضافه شده که بررسی درخواستهای WebDAV را به عهده دارد.
<system.webServer> <modules> <add name="XDav" type="XDav.XDavModule, XDav" /> </modules> </system.webServer>
همچنین یک Section جدید هم به config برای پیکربندی xDav اضافه شده است.
<XDavConfig Name="xdav"> <FileLocation URL="xdav" PathType="Local"></FileLocation> </XDavConfig>
خاصیت Name برای xDav نشانگر درخواستهایی است که باید توسط این ماژول اجرا شوند. در اینجا یعنی درخواستهایی که آدرس آنها شامل "/xdav/" باشد، توسط این ماژول Handle میشوند. عبارت بعد از مقدار Name در URL هم طبیعتا نام فایل مورد نظر شماست.
FileLocation آدرس پوشه ای است که فایلها در آن ذخیره و یا بازخوانی میشوند. اگر FileType با مقدار Local تنظیم شود، یعنی باید یک پوشه به نام خاصیت URL که در اینجا xdav است در پوشهی اصلی وب شما وجود داشته باشد و اگر با Server مقدار دهی شود URL باید یک آدرس فیزیکی بر روی سرور داشته باشد . مثل "c:\webdav"URL=
ما در این مثال مقادیر را به صورت پیشفرض نگه میداریم. یعنی باید در پوشهی وب، یک Folder با نام xdav ایجاد کنیم.
در ادامه چند فایل word را برای تست در این پوشه کپی میکنم.
می خواهیم در صفحه Index، لیستی از فایلهای درون این پوشه را نمایش دهیم طوری که در صورت کلیک بر روی هر کدام از آنها، آدرس WebDav فایل مورد نظر را به Word ارسال کنیم.
بعد از نصب Office، در registry چند نوع Url تعریف میشود که معرف اپلیکیشنی است که آدرس به آن فرستاده شود. این دقیقا همان چیزیست که ما به آن نیاز داریم. کافیست آدرس WebDav فایل را بعد از عبارت " ms-word:ofe|u| " در یک لینک قرار دهیم تا آدرس به نرم افزار Word ارسال شود. یعنی آدرس URL باید این شکلی باشد:
ms-word:ofe|u|http://Webaddress/xdav/filename
Webaddress آدرس وبسایت و filename نام فایل مورد نظرمان است. عبارت /xdav/ هم که نشان میدهد درخواست هایی که این آدرس را دارند باید توسط ماژول xDav پردازش شوند.
کلاسی با نام DavFile در پوشهی Model ایجاد میکنم:
public class DavFile { public string Name { get; set; } public string Href(string webAddress) { return string.Format("ms-word:ofe|u|http://{0}/xdav/{1}", webAddress, Name); } }
اکشن متد Index را در Home Controller، مانند زیر تغییر دهید:
var dir = new DirectoryInfo(XDav.Config.ConfigManager.DavPath); var model = dir.GetFiles().ToList() .Select(f => new DavFile() { Name = f.Name }); return View(model);
یک لیست از فایل هایی که در پوشهی webDav قرار دارند تهیه میکنیم و به View ارسال میکنیم. View را هم مثل زیر بازنویسی میکنیم.
@model IEnumerable<WebDavServer.Models.DavFile> <h1> File List </h1> <ul> @foreach (var item in Model) { <li> <a href="@Html.Raw(item.Href(ViewContext.HttpContext.Request.Url.Authority))"> @Html.Raw(item.Name) </a></li> } </ul>
قرار است به ازای هر فایل، لینکی نمایش داده شود که با کلیک بر روی آن، آدرس فایل به word ارسال میشود. بعد از ثبت تغییرات، word محتوا را به همان آدرس ارسال میکند و ماژول xDav محتوا را در فایل فیزیکی سرور ذخیره خواهد کرد.
برنامه را اجرا کنید و بر روی فایلها کلیک نمایید. اگر نرم افزار Office روی کامپیوترتان باز باشد با کلیک بر روی هر کدام از فایلها، فایل word باز شده و میتوایند محتوا را تغییر داده و ذخیره نمایید.
نرم افزار کلاینت (word) درخواست هایی با verbهای مشخص که در استاندارد WebDav ذکر شده به آدرس مورد نظر میفرستد. سرور WebDav درخواست را بر اساس Verb آن Request پردازش کرده و Response استاندارد را ایجاد میکند.
نرم افزار word پس از دریافت یک URL، به جای فرمت فیزیکی فایل، درخواست هایی را با تایپهای Option, Head, lock, get, post و unlock ارسال میکند. محتوای درخواست و پاسخ هر کدام از تایپها در استاندارد webDav تعریف شده و ماژول xDav آن را پیاده سازی نموده است.
خالق جیکوئری (John Resig)، این کتابخانه را در سالهای 2006 زمانیکه Internet Explorer نگارشهای 6 و 7 بیش از 60 درصد بازار مرورگرها را به خود اختصاص داده بودند، ارائه داد. بله؛ در آْن زمان JavaScript Web API بسیار خام، پایداری مرورگرها بسیار پایین و تطابق با استانداردهای وب در بین مرورگرهای مختلف نیز بسیار پایین بود. بنابراین علت محبوبیت کتابخانهای که در این شرایط، تجربهی کاری یکدستی را در بین مرورگرهای مختلف ارائه میداد، کاملا واضح بود. اما ... اکنون سال 2018 است و حتی مایکروسافت هم دیگر از نگارشهای مختلف IE پشتیبانی نمیکند. DOM API موجود در مرورگرهای مدرن بسیار توانمند شدهاند و در بین انواع و اقسام آنها یکدست عمل میکنند. حتی اگر دلیل استفادهی از jQuery ایجاد سادهتر حلقهها بر روی اشیاء جاوا اسکریپتی باشد (رفع کمبودهای جاوا اسکریپت)، از زمان IE 9 به بعد، متدهای forEach و Object.keys به صورت توکار در جاوا اسکریپت وجود دارند و یا اگر نیاز به inArray.$ داشته باشید، متد Array.prototype.indexOf مدتها است که جزئی از ES5 است. به همین جهت است که این روزها اخباری را مانند «GitHub نیز جیکوئری را کنار گذاشت» زیاد میشنوید. نه فقط کنار گذاشتن jQuery یک وابستگی ثالث را از برنامه حذف میکند، بلکه کار مستقیم با native API مرورگرها همواره به مراتب سریعتر است از کتابخانههایی که سطح بالایی از abstraction آنها را ارائه میدهند.
یافتن عناصر توسط JavaScript خالص
زمانیکه نیاز به انتخاب عناصری در صفحه باشند، بلافاصله ذهن ما به سمت ('myElement#')$ و ('myElement.')$ جیکوئری، معطوف میشود. اما ... این روزها برای انجام این نوع کارها واقعا نیازی به jQuery نیست!
یافتن عناصر بر اساس ID آنها
<div id="my-element-id"></div>
var result = $('#my-element-id');
انجام این کار توسط web API و یا همان JavaScript خالص، چنین شکلی را دارد:
var result = document.getElementById('my-element-id');
روش دیگر انجام اینکار با JavaScript به صورت زیر است:
var result = document.querySelector('#my-element-id');
در هر دو حالت، خروجی مقایسهی ذیل، true است:
result.id === 'my-element-id'; // returns true
یافتن عناصر بر اساس کلاسهای CSS
<span class="some-class"></span>
var result = $('.some-class');
var result = document.getElementsByClassName('some-class');
var result = document.querySelectorAll('.some-class');
result[0].className === 'some-class'; // returns true
یافتن عناصر بر اساس تگهای عناصر
<code>Console.WriteLine("Hello world!");</code>
var result = $('code');
var result = document.getElementsByTagName('code');
var result = document.querySelectorAll('code');
result[0].tagName === 'code'; // returns true
یافتن عناصر بر اساس کلاس نماها (Pseudo-classes)
Pseudo-classes از زمان ابتداییترین پیشنویس استاندارد CSS وجود داشتهاند. برای مثال visited: یک Pseudo-classes است و به لینکهای بازدید شدهی توسط کاربر اشاره میکند و یا focus: به المانی اشاره میکند که هم اکنون دارای focus است.
<form> <label>Full Name <input name="full-name"> </label> <label>Company <input name="company"> </label> </form>
var focusedInputs = $('INPUT:focus');
var companyInput = document.querySelector('INPUT:focus');
یافتن عناصر بر اساس ارتباط والد و فرزندی آنها
<div> <a href="https://www.dntips.ir"> <span>Go to site</span> </a> <p>Some text</p> Some other text </div>
روش یافتن والد anchor tag در جیکوئری توسط متد parent؛ با فرض اینکه a$ به شیء anchor اشاره میکند:
var $result = $a.parent();
var result = a.parentNode;
یافتن فرزندان:
در جیکوئری:
var result = $('#myParent').children();
var result = document.querySelectorAll('DIV > *');
var result = document.querySelectorAll('DIV > P');
var result = document.getElementById('myParent').childNodes; var result = div.childNodes;
var result =document.getElementById('myParent').children;
var result =document.querySelectorAll('#myParent A');
جستجوی عناصر با صرفنظر کردن از بعضی از آنها
<ul role="menu"> <li>choice 1</li> <li class="active">choice 2</li> <li>choice 3</li> </ul>
var $result = $('UL LI').not('.active');
var result = document.querySelectorAll('UL LI:not(.active)');
انتخاب چندین المان با هم
<div id="link-container"> <a href="https://github.com/VahidN">GitHub</a> </div> <ol> <li>one</li> <li>two</li> </ol> <span class="my-name">VahidN</span>
var $result = $('#link-container, .my-name, OL');
var result = document.querySelectorAll('#link-container, .my-name, OL');
یافتن گروهی از المانها بر اساس نوع آنها:
var result = document.querySelectorAll( 'BUTTON[type="submit"], INPUT[type="submit"]' );
جایگزین کردن $ جیکوئری با جاوا اسکریپت
تا اینجا حتما به شباهت کدهای خالص جاوا اسکریپت و jQuery دقت کردهاید. اگر بخواهیم برای $ جیکوئری، یک معادل جاوا اسکریپتی تهیه کنیم، به قطعه کد زیر خواهیم رسید:
window.$ = function(selector) { return document.querySelectorAll(selector); };
$('.some-class'); $('#some-id'); $('.some-parent > .some-child'); $('UL LI:not(.active)');
به ساختار سلسله مراتبی زیر توجه بفرمایید:
گره هایی که با رنگ سبز علامت گذاری شده اند را گرههای برگ مینامیم چون که آن گرهها بدون زیر شاخه هستند.
فرض کنید از ما خواسته شده است با داشتن گره A تمام برگهای این شاخه را بدست بیاوریم.
دو مرحله را باید طی کنیم ابتدا تمام گره هایی که زیر شاخه گره A هستند را باید بدست آورد سپس توسط یک گزاره گرههای برگ را فیلتر کنیم.
در واقع گره هایی برگ هستند که پدر هیچ گرهی دیگری نباشند.
declare @t table (id char(1) primary key, parent char(1)); insert @t values ('A',null), --Level 1 ('B', 'A'), ('C', 'A'), --Level 2 ('D', 'B'), ('E', 'B'),('R','B'), ('F', 'C'), --Level 3 ('G', 'D'), --Level 4 ('H', 'G'), ('I', 'G'); --Level 5
;with cte as ( select id, rnk=0 from @t where parent = 'A' union all select t.id, rnk+1 from cte join @t t on cte.id = t.parent ) select * from cte where not exists (select * from @t where parent = cte.id);
و حالا به درخت زیر توجه بفرمایید:
هدف پیدا کردن برگ هایی از شاخه مورد نظر است که در پایینترین سطح قرار گرفته باشند. برای این منظور از همان query بازگشتی استفاده کرده و با کمک تابع dense_ranke گرههای مورد نظر را بدست میاوریم.
;with cte as ( select id, rnk=0 from @t where parent = 'A' union all select t.id, rnk+1 from cte join @t t on cte.id = t.parent ) select * from ( select *, dense_rank() over(order by rnk desc) rk from cte )t where rk = 1
برای استفاده از قابلیتهای Ajax کتابخانه jQuery ، شش متد زیر در اختیار برنامه نویسها است:
$.ajax(), load(), $.get(), $.getJSON(), $.getScript(), and $.post()
برای مثال کد زیر زمان جاری را از سرور دریافت کرده و نتیجه را در سه تکست باکس قرار داده شده در صفحه نمایش میدهد.
ابتدا وب سرویس ساده زیر را در نظر بگیرید که زمان شمسی جاری را بر میگرداند:
using System;
using System.Globalization;
using System.Web.Script.Services;
using System.Web.Services;
namespace TestJQueryAjax
{
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[ScriptService]
public class AjaxSrv : WebService
{
public class TimeInfo
{
public string Date { set; get; }
public string Hr { set; get; }
public string Min { set; get; }
}
[WebMethod(EnableSession = true)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public TimeInfo GetTime()
{
DateTime now = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day);
PersianCalendar pc = new PersianCalendar();
string today = string.Format("{0}/{1}/{2}",
pc.GetYear(now),
pc.GetMonth(now).ToString("00"),
pc.GetDayOfMonth(now).ToString("00"));
TimeInfo ti = new TimeInfo
{
Date = today,
Hr = DateTime.Now.Hour.ToString("00"),
Min = DateTime.Now.Minute.ToString("00")
};
return ti;
}
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestFillCtrls.aspx.cs"
Inherits="TestJQueryAjax.TestFillCtrls" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function validate() {
$.ajax({
type: "POST",
url: 'AjaxSrv.asmx/GetTime',
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success:
function(msg) {
$("#<%=txtDate.ClientID %>").val(msg.d.Date);
$("#<%=txtHr.ClientID %>").val(msg.d.Hr);
$("#<%=txtMin.ClientID %>").val(msg.d.Min);
},
error:
function(XMLHttpRequest, textStatus, errorThrown) {
alert("خطایی رخ داده است");
}
});
//debugger;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtDate" runat="server" />
<br />
<asp:TextBox ID="txtHr" runat="server" />
<br />
<asp:TextBox ID="txtMin" runat="server" />
<br />
<asp:Button ID="btnGetTime" runat="server" Text="Click here!" UseSubmitBehavior="false"
OnClientClick="validate();return false;" />
</div>
</form>
</body>
</html>
{"d":{"__type":"TestJQueryAjax.AjaxSrv+TimeInfo","Date":"1388/07/14","Hr":"12","Min":"59"}}
باید به خاطر داشت که برای هر 6 متد Ajax ایی jQuery ، عملیات کش شدن اطلاعات در مرورگر کاربر به صورت پیش فرض فعال است. اما این نکته تنها زمانیکه dataType مورد استفاده از نوع script یا jsonp باشد، صادق نبوده و کش شدن به صورت خودکار غیرفعال میگردد.
روش سنتی غیرفعال کردن کش در حین عملیات اجکسی، استفاده از یک کوئری استرینگ متغیر در پایان url درخواستی است. به این صورت مرورگر درخواست صادره را جدید فرض کرده و از کش خود استفاده نمینماید (همین مورد در حالت کش شدن تصاویر هم صادق است).
jQuery نیز همین عملیات را در پشت صحنه انجام داده اما تنظیم آنرا به نحوی مطلوبتری ارائه میدهد. یا پارامتر cache را در تعریف متد ajax خود اضافه نموده و مقدار آن را مساوی false قرار دهید و یا جهت تاثیر گذاری بر روی کلیه متدهای مورد استفاده، پیش از استفاده از آنها این تنظیم را مشخص سازید:
$.ajaxSetup({cache: false});
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" } }
[ { "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 } ]
<!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>
استفاده از معادلهای واقعی 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) { }
return Json(new { param1 = 1, param2 = 2, ... });
مثالهایی از افزودن ویژگیهای 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; } } }
@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> }
این 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"; } } }
و یا 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(); }