ASP. Net Core: JavaScript файл, не отображающий данные в dataTable

Question

Я изучаю Asp. Net ядро, используя это https://www.youtube.com/watch?v=C5cnZ-gZy2I на YouTube.

Здесь, согласно автору, мне нужно вызвать API из BooksController для отображения данных в MVCProject Я сделал, как он объяснил, но я перенаправляюсь на другой URL-адрес api / Book /, откуда он извлекается, я не могу понять.

BookController.cs `

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using BookListMVC.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;

namespace BookListMVC.Controllers
{
    [Route("api/Book")]
    [ApiController]
    public class BooksController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        #region APICalls

        private readonly ApplicationDbContext _db;

        public BooksController(ApplicationDbContext db)
        {
            _db = db;
        }

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

        [HttpDelete]
        public async Task<IActionResult> Delete(int id)
        {
            var bookFromDb = await _db.Book.FirstOrDefaultAsync(u => u.Id == id);
            if (bookFromDb == null)
            {
                return Json(new { success = false, message = "Error while Deleting" });
            }
            _db.Book.Remove(bookFromDb);
            await _db.SaveChangesAsync();
            return Json(new { success = true, message = "Delete Successful." });


        }
        #endregion
    }
}`

BookList . js

`var dataTable;
$(document).ready(function () {
    loadDataTable();
});

function loadDataTable() {
    dataTable = $('#DT_load').DataTable({
        "ajax": {
            "url": "/Books/getall/",
            "type": "GET",
            "datatype": "json"
        },
        "columns": [
            { "data": "name", "width": "20%" },
            { "data": "author", "width": "20%" },
            { "data": "isbn", "width": "20%" },
            {
                "data": "id",
                "render": function (data) {
                    return `<div  class="text-center">
<a href="/Books/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;' onclick=Delete('/Books/Delete?id='+${data})>
Delete </a>

<div>`;
                }, "width": "20%"
            }
        ],
        "language": {
            "emptyTable": "no data found"
        },
        "width": "100%"

    })
}

function Delete(url) {
    swal(
        {
            title: "Are you sure?",
            text: "Once deleted,you will not able to retrive",
            icon: "warning",
            buttons: true,
            dangerMode: true
        }).then((willDelete) => {
            if (willDelete) {
                $.ajax({
                    type: "DELETE",
                    url: url,
                    success: function (data) {
                        if (data.success) {
                            toastr.success(data.message);
                            dataTable.ajax.reload();
                        }
                        else {
                            toastr.error(data.message);
                        }
                    }
                });
            }
        });
}`

Index.cshtml
`

<br/>
<div class="container row p-0 m-0">
    <div class="col-6">
        <h2 class="text-info">Book List</h2>
    </div>
    <div class="col-3 offset-3">
        <a asp-action="Upsert" asp-controller="Books" class="btn btn-info form-control text-white">
            Add New Book
        </a>
    </div>
    <div class="col-12 border p-3">
        <table id="DT_load" class="table table-striped table-bordered" style="width:100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Author</th>
                    <th>ISBN</th>
                    <th></th>
                </tr>
            </thead>
        </table>
    </div>
</div>


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

`In _Layout.cs html

<li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Books" asp-action="Index">BookLists</a>
                        </li>

Я прикрепляю снимок, на который я перенаправляю URl, когда нажимаю на BookLists, но не «Не знаю, откуда берется этот URL-адрес« api / book »

Любая помощь в решении этой проблемы будет полезна для меня, чтобы продолжить обучение.