ajax - MVC 页面中的 Ajax 不使用 Controller 中的方法

问题描述

我对 MVC .net 核心非常陌生。我正在我的页面中实现对数据表的 ajax 调用，但不知何故它没有在控制器中调用我的方法。我的控制台中没有任何错误。我的代码如下：

启动 => 配置

public void ConfigureServices(IServiceCollection services)
        {
            services.AddDbContext<ApplicationDbContext>(
                options => options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
            services.AddControllersWithViews();
            services.AddRazorPages().AddRazorRuntimeCompilation();
        }

启动 => 配置

 app.UseHttpsRedirection();
            app.UseStaticFiles();

            app.UseRouting();

            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
                endpoints.MapRazorPages();
            });

_Layout.cshtml

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - AMS Customers</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" />
</head>

<script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

    @RenderSection("Scripts", required: false)

客户控制器

[Route("api/Customer")]
    public class CustomerController : Controller
    {
        private readonly ApplicationDbContext context;

        public CustomerController(ApplicationDbContext context)
        {
            this.context = context;
        }

        [HttpGet]
        public async Task<IActionResult> GetAll()
        {
            return Json(new { data = await context.Customers.ToListAsync() });
        }
    }

index.cshtml => 对于客户列表

<div class="col-12 border p-3">
    <table id="dt_load" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Middle Name</th>
                <th>Last Name</th>
                <th>Plate Number</th>
                <th>Time Stamp</th>
                <th></th>
            </tr>
        </thead>
    </table>
</div>

@section Scripts {
    <script src="~/js/customer.js"></script>
}

客户.js

var dataTable;

$(document).ready(function () {
    loadDataTable();
});

function loadDataTable() {
    dataTable = $('#dt_customers').DataTable({
        "ajax": {
            "url": "/api/customer",
            "type": "GET",
            "dataType": "json"
        },
        "columns": [
            { "data": "firstName"},
            { "data": "middleName"},
            { "data": "lastName"},
            { "data": "plateNumber"},
            { "data": "timeStamp" },
            {
                "data": "id",
                "render": function (data) {
                    return `<div class="text-center">
                        <a href="Customers/upsert?id=${data}" class="btn btn-success text-white" style="cursor:pointer; width:70px;">
                            Edit
                        </a>
                        &nbsp;
                        <a class="btn btn-danger text-white" style="cursor:pointer; width:70px;">
                            Delete
                        </a>
                    </div>`;
                }, "width": "40%"
            }
        ],
        "language": {
            "emptyTable": "No data found"
        },
        "width": "100%"
    });
}

这是在客户页面加载的我的网络选项卡中

标签： ajaxasp.net-mvcasp.net-core

看起来您的 DataTable 元素customer.js应该与您的Index.cshtml元素匹配。

即你应该改变<table id="dt_load"为<table id="dt_customers"

然后在您的服务器端，因为您的路线是[Route("api/Customer")]，因此在customer.js，您的 ajax url 应该是"url": "/api/customer",而不是"url": "/api/customers",

ajax - MVC 页面中的 Ajax 不使用 Controller 中的方法

问题描述

解决方案

推荐阅读