ASP.NET Core中的jQuery Unobtrusive Ajax帮助器

最近在ASP.NET Core下写文章管理系统时，准备在分页显示文章内容时，使用Ajax。网上找了篇帖文，简单翻一下，仅供自己查阅。

本贴讲述了如何在ASP.NET Core中获取jQuery Unobtrusive Ajax帮助器。AjaxHelper类为用AJAX渲染HTML视图提供支持。如果你想将现有的ASP.NET MVC项目迁移到ASP.NET Core MVC，却没有现成的标记帮助器可供替换，取而代之的是ASP.NET Core团队建议使用data-*属性。所有现存的@Ajax.Form属性都可用于data-*属性。

要使用它，你首先需要引用jquery和jquery.unobtrusive-ajax脚本，可以通过bower下载并安装它。

这是通过bower安装该脚本库的命令:

bower install Microsoft.jQuery.Unobtrusive.Ajax

一旦你安装了该脚本，你就可以在_layout.cshtml文件引用它：

<script src="~/lib/Microsoft.jQuery.Unobtrusive.Ajax/jquery.unobtrusive-ajax.min.js"></script>

以下是可用于迁移@Ajax.Form帮助器的属性：

AjaxOptions	HTML attribute
Confirm	data-ajax-confirm
HttpMethod	data-ajax-method
InsertionMode	data-ajax-mode
LoadingElementDuration	data-ajax-loading-duration
LoadingElementId	data-ajax-loading
OnBegin	data-ajax-begin
OnComplete	data-ajax-complete
OnFailure	data-ajax-failure
OnSuccess	data-ajax-success
UpdateTargetId	data-ajax-update
Url	data-ajax-url

你像这样在表单（Form）元素中添加这些属性:

<form asp-controller="Home" asp-action="SaveForm" data-ajax="true" data-ajax-method="POST">
</form>

下列代码，将在提交表单时显示进度指示器，一旦完成（onComplete）、成功(onSuccess)或失败(Failed)，它将显示警告消息。

var results = $("#Results");
var onBegin = function(){
    results.html("<img src=\"/images/ajax-loader.gif\" alt=\"Loading\" />");
};

var onComplete = function(){
    results.html("");
};

var onSuccess = function(context){
    alert(context);
};

var onFailed = function(context){
    alert("Failed");
};

这是HTML表单：

<form asp-controller="Home" asp-action="SaveForm"
    data-ajax-begin="onBegin" data-ajax-complete="onComplete"
    data-ajax-failure="onFailed" data-ajax-success="onSuccess"
    data-ajax="true" data-ajax-method="POST">
    <input type="submit" value="Save" class="btn btn-primary" />
    <div id="Results"></div>
</form>

---

ASP.Net Core中使用jquery-ajax-unobtrusive替换Ajax.BeginForm

在大潮流下，大家都在研究MVVM框架，但是做面向搜索引擎的外网项目还是得用服务器渲染。

在.Net中肯定就是用Razor模板引擎了。

.Net Core断臂式重构后，很多在老得Mvc中使用得好好的一些功能，突然就不见了。

在这里鄙视一下微软，说好的无缝切换呢。。我看这个缝还是有点大。

ASP.Net Core中，使用TagHelper替换HtmlHelper。使得写出的Razor代码可读性更高，同时VS的提示能力更强了。

但是也丢掉了很多以前觉得很好用的东西，比如今天要说的Ajax.BeginForm，在ASP.Net Core中突然就不见了，搜索GitHub的Issue，发现官方不打算支持Ajax.BeginForm了。后续也无开发计划，那个issue直接被关闭了。

虽然没了Ajax.BeginForm。但是在墙外搜索到另一种TagHelper的实现。

直接在form上使用data-*去做异步表单，使用方式和Ajax.BeginForm半斤八两

https://github.com/aspnet/jquery-ajax-unobtrusive

去GitHub下载这个项目，然后点击build.cmd，脚本自动构建一个dilst，里面就是js文件

然后引用到项目中。就可以愉快的编写异步表单辣

<form asp-controller="Home" asp-action="Test" data-ajax="true" data-ajax-method="post" data-ajax-begin="begin" data-ajax-success="success">
    <label asp-for="UserName"></label>:
    <input asp-for="UserName" />
    <span asp-validation-for="UserName"></span>
    <br />
    <label asp-for="PassWord"></label>:
    <input asp-for="PassWord" />
    <span asp-validation-for="PassWord"></span>
    <button type="submit">Ok</button>
</form>
  <script>
        var begin = function () {
            console.log("begin");
        }
        var success = function (context) {
            console.log(context)

        }
    </script>

这里提供了N多个data-ajax-*的taghelper，

AjaxOptions	HTML attribute
Confirm	data-ajax-confirm
HttpMethod	data-ajax-method
InsertionMode	data-ajax-mode
LoadingElementDuration	data-ajax-loading-duration
LoadingElementId	data-ajax-loading
OnBegin	data-ajax-begin
OnComplete	data-ajax-complete
OnFailure	data-ajax-failure
OnSuccess	data-ajax-success
UpdateTargetId	data-ajax-update
Url	data-ajax-url

---

jquery.unobtrusive-ajax.js

Ajax Option对应

Ajax Option	HTML attribute	Describe
Confirm	data-ajax-confirm	设置一个确定取消弹出框的文字，没有则不设置
HttpMethod	data-ajax-method	提交方式
InsertionMode	data-ajax-mode*	更新的形式 BEFORE插入到对象之前 AFTER插入到对象之后 为空就是覆盖
LoadingElementDuration	data-ajax-loading-duration**	持续时间 默认是0
LoadingElementId	data-ajax-loading	显示loading的对象
OnBegin	data-ajax-begin	ajax前触发的函数或者一段程序
OnComplete	data-ajax-complete	完成后，此时还没有加载返回的数据，请求成功或失败时均调用
OnFailure	data-ajax-failure	失败
OnSuccess	data-ajax-success	成功，加载完成的数据
Url	data-ajax-update	更新的对象
Url	data-ajax-url	提交url
	data-ajax=true	开启绑定jquery.unobtrusive

1. Ajax Option展示

@using (Ajax.BeginForm("AjaxUploadImage", "Home", new AjaxOptions
        {
            Confirm = "1111",
            HttpMethod = "POST",
            InsertionMode = InsertionMode.Replace,
            LoadingElementDuration = 1000,
            LoadingElementId = "222",
            OnBegin = "Begin",
            OnComplete = "Completed",
            OnFailure = "OnFailured",
            OnSuccess = "OnSuccessd",
            UpdateTargetId = "updata",
            Url = "",
        }, new { @id = "frm", enctype = "multipart/form-data" }))
        {
            <input id="IconUrl" name="IconUrl" />
            <input type="file" id="files" name="files" value="点击选择图片" />
        }

2. HTML attribute展示

<form action="/Home/AjaxUploadImage?Length=4" data-ajax="true" data-ajax-begin="Begin" data-ajax-complete="Completed" data-ajax-confirm="1111" data-ajax-failure="OnFailured" data-ajax-loading="#222" data-ajax-loading-duration="1000" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-success="OnSuccessd" data-ajax-update="#updata" enctype="multipart/form-data" id="frm" method="post">
            <input id="IconUrl" name="IconUrl" />
            <input type="file" id="files" name="files" value="点击选择图片" />
</form>

---

jquery.unobtrusive-ajax.js单独的用法

（插件本身已经减少了人力，如果开始无脑开发，简直就是无能，@Ajax里面哪里帮助类生成的其实就是jquery.unobtrusive的一些特性）

jquery.unobtrusive是MVC中出现的jquery插件，用与和MVC中Ajax交互，但是我不怎么喜欢在构建页面的时候用@Ajax.XXX去构建，感觉太依赖了，jquery.unobtrusive应该是所有web后端语言都能用的东西。所以就有了自己的单独使用jquery.unobtrusive的旅程，研究jquery.unobtrusive的用法和源码（之前已经有过阅读源码的文章和一定的注释，地址：http://www.cnblogs.com/RainbowInTheSky/p/4466993.html）。

用法data-ajax="true"是开启jquery.unobtrusive。

$(element.getAttribute("data-ajax-update"))

源码中有这样一段，说明data-ajax-update的值就是选择器得到的，可以直接#id，.class。（data-ajax-update//更新的对象）

经常与data-ajax-mode配合使用

data-ajax-mode//更新的形式 BEFORE插入到对象之前 AFTER插入到对象之后 为空就是覆盖

函数调用

data-ajax-begin
data-ajax-complete
data-ajax-success
data-ajax-failure

上面的四个属性对应$.ajax中的beforeSend，complete，success，error，他们的参数可以是程序片段，也可以是一个function，但是在写参数的时候不能是functiong(){}这样的匿名函数。基本涵盖了ajax，满足了需求。

不过在使用

data-ajax-loading//显示loading的对象

data-ajax-loading-duration//持续时间 默认是0

这两个属性的时候需要扩展一下，因为jquery.unobtrusive没有对齐做UI的实现，需要自己扩展。data-ajax-loading就是需要显示的对象，data-ajax-loading-duration是持续时间，他们使用的是jquery.show(),和jquery.hide()这两个函数。为此我写了一个遮罩的扩展

 //创建简单遮罩层，显示load时的信息，配合Unobtrusive
 ; (function ($) {
         //设置背景层高
         function height() {
             var scrollHeight, offsetHeight;
             // handle IE 6
             if ($.browser.msie && $.browser.version < 7) {
                 scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
                 offsetHeight = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight);
                 if (scrollHeight < offsetHeight) {
                     return $(window).height();
                 } else {
                     return scrollHeight;
                 }
                 // handle "good" browsers
             }
             else if ($.browser.msie && $.browser.version == 8) {
                 return $(document).height() - 4;
             }
             else {
                 return $(document).height();
             }
         };
         //设置背景层宽
         function width() {
             var scrollWidth, offsetWidth;
             // handle IE
             if ($.browser.msie) {
                 scrollWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
                 offsetWidth = Math.max(document.documentElement.offsetWidth, document.body.offsetWidth);
                 if (scrollWidth < offsetWidth) {
                     return $(window).width();
                 } else {
                     return scrollWidth;
                 }
                 // handle "good" browsers
             }
             else {
                 return $(document).width();
             }
         };
         /*==========全部遮罩=========*/
         function createLayer(load) {
             //背景遮罩层
             var layer = $("<div id=" + load.attr("data-loadlayer-id") + "></div>");
             layer.css({
                 zIndex: 9998,
                 position: "absolute",
                 height: height() + "px",
                 width: width() + "px",
                 background: "black",
                 top: 0,
                 left: 0,
                 filter: "alpha(opacity=30)",
                 opacity: 0.3
             });
 
             //图片及文字层
             var content = $("<div id=" + load.attr("data-loadlayer-id") + "-content" + "></div>");
             content.css({
                 textAlign: "left",
                 position: "absolute",
                 zIndex: 9999,
                 //height: opt.height + "px",
                 //width: opt.width + "px",
                 top: "50%",
                 left: "50%",
                 verticalAlign: "middle",
                 //background: opt.backgroudColor,"#ECECEC"
                 background: "#ECECEC",
                 borderRadius: "3px",
                 padding:"2px 5px 2px 5px",
                 fontSize: "13px"
             });
 
             //content.append("<img style='vertical-align:middle;margin:" + (opt.height / 4) + "px; 0 0 5px;margin-right:5px;' src='" + opt.backgroundImage + "' /><span style='text-align:center; vertical-align:middle;'>" + opt.text + "</span>");
             content.append("<span style='text-align:center; vertical-align:middle;color:#000000'>" + load.attr("data-loadlayer-msg") + "</span>");
             load.append(layer.append(content));
             var top = content.css("top").replace('px', '');
             var left = content.css("left").replace('px', '');
             content.css("top", (parseFloat(top) - parseFloat(content.css("height")) / 2)).css("left", (parseFloat(left) - parseFloat(content.css("width")) / 2));
 
             layer.hide();
             return this;
         }
 
         $(document).ready(function () {
             createLayer($("div[data-loadlayer=true]"))
         });
 })(jQuery)

使用方法

<div data-loadlayer="true" data-loadlayer-id="load" data-loadlayer-msg="loading..."></div>

然后需要在调用的地方data-ajax-loading="#load"即可