如何在我的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

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

在我的情况下，我的asp.net核心项目没有设置为使用Bower所以我不得不在我的项目中添加Bower配置文件。

参考检查this

Answer 2

Here's a really nice YouTube tutorial on AJAX forms
<a href="https://www.youtube.com/watch?v=gtGeL5PrlWc">YoutubeLink</a>
, and you can download the project from this GitHub 
<a href="https://github.com/AmTute/VS2017AjaxFormExample">Project Link</a>.
 It contain the script to be used for AJAX Form.

    Sample style copied from the above project:

    <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 3

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

Answer 4

不推荐使用鲍尔，并且应将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 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>