Ajax 调用似乎在 ASP.NET Core 中不起作用

Question

我有以下视图、部分视图和控制器：

@using CustomersAJAX.Models
@model Tuple<List<Customer>, Customer>

@{
    AjaxOptions ajaxOptions = new AjaxOptions
    {
        HttpMethod = "POST",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "customerInfo"
    };

}

@using (Html.AjaxBeginForm("OnSelectCustomer", "Customer", ajaxOptions))
{
    @Html.AntiForgeryToken();

    var selected = false;

    foreach (var customer in Model.Item1)
    {
        if (Model.Item2 == customer)
        {
            selected = true;
        }
        else
        {
            selected = false;
        }

        @Html.RadioButton("CustomerNumber", customer.ID, selected);
        @Html.Label(customer.Name);
        <br />
    }
    <input type="submit" id="SumbitButton" value="Submit Details" />

}

<div id="customerInfo">
    @await Html.PartialAsync("~/Views/Shared/_CustomerDetails.cshtml", Model.Item2)
</div>

@model CustomersAJAX.Models.Customer

<h3>Customer Details</h3>
@Html.DisplayNameFor(m => Model.Name):@Html.DisplayFor(m => Model.Name)
<br />
@Html.DisplayNameFor(m => Model.Age):@Html.DisplayFor(m => Model.Age)
<br />
<p>Updated at @DateTime.Now</p>


public class CustomerController : Controller
{
        List<Customer> customers;

        public CustomerController()
        {
            customers = new List<Customer>
            {
                new Customer(0, "Sherry", 37),
                new Customer(1, "Tim", 12),
                new Customer(2, "Charlene", 98),
                new Customer(3, "Dane", 24),
                new Customer(4, "Elijah", 51),
                new Customer(5, "Howard", 64),
                new Customer(6, "Dave", 34)
            };
        }

        public IActionResult Index()
        {
            Tuple<List<Customer>, Customer> tuple = new Tuple<List<Customer>, Customer>(customers, customers[0]);

            return View("Customer", tuple);
        }

        [HttpPost]
        public IActionResult OnSelectCustomer(string CustomerNumber)
        {
            return PartialView("_CustomerDetails", customers[int.Parse(CustomerNumber)]);
        }
}

它有效，但是，Ajax 部分（“_CustomerDetails”视图）呈现为单独的视图，就像在没有 Ajax 的情况下一样，而不是作为客户视图的一部分应该做的。

我安装了以下软件包：

<PackageReference Include="AspNetCore.Unobtrusive.Ajax" Version="1.1.3" />

在 _Layout.cshtml 正文中，我引用了以下内容：

<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>

Answer 1

请检查您的 jquery.validate.unobtrusive.js 是否存在于 wwwroot/lib/jquery-validation-unobtrusive 中。当你安装了AspNetCore.Unobtrusive.Ajax服务器端库，并不意味着你在本地也安装了jquery.validate.unobtrusive.js客户端库。

如果你只安装AspNetCore.Unobtrusive.Ajax，你可以使用@Html.RenderUnobtrusiveAjaxScript()调用jquery.validate.unobtrusive.js。

或者您可以use Libman(which used to install client side library)在本地安装jquery.validate.unobtrusive.js：

使用AspNetCore.Unobtrusive.Ajax的整个工作方式应该如下所示：

安装AspNetCore.Unobtrusive.Ajax nuget 包：

PM> Install-Package AspNetCore.Unobtrusive.Ajax

在Startup.cs中添加服务和中间件:

 public void ConfigureServices(IServiceCollection services)
 {
     //...
     services.AddUnobtrusiveAjax(); 
     //services.AddUnobtrusiveAjax(useCdn: true, injectScriptIfNeeded: false);
     //...
 }

 public void Configure(IApplicationBuilder app)
 {
 //...
     app.UseStaticFiles();

     //It is required for serving 'jquery-unobtrusive-ajax.min.js' embedded script file.
     app.UseUnobtrusiveAjax(); //It is suggested to place it after UseStaticFiles()
     //...
 }

在_Layout.cshtml中添加脚本标签:

<script src="~/lib/jquery/dist/jquery.min.js"></script>

<!--Place it at the end of body and after jquery-->

 @Html.RenderUnobtrusiveAjaxScript()

<!-- Or you can reference your local script file -->

 @RenderSection("Scripts", required: false)
 </body>
 </html>

Ajax 调用似乎在 ASP.NET Core 中不起作用

Ajax call doesn't seem to work in ASP.NET Core

ajax

asp.net-core-mvc