如何在我的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对象中的数据来更新同一视图中的组件。

- LH7

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文件就足够了。

目前，托管在Microsoft 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>

- Racil Hilan

Answer 2

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

在我的情况下，我的asp.net core项目没有设置使用Bower，所以我必须向我的项目添加一个Bower配置文件。

有关参考，请查看此链接。

- LH7

---

Bower已被弃用，请使用libman：https://learn.microsoft.com/pt-br/aspnet/core/client-side/libman/libman-vs?view=aspnetcore-2.2 - Matheus Miranda

更多信息请参见：https://blogs.msdn.microsoft.com/webdev/2018/04/18/what-happened-to-bower/ - Matheus Miranda

正如 @MatheusMiranda 提到的那样，你应该使用 Libman 而不是 Bower。请查看下面的答案获取详细信息。 - Racil Hilan

https://learn.microsoft.com/en-us/aspnet/core/client-side/libman/libman-vs?view=aspnetcore-2.2 - ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

Answer 3

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

回答您的问题是，要引用此库（这是当前版本3.2.6），请添加以下行：

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

- Duck Ling

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>

- Amneu

---

这里你展示了如何创建一个使用ajax请求提交数据的表单，但这不是我要求的。在打开你提供的VS2017仓库后，我发现你在_layout.cshtml中创建了对unobtrusive ajax库的引用。我的问题在于，当我在包管理器控制台中运行Install-Package Microsoft.jQuery.Unobtrusive.Ajax -Version 3.2.4时，我可以看到Microsoft.Jquery.Unobtrusive.Ajax已安装在[project_name]\dependencies\NuGet\Microsoft.Jquery.Unobtrusive.Ajax下。这就是我想要使用的库，但我不知道如何引用它。 - LH7

Answer 5

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

- tnJed

---

你可以使用Libman获取它。它不会在GUI中显示，但是你可以手动将其添加到libman.json文件中。请参见我的下面的答案。 - Racil Hilan