Почему мой частичный вид не отображает <tr>элементов?

Question

Итак, я пытаюсь создать таблицу, в которой строки таблицы представляют собой блоки div, которые я создал из данных, полученных из моей базы данных.

Кажется, у меня возникла проблема .. Я получил этот кусок javascript, который запускается, как только страница готова, и запускается снова и снова каждые 10 секунд. Цель этого сценария - обновить частичное представление с помощью ajax, чтобы мне не пришлось обновлять sh браузер, чтобы увидеть изменения в таблице.

<script type="text/javascript">
    $(document).ready(function () {
        setInterval(CheckAvailability, 10000);
        setTimeout
    });

    function CheckAvailability() {
        $.ajax({
            type: "POST",
            url: "/Dashboard/CheckChange",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            mimeType: "text/html",
            success: function (response) {
                if (response) {
                    $('#itemsss').load("/Dashboard/ReturnItems");
                    console.log("Updated!");
                }
                else {
                    console.log("Failed!");
                }
            }
        });
    };
</script>

Это возвращает true каждый раз, потому что это то, что я установил явно. Тем не менее, он выполняет load(); контент, возвращаемый этим действием.

public IActionResult ReturnItems()
{
    Items = new List<EbayProduct>();
    using (var ctx = new UserContext())
    {
        Items = ctx.Users.Include(x => x.Items).Where(x => x.Username == "Admin").FirstOrDefault().Items;
    }

    return PartialView("_Item", Items);
    //return null;
}

Здесь я загружаю PartialView

<div id="itemsss">
    <table id="foo-filtering" class="table table-bordered table-hover toggle-circle" data-page-size="7">
        <thead>
        </thead>
        <tr>
            <td>
                <partial name="_Item" />
            </td>
        </tr>
        <tfoot>
            <tr>
                <td colspan="5">
                    <div class="ft-right">
                        <ul class="pagination"></ul>
                    </div>
                </td>
            </tr>
        </tfoot>
    </table>
</div>

И вот как выглядит фактический PartialView

<tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td>

                <div class="container-1">
                    <div class="box-img">
                        <img src="@item.ProductImage" />
                    </div>

                    <div class="body">
                        <h3>@item.ItemName</h3>
                        <p>@item.SubTitle</p>
                    </div>

                    <div class="box-button">
                        <p>@item.SKU</p>
                    </div>

                    <div class="box-button">
                        <p class="mt-3 mr-2">$@item.Price</p>
                        <button class="btn btn-primary">Export</button>
                    </div>

                </div>
            </td>
        </tr>
    }
</tbody>

И вот где возникает проблема .. Когда я впервые загружаю страницу, все работает нормально, выглядит отлично и отлично работает, но как только он делает первое refre sh .. Или .load(); .. Он внезапно перестает работать правильно, и под этим я подразумеваю, что он не загружает никаких <tr> элементов.

Так выглядит DOM, когда я впервые загружаю страницу, и она не работает еще не обновлено, каждый td содержит div с классом container-1, поэтому он работает нормально

And here is what it looks like after the first refresh and every single refresh after that введите описание изображения здесь

Answer 1

Вызов jQuery $('#itemsss').load("/Dashboard/ReturnItems") заменяет существующее содержимое контейнера новыми элементами - jQuery документация утверждает это как

.load () устанавливает HTML содержимое элементов, соответствующих возвращенным данным.

Замена innerHTML из #itemsss стирает элемент таблицы. Поскольку теги <tbody>, <tr> и <td> недопустимы вне таблицы, синтаксический анализатор игнорирует их, оставляя #itemsss, содержащий только элементы <div>, как показано на втором рисунке.

Если Успешные вызовы AJAX предназначены для обновления всей таблицы, которую сервер может отправить, полный HTML для таблицы, который затем может быть использован для замены содержимого #itemss, как показано в сообщении. Поскольку на рисунке 1 показано несколько элементов tbody, я предполагаю, что это не так.

Я пробовал добавить tbody html в таблицу при разных условиях: с заголовком или без него и с существующей таблицей или без нее разделы. Предупреждение. Я не программист jQuery - если полезно, интегрируйте и модифицируйте как лучше всего:

"use strict";

function appendTableBody( bodyHTML) {
   let previous = $("#foo-filtering > tbody").last();
   if( !previous.length) {
       previous = $("#foo-table > thead").last();
   }
   if( previous.length) {    
       previous.after( bodyHTML);
   }
   else {
       $("#foo-filtering").prepend( bodyHTML)
   }
}
appendTableBody("<tbody><tr><td>appended section<\/td><\/tr><\/tbody>", true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- body-html -->
<table id="foo-filtering">
    <thead>
        <tr><th>Table Header</th></tr>
    </thead>
    <tbody>
        <tr><td>Table section 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Table section 2</td></tr>
    </tbody>
    <tfoot>
        <tr><th>table footer</th></tr>
    </tfoot>
</table>

Я не пытался заменить существующий элемент tbody, но предполагаю, что это потребует выбора элемента и вызова .html() метод.