JQuery Unobtrusive Ajax in MVC 6

[alireza_rashvand]

سلام

قبلا در قسمتی از پروژه از Ajax.BeginForm استفاده کردم ولی متوجه شدم در mvc6 کار با ajax فرق كرده.

کلا کار با ajax در mvc6 به چه صورتی هست؟!

جستجو کردم به JQuery Unobtrusive Ajax برخورد کردم

از دوستان کسی هست که کار کرده باشه؟!

[hakim22]

کدهای جاوا اسکریپت هیچ ارتباطی با MVC نداره.

به طور کلی Html Helper ها جای خودشون رو به Tag Helper ها دادن. ممکنه بعضی از Helper هایی که در MVC5 بود در نسخه ی جدید یا همون ASP Core اضافه نشده باشه. البته این بیشتر بر میگرده به اینکه این نسخه هنوز تکمیل نشده .

پیاده سازی Tag Helper در ASP Core به ساده هست و آموزشهای زیادی درباره ی آن وجود دارد.

در مورد Ajax بهتر است از نسخه ی خام آن استفاده کنید و کار را با jQuery انجام دهید.

اسکریپت jQuery Unobtrusive ajax فقط یک پیاده سازی Unobtrusive از نسخه ی اصلی مربوط به jQuery است. منظور از Unobtrusive بودن این است که برای استفاده از آن نیاز به تنظیم کردن نیست و فقط باید اسکریپت را در صفحه ی Html لود کنید. خود اسکریپت فرمها را پیاده میکند و به متد Submit آن می چسبد و منتظر ارسال درخواست پست می میماند و پاسخ دریافتی را مدیریت میکند و ...

[alireza_rashvand]

سپاس از پاسخی که دادید.


کدهای جاوا اسکریپت هیچ ارتباطی با MVC نداره.
البته بنده حرفی از یکی بودن این دو مفهوم نزدم.

عرض بنده هم همینه که در ورژن جدید نمي شه مثل قبل از Ajax.BeginForm استفاده کرد,
تا جایی که من جستجو کردم متوجه شدم برای این کار یکی از راه ها اینکه jQuery Unobtrusive Ajax (https://www.nuget.org/packages/Microsoft.jQuery.Unobtrusive.Ajax/3.2.3)

رو نصب کرد تا در تگ هلپر ها ajax هم اضافه بشه.
برای نمونه این اموزش (http://stackoverflow.com/questions/35202804/submitting-a-razor-form-using-jquery-ajax-in-mvc6-using-the-built-in-functionali?answertab=votes#tab-top)

اما وقتی jQuery Unobtrusive Ajax (https://www.nuget.org/packages/Microsoft.jQuery.Unobtrusive.Ajax/3.2.3)

رو نصب کردم بازهم در tag helper , صفت data-ajax اضافه نشد.

[ali_kolahdoozan]

خوب نظرت در مورد ساخت یک Tag Helper چیست ؟




[TargetElement("form", Attributes = AjaxForm)]
public class UnobtrusiveFormTagHelper : TagHelper
{
private const string AjaxForm = "asp-ajax";


[HtmlAttributeName("asp-onsuccess")]
public string AspOnSuccess { get; set; }


[HtmlAttributeName(AjaxForm)]
public bool AspAjax { get; set; }


public override void Process(TagHelperContext context, TagHelperOutput output)
{
base.Process(context, output);


output.Attributes.Add("data-ajax", true);
output.Attributes.Add("data-onsuccess", AspOnSuccess);
}
}






<form asp-ajax="true" asp-onsuccess

[alireza_rashvand]

یکی از روش ها روشی هست که شما گفتید ولی مشکل داره
[TargetElement("form", Attributes = AjaxForm)]

Attributes و TargetElement رو نمی شناسه!

[alireza_rashvand]

راحل رو وپیدا کردم.

برای اینکه jQuery Unobtrusive Ajax (https://www.nuget.org/packages/Microsoft.jQuery.Unobtrusive.Ajax/3.2.3) بعد از نصب اعمال بشه project.json رو باید ویرایش کرد یعنی متن زیر رو بهش اضافه کرد:


"name": "jquery-ajax-unobtrusive",
"description": "Add-on to jQuery Ajax to enable unobtrusive options in data-* attributes",
"main": "jquery.unobtrusive-ajax.js",
"repository": {
"type": "git",
"url": "https://github.com/aspnet/jquery-ajax-unobtrusive"
},
"keywords": [
"unobtrusive",
"ajax",
"mvc",
"asp.net",
"jquery"
],
"author": "Microsoft",
"license": "https://www.microsoft.com/web/webpi/eula/net_library_eula_enu.htm",
"bugs": {
"url": "https://github.com/aspnet/jquery-ajax-unobtrusive/issues"
},
"homepage": "https://github.com/aspnet/jquery-ajax-unobtrusive",
"devDependencies": {
"gulp": "3.8.11",
"gulp-rename": "1.2.2",
"gulp-uglify": "1.2.0"
}


این رو اضافه کردم درست شد.

[ali_kolahdoozan]

به چی اضافه کردید ؟

[alireza_rashvand]

project.json روز باز کنید مطالب بالا رو به انتهاش اضافه کنید.

[ali_kolahdoozan]

میدانم ، بعدش با چی ادامه دادید ؟. Custom Tag Helper که خوب JS ها رو میخاس

[alireza_rashvand]

بعد از اینکه ان خط ها رو اضافه کردم الان در تگ هلپر صفت ajax در دسترس هست.

مثلا الان میشه همچین کدی رو نوشت.


<form asp-controller="Home" asp-action="SaveForm"
data-ajax="true"
data-ajax-method="POST"
data-ajax-mode="replace"
data-ajax-update="#content">
...
</form>
<div id="content"></div>




حالا كافيه jquery.unobtrusive-ajax.js (https://github.com/aspnet/jquery-ajax-unobtrusive)رو به صفحه اضافه کنید

<script src="~/lib/jquery-ajax-unobtrusive-master/jquery.unobtrusive-ajax.js"></script>