13

我正在尝试使用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 对象中的数据来更新同一视图中的组件。

4

5 回答 5

6

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>
于 2019-06-16T13:56:11.687 回答
5

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

在我的例子中，我的 asp.net 核心项目没有设置为使用 Bower，所以我必须将 Bower 配置文件添加到我的项目中。

对于参考检查这个

于 2018-03-14T04:41:16.903 回答
2

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>
于 2020-08-16T18:50:15.583 回答
1

这是一个非常好的关于 AJAX 表单YoutubeLink的 YouTube 教程 ，您可以从这个 GitHub 项目链接下载该项目。它包含用于 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>
于 2018-02-19T04:52:13.507 回答
0

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

于 2019-04-08T18:52:31.373 回答