如何在我的ASP.NET Core MVC项目中引用Microsoft.JQuery.Unobtrusive.Ajax

Question

我正在尝试使用Microsoft.JQuery.Unobtrusive.Ajax。我首先使用NuGet安装软件包，然后按预期可以在依赖项中看到它。

我的问题是我找不到引用脚本的方法，因此无法在视图中使用它。在这里，我看到应该将其添加到布局中：

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

但是该路径导致没有文件：

这是我的控制器动作：

[HttpPost]
public IActionResult OrderItem([Bind("Id,Quantity")] Item item)
{
    return Json(new { foo= item.Id, boo= item.Quantity});
}

表格：

<form asp-action="OrderItem" asp-controller="Menu" method="POST" data-ajax="true" data-ajax-update="#divEmp" data-ajax-mode="replace" data-ajax-complete="onComplete" data-ajax-failure="onFailed" data-ajax-success="onSuccess">
    <input asp-for="@i.Id" value="@i.Id" type="hidden" name="Id" />
    <input asp-for="@i.Quantity" value="@i.Quantity" type="number" name="Quantity" class="form-group" />
    <button class="btn btn-primary" type="submit">Add to Order</button>
</form>

我从控制器返回了JSON，但是我被重定向到了显示JSON数据的页面。我的目标是使用JSON对象中的数据来更新同一视图中的组件。

Answer 1

Bower 已弃用，新项目应使用 Libman。但是，jquery-ajax-unobtrusive在cdnjs 中尚不可用。有一些要求添加它，所以请随意投票。同时，您可以使用unpkg. Libman 的 GUI 当前未显示它，因此您必须手动将其添加到 libman.json 文件中：

{
    "provider": "unpkg",
    "library": "jquery-ajax-unobtrusive@3.2.6",
    "destination": "wwwroot/lib/jquery-ajax-unobtrusive/",
    "files": [ "dist/jquery.unobtrusive-ajax.js", "dist/jquery.unobtrusive-ajax.min.js" ]
}

如果要获取库中的所有文件，请删除最后一行，但这两个 JavaScript 文件就足够了。

目前，微软 CDN上托管的最新版本是 3.2.5。如果您想要 3.2.6 版本，目前唯一托管它的 CDN 是jsdelivr.com：

<script
src="https://cdn.jsdelivr.net/npm/jquery-ajax-unobtrusive@3.2.6/dist/jquery.unobtrusive-ajax.min.js"
integrity="sha256-PAC000yuHt78nszJ2RO0OiDMu/uLzPLRlYTk8J3AO10="
crossorigin="anonymous"></script>

Answer 2

我发现在 .NET 生态系统中，Bower 填补了 NuGet 无法交付静态内容文件留下的空白。Sow 我需要使用 Bower 来安装需要从客户端访问的库。Bower 创建所需的静态内容。

就我而言，我的 asp.net 核心项目没有设置为使用 Bower，所以我必须向我的项目添加一个 Bower 配置文件。

参考检查这个