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
中为它创建两个新文件夹并将文件复制到那里:
接着你能在你想直接采用它的网页中引用它,或者作为CDN代销版本的后备:
自订特性
下表详细说明了控制
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
状态标识符,因为它们将无法透过允诺验证测试:
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未找到错误,其详细信息将显示在应用程序警报中:
部分更新
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
中:
假如您再次单击该链接,现有内容将被新积极响应替换。这是未指定
data-ajax-mode
时的默认行为。假如要插入新内容使其出那时现有内容之前,请将
data-ajax-mode
值设置为
before
Clickhere
那时,后续点击生成的积极响应出那时现有内容上方:
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秒: