在ASP.NET Core Razor页面中使用JQuery Unobtrusive Ajax

2023-01-13 0 359

jQueryUnobtrusiveAJAX库早已存有了整整10年,因此在ASP.NETMVC3.0中首度导入,彼时HTML5自订

data-*

特性的选用显得习以为常并在应用程序中获得普遍认可。它是两个小型库,增大后多于4kb,它借助了jQuery的AJAX机能。它那时是ASP.NETCore的一小部分,代销在GitHub上。

UnobtrusiveAJAX与其它非入侵式库那样,透过检查和选取的HTML原素与否存有某一的自订

data-

特性,接着在空格键那些原素时将jQuery的AJAX表达式附带到那些原素。从其本质上讲,它节约了许多(假如并非全数不然)样板工程标识符,不然您将不得已撰写那些标识符来促发AJAX允诺并处置积极响应。

您能从

npm

npmijquery-ajax-unobtrusive

UnobtrusiveAJAX

,或者您能采用VisualStudio提供的多种方法之一从Nuget安装它。一旦你有了它,你能在

wwwroot/lib

中为它创建两个新文件夹并将文件复制到那里:

在ASP.NET Core Razor页面中使用JQuery Unobtrusive Ajax

接着你能在你想直接采用它的网页中引用它,或者作为CDN代销版本的后备:

在ASP.NET Core Razor页面中使用JQuery Unobtrusive Ajax

自订特性

下表详细说明了控制

jQueryUnobtrusiveAJAX

行为的自订特性:

特性

描述

data-ajax

必须设置为true才能在目标原素上激活UnobtrusiveAjax。

data-ajax-confirm

data-ajax-method

data-ajax-mode

插入目标DOM原素的模式。默认为替换.有效值为

before

after

replace

.默认为

replace

data-ajax-loading-duration

示或隐藏加载原素时的动画持续时间。

data-ajax-loading

data-ajax-begin

Script表达式的名称。

data-ajax-complete

data-ajax-failure

的JavaScript表达式。

data-ajax-success

data-ajax-update

的ID。

data-ajax-url

以下示例显示了两个表单,该表单具有转换为AJAX提交所需的最少特性:

@page@modelIndexModelName:

没有指定

action

,因此表单值将发布到网页的URL,它们能在

OnPost

处置程序中处置。请注意,表单的方法特性被指定为

post

,以及自订的

data-ajax-method

特性。在没有应用

action

特性的情况下,这是确保生成允诺验证令牌隐藏字段并将其包含在表单中所必需的。假如没有这个,表单帖子将导致

400BadRequest

状态标识符,因为它们将无法透过允诺验证测试:

在ASP.NET Core Razor页面中使用JQuery Unobtrusive Ajax

data-ajax-confirm

特性选用两个字符串,表示在提交表单之前向用户显示确认提示中的消息:

Name:

回调表达式

当采用jQuery发出AJAX允诺时,将返回两个

jqXHR

对象。这可用于您透过

data-ajax-complete

data-ajax-success

data-ajax-failure

特性指定的回调表达式。

下两个示例显示如何透过回调表达式的参数访问

jqXHR

对象:

@page@modelIndexModelName:

@sectionscripts{}

PageModel

包含两个绑定特性,表示提交的名称并将其作为积极响应返回:

publicclassIndexModel:PageModel{[BindProperty]publicstringName{get;set;}publicIActionResultOnPost(){returnContent(Name);}}

当AJAXpost完成时(成功或失败),完成的表达式将以

jqXHR

对象作为参数调用。积极响应正文在

responseText

特性中可用。

下两个示例显示如何采用

data-ajax-failure

特性捕获错误:

@page@modelIndexModelName:

@sectionscripts{}

在这种情况下,该提交结果会导致404未找到错误,其详细信息将显示在应用程序警报中:

在ASP.NET Core Razor页面中使用JQuery Unobtrusive Ajax

部分更新

data-ajax-update

特性用于指定应随积极响应更新的DOM原素。传递给它的值是两个标准的CSS选择器。假如多个原素匹配选择器,第两个匹配的原素将被更新。

在此示例中,特性附带到锚原素。点击将被jQuery拦截并异步管理:

@page@modelIndexModelClickhere

URL是IndexPageModel中的命名处置程序方法:

publicclassIndexModel:PageModel{publicIActionResultOnGetPartial(){returnnewPartialViewResult{ViewName=”_HelloWorldPartial”,ViewData=this.ViewData};}}

_HelloWorldPartial.cshtml的内容多于一行:

@ViewData[“Message”][email protected]

当链接被点击时,内容被放置在id为

panel

div

中:

在ASP.NET Core Razor页面中使用JQuery Unobtrusive Ajax

假如您再次单击该链接,现有内容将被新积极响应替换。这是未指定

data-ajax-mode

时的默认行为。假如要插入新内容使其出那时现有内容之前,请将

data-ajax-mode

值设置为

before

Clickhere

那时,后续点击生成的积极响应出那时现有内容上方:

在ASP.NET Core Razor页面中使用JQuery Unobtrusive Ajax

data-ajax-mode

特性设置为

after

将导致积极响应结果追加到任何现有内容后面。

显示正在加载的GIF

有时,出于人性化让用户知道当正在发生某些事情异步操作需要一段时间才能完成时,会显示进度指示。这通常选用动画gif图像或动画字体的形式。

data-ajax-loading

特性指定在进行AJAX操作时应显示的原素。

data-ajax-loading-duration

特性选用以毫秒为单位的值。这用于确定使加载原素可见接着隐藏它需要多长时间。加载原素在可见时向下滑动并向右滑动。假如未指定值,则默认值为

400

在此示例中,来自

FontAwesome字体集合

的转动效果用于显示进度。它的显示特性最初设置为无。jQuery将在发送允诺之前删除该设置,接着在完成后重新应用它(无论与否成功)。

Clickhere

为了模拟长时间运行的操作,处置程序方法被更改为包括对

Thread.Sleep

的调用:

publicIActionResultOnGetPartial(){Thread.Sleep(2000);returnnewPartialViewResult{ViewName=”_HelloWorldPartial”,ViewData=this.ViewData};}

这确保动画至少可见2秒:

在ASP.NET Core Razor页面中使用JQuery Unobtrusive Ajax

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务