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

问题描述

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

@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 的情况一样，而不是像它应该做的那样作为 Customer 视图的一部分。

我安装了以下软件包：

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

标签： ajaxasp.net-core-mvc

解决方案

请检查您是否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.

或者您可以使用 Libman（用于安装客户端库）jquery.validate.unobtrusive.js在本地安装：

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

安装AspNetCore.Unobtrusive.Ajaxnuget包：

PM> 安装包 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 - Ajax 调用似乎在 ASP.NET Core 中不起作用

问题描述

解决方案

推荐阅读