Ajax呼叫在ASP.NETCore中似乎不起作用

我有以下視圖、區域視圖和控制器：

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

uj5u.com熱心網友回復：

請檢查您是否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.

或者您可以

整個作業方式使用AspNetCore.Unobtrusive.Ajax應該有如下：

1. 安裝AspNetCore.Unobtrusive.Ajaxnuget包：

PM> Install-Package AspNetCore.Unobtrusive.Ajax

2. 在 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()
        //...
    }
   

3. 在 _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>
   

標籤：阿贾克斯 asp.net-core-mvc

上一篇：將ajax請求的資料傳遞給Python函式

下一篇：如果購物車總數小于woocommerce購物車頁面中的特定數量，如何動態隱藏按鈕