如何在我的 ASP.NET 核心 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

这是关于 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 2

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

在我的例子中，我的 asp.net 核心项目没有设置为使用 Bower，所以我不得不向我的项目添加一个 Bower 配置文件。

参考资料检查 this

Answer 3

Libman 是 Microsoft 推荐的解决方案，可以通过右键单击项目并选择 "Manage Client Side Libraries" 来使用。不幸的是，jquery-ajax-unobtrusive 似乎无法通过 Libman 获得，尽管它可以通过 Bower 获得。一个仍然合法的选择是通过 Bower 添加和使用它，或者如果像我一样你似乎无法让 Bower 将东西保存到正确的文件夹并且实际上只需要 js 文件，只需 copy/paste 来自的文件bower_components 进入 lib 文件夹。

Answer 4

Bower 已弃用，新项目应使用 Libman。但是，jquery-ajax-unobtrusive 在 cdnjs yet. There are a few 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 is 3.2.5. If you wanted the 3.2.6 version, the only CDN that hosts it at the moment is 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 5

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>

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

How to reference Microsoft.JQuery.Unobtrusive.Ajax within my ASP.NET Core MVC project

.net

c#

unobtrusive-ajax

visual-studio-2017

asp.net-core-mvc-2.0