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

Question

我正在尝试使用Microsoft.JQuery.Unobtrusive.Ajax。我首先使用 NuGet 安装包，并且正如预期的那样，我可以在我的依赖项中看到它。

我的问题是我找不到引用脚本的方法，所以我可以在我的视图中使用它。 Here我看到我应该将这个添加到我的布局中：

<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 中尚不可用。有几个requests to add it，所以请随意投票。同时，您可以使用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 文件就足够了。

目前，Microsoft's 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 配置文件添加到我的项目中。

参考请查看this

Answer 3

jquery-ajax-unobtrusive 现在可以通过 cdnjs 获得。 请查看here 获取文档

对您的问题的简短回答是添加以下行以引用此库（这是针对当前版本的3.2.6）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.min.js"></script>

Answer 4

这是一个非常棒的关于 AJAX 表单的 YouTube 教程 YoutubeLink , 你可以从这个 GitHub 下载项目 Project Link。 它包含用于 AJAX 表单的脚本。

从上述项目复制的示例样式：

<form asp-controller="Home1" asp-action="SaveForm" 
      data-ajax="true" 
      data-ajax-method="POST"
      data-ajax-mode="replace" 
      data-ajax-update="#content"
      data-ajax-loading  ="#divloading"
      data-ajax-success="Success"
      data-ajax-failure ="Failure">
    <div class="form-group">
        <div>  <h4>@Html.Label("Name")</h4> </div>
        <div>  @Html.TextBox("Name","",htmlAttributes:new { @class="form-control",id="Name"})</div>
    </div>
    <div class="form-group">
        <div><h4>@Html.Label("Age")</h4></div>
        <div>@Html.TextBox("Age", "", htmlAttributes: new { @class = "form-control", id ="Age" })</div>
    </div>
    <br/>
    <input type="submit" name="Submit"  class="btn btn-block btn-success" />
</form>

Answer 5

Libman 将是 Microsoft 建议的解决方案，可通过右键单击项目并选择“管理客户端库”来使用。不幸的是，jquery-ajax-unobtrusive 似乎无法通过 Libman 获得，尽管它可以通过 Bower 获得。一个仍然合法的选择是通过 Bower 添加和使用它，或者如果像我一样，您似乎无法让 Bower 将内容保存到正确的文件夹中并且真的只需要 js 文件，只需将文件从 bower_components 复制/粘贴到lib 文件夹。