为什么我的局部视图不渲染 <tr> 元素？

Question

所以我正在尝试创建一个表，其中的表行是我从数据库中获取的数据构造的 div。

我似乎遇到了一个问题。我得到了这段 javascript，它在页面准备好后立即开始运行，并且每 10 秒一遍又一遍地运行。该脚本的目的是使用 ajax 更新局部视图，这样我就不必刷新浏览器来查看表格中的更改。

<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>

这就是问题发生的地方。当我第一次加载页面时，一切正常，看起来很棒，而且运行良好，但是一旦它第一次刷新......或者.load();..突然停止正常工作，我的意思是它没有加载任何 <tr> 元素。

这是我第一次加载页面时 DOM 的样子，它还没有刷新，每个 td 都包含类 container-1 的 div，所以它工作得很好

这是第一次刷新和之后的每一次刷新后的样子

Answer 1

jQuery 调用 $('#itemsss').load("/Dashboard/ReturnItems") 将容器的现有内容替换为新元素 - jQuery documentation 将其声明为

.load() 将匹配元素的 HTML 内容设置为返回的数据。

替换#itemsss 的innerHTML 会清除表格元素。因为<tbody>、<tr>和<td>标签在表外无效，解析器忽略它们，留下#itemsss只包含<div>元素，如第二张图所示。

如果成功的 AJAX 调用旨在更新整个表格，则服务器可以发送表格的完整 HTML，然后可以使用该 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() 方法。