Как мне правильно обновить мою таблицу, используя ajax asp.net - PullRequest
0 голосов
/ 20 июня 2020

Итак, у меня есть эта таблица, которую я структурировал следующим образом

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

А вот частичное представление

@foreach (var item in Model)
{
    <tr>
        <td>
            <nav aria-label="Page navigation example">

                <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>
            </nav>
        </td>
    </tr>
}

И то, как я получаю элементы, проверка базы данных на предмет элементов, принадлежащих этому пользователю. Обратите внимание, что я возвращаю значение null, это важно. 0,5 секунды, просто чтобы, если я удалю элемент, он обновит представление.

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

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

                }
                else {
                    console.log("Failed!");
                }
            }
        });
    };
</script>

Вот проблема ... Сейчас он отлично работает, таблица выглядит так, как предполагалось, вы можно без проблем перелистывать страницы .. Однако! Если бы я удалил что-то из базы данных, это не обновило бы частичное представление. Даже если я изменю return null; на return PartialView("_Item", Items);

, я считаю, что это потому, что я не добавил css класс items в таблицу, но если я это сделаю, таблица не будет выглядеть нормально, все элементы будут отображаться в одной строке без разбивки на страницы et c.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...