ASP. NET - ajax ответ на вызов, но не отображается в таблице

Question

У меня проблема, я хочу получить данные из API и показать в таблице. я вижу ответ на вкладке Сеть в chrome, но в моей таблице ничего не отображается, и я пытаюсь внести некоторые изменения, но все еще не работает.

как я могу это исправить?

спасибо !!!

мой код:

внутри папки Api -> TestNewsController:

namespace AutomationTool.Api
{
    [Route("api/[controller]")]
    [ApiController]
    public class TestNewsController : ControllerBase
    {
        private readonly ApplicationDbContext _context;

        public TestNewsController(ApplicationDbContext context)
        {
            _context = context;
        }

        // GET: api/TestNews
        [HttpGet]
        public async Task<ActionResult<IEnumerable<TestNew>>> GetTestNews()
        {
            return await _context.TestNews.ToListAsync();
        }           
    }
}

внутри папки Pages -> AllTests -> Index.cs html:

@page
@model AutomationTool.Pages.AllTests.IndexModel
@{    
}

<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="pill" href="#home">Customers</a>
    </li>      

<div class="tab-content">
    <div class="tab-pane container active p-0" id="home" style="margin-top:15px;">
        <table id="customerTable" class="table table-bordered">
            <thead class="thead-dark text-white">
                <tr>
                    <th>Id</th>
                    <th>Domain</th>
                    <th>Name</th>
                    <th>TestPlan</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

@section Scripts{    
    <script>


            $(function () {
                $.ajax("/api/TestNews",
                    { method: "get" })
                    .then(function (response) { // get the response (json data)
                        console.dir(response);
                        $('#cutomerTable')  // take the id from table tag
                            .DataTable({
                                data: response, // the data of this table
                                columns: [
                                    { "data": "Id" },
                                    { "data": "Clipro" },
                                    { "data": "Name" },
                                    { "data": "TestPlan" },
                                    { "data": "EndPoint" },
                                    { "data": "Status" }
                                ]
                            });
                    });
            });



    </script>

или я пытаюсь что-то подобное:

 $(document).ready(function () {  
        $("#cutomerTable").DataTable({  
            "ajax": {  
                "url": "@Url.Action("GetTestNews", "TestNews")",  
                "type": "GET",  
                "datatype": "json"  
            },  
            "columns": [  
                  { "data": "Id" },
                  { "data": "Clipro" },
                  { "data": "Name" },
                  { "data": "TestPlan" },
                  { "data": "EndPoint" },
                  { "data": "Status" }
            ]  
        }); 

Answer 1

Я предполагаю, что вы используете подход с первым кодом.

В коде вашего контроллера не хватает нескольких вещей:

Например, ваш код:

// GET: api / TestNews

    [HttpGet]
    public async Task<ActionResult<IEnumerable<TestNew>>> GetTestNews()
    {
        return await _context.TestNews.ToListAsync();
    }  

Чтобы получить записи из базы данных, необходимо создать экземпляр таблицы и передать его в View, например:

    [HttpGet]
    public async Task<ActionResult<IEnumerable<TestNew>>> GetTestNews(ClassName myObj)
    {
         await _context.TestNews.ToListAsync();
         return View(myObj);
    }  

Здесь ClassName в параметре является фактическим именем класса, необходимым для DbSet в классе DbContext (где у вас определены свойства getter и setter)

Next: Страница вашего просмотра не имеет синтаксиса Razor, тогда как браузер узнает, как визуализировать представление.

Итак, вместо этого:

<div class="tab-content">
<div class="tab-pane container active p-0" id="home" style="margin-top:15px;">
    <table id="customerTable" class="table table-bordered">
        <thead class="thead-dark text-white">
            <tr>
                <th>Id</th>
                <th>Domain</th>
                <th>Name</th>
                <th>TestPlan</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
</div>

Измените его на что-то вроде этого:

<div class="tab-content">
<div class="tab-pane container active p-0" id="home" style="margin-top:15px;">
    <table id="customerTable" class="table table-bordered">
        <thead class="thead-dark text-white">
            <tr>
                <th>Id</th>
                <th>Domain</th>
                <th>Name</th>
                <th>TestPlan</th>
                <th>Status</th>
            </tr>
        </thead>
        @foreach(ModelName obj in Model){
        <tbody>@obj.PropertyNames</tbody>
          }
    </table>
</div>
</div>

Это просто идея, как это должно продолжаться. Поскольку вы не полностью поделились своими взглядами, я не могу вам помочь с точным ответом.

Надеюсь, что это направление даст вам направление. :)