ASP.NET MVC 使用 C# 和 data.tables

Question

Blo ente`在此處輸入圖像描述

namespace believe.Controllers { public class ProductController: Controller { private readonly IUnitOfWork _context; 私有只讀 IWebHostEnvironment _hostEnvironment； public ProductController(IUnitOfWork context, IWebHostEnvironment hostEnvironment) { _context = context; _hostEnvironment = 主機環境； }

 public IActionResult Index() { return View(); } //GET public IActionResult Delete(int? id) { if (id is null or 0) { return NotFound(); } var obj = _context.Product.GetFirstOrDefault(c => c.Id == id); return View(obj); } [HttpPost] public IActionResult DeletePOST(int? id) { var obj = _context.Product.GetFirstOrDefault(c => c.Id == id); if (obj == null) { return NotFound(); } _context.Product.Remove(obj); _context.Save(); TempData["success"] = "Category deleted successfully"; return RedirectToAction("Index"); } public IActionResult UpSert(int? id) { //Product product = new(); //IEnumerable < SelectListItem > CategoryList = _context.Category.GetAll().Select(u=>new SelectListItem { Text = u.Name, Value = u.Id.ToString() }); // IEnumerable<SelectListItem> CoverTypeList = _context.CoverType.GetAll().Select(u => new SelectListItem { Text = u.Name, Value = u.Id.ToString() }); ProductVM productVM = new() { Product = new(), CategoryList = _context.Category.GetAll().Select(u => new SelectListItem { Text = u.Name, Value = u.Id.ToString() }), CoverTypeList = _context.CoverType.GetAll().Select(u => new SelectListItem { Text = u.Name, Value = u.Id.ToString() }) }; if (id is null or 0) { //create product //ViewBag.CategoryList = CategoryList; //ViewBag.CoverTypeList = CoverTypeList; return View(productVM); } else { //update product }; return View(productVM); } [HttpPost] public IActionResult UpSert(ProductVM obj, IFormFile? file) { if(ModelState.IsValid) { string wwwRootPath = _hostEnvironment.WebRootPath; if(file.=null) { string fileName = Guid.NewGuid();ToString(). var uploads = Path,Combine(wwwRootPath; @"images\products"). var extension = Path.GetExtension(file;FileName). using(var fileStreams = new FileStream(Path,Combine(uploads, fileName + extension),

FileMode.Create)) { file.CopyTo(fileStreams); } obj.Product.ImageUrl = @"\images\products" + 文件名 + 擴展名； }

 _context.Product.Add(obj.Product); _context.Save(); TempData["success"] = "Product update successfully"; return RedirectToAction("Index"); } return View(obj); } #region API CALLS [HttpGet] public IActionResult GetAll() { var productList = _context.Product.GetAll(); return Json(productList); } #endregion

r code here ckquote` 改變了你所顯示的返回，但是頁面說加載但它從未加載

[控制器的第一個屏幕截圖][2秒屏幕截圖\我是編碼世界的新手我正在嘗試使用 DataTables 從我的數據庫加載我的數據，但由於某種原因我不斷收到此錯誤消息。 我究竟做錯了什么？

嘗試從我的數據庫加載數據，但我的配置似乎不起作用

Answer 1

嘗試從我的數據庫加載數據，但我的配置似乎不起作用

我已相應地轉載了您的問題。 這可能由於多種原因而發生，如果您的數據不是正確的json format ，或者如果您的列字段格式錯誤，例如大寫、小寫。

在您的場景中，您在這里做錯了： return Json(new { data = productList}); 根據您的視圖代碼，您應該像這樣return Json(productList); 所以你的錯誤會解決。

你可以試試這樣：

如何調試：

Controller：

public IActionResult Index()
        {
            return View();
        }
        public ActionResult GetAll()
        {
            var productList = new List<product>()
            {
                new product(){ Id = 1, Title = "A", ISBN = "ISBN-1", Price = 10.1},
                new product(){ Id = 2, Title = "B", ISBN = "ISBN-2", Price = 10.1},
                new product(){ Id = 3, Title = "C", ISBN = "ISBN-3", Price = 10.1},
                new product(){ Id = 4, Title = "D", ISBN = "ISBN-4", Price = 10.1},
                new product(){ Id = 5, Title = "E", ISBN = "ISBN-5", Price = 10.1},



            };

            return Json(productList);

        }

Model：

public class product
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string ISBN { get; set; }
    public double Price { get; set; }
}

看法：

<table id="myTable" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th>ID</th>
            <th>Title</th>
            <th>ISBN</th>
            <th>Price</th>
           

        </tr>
    </thead>
</table>
@section scripts {
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "Admin/Product/GetAll",
                success: function (response) {
                    console.log(response);
                    $('#myTable').DataTable({
                        data: response,
                        columns: [
                            { data: 'id' },
                            { data: 'title' },
                            { data: 'isbn' },
                            { data: 'price' }
                        ]
                    });

                },
                error: function (response) {
                    alert(response.responseText);
                }
            });

        });
    </script>
}

Output：