Asp.Net Core MVC рендеринг частичного просмотра ajax не очищает таблицу, когда результат пустой

Question

У меня есть страница с частичным представлением _PartialList. Код:

<div class="col-md-8 col-sm-12">
        <div class="card" id="listHeader">
            <div class="card-header">
                <h5 class="card-title">Seznam kontaktov</h5>
                <label id="lbTest">test</label>
                <div class="row">
                    <div class="col-12 form-inline">
                        <select id="ddlSelect" asp-items="Model.Stranke" onchange="filterData();" class="form-control"></select>

                        <input type="text" name="SearchString" placeholder="Išči" value="@ViewData[" CurrentFilter"]" id="tbSearch" class="form-control" />

                        <input value="Išči" type="button" id="btnSearch" class="btn btn-primary ml-2" onclick="filterData();" />

                        <div class="text-right">
                            <a asp-controller="Kontakti" asp-action="Add" class="btn btn-primary" role="button">Dodaj</a>
                        </div>

                    </div>
                </div>
            </div>

            <div id="sectionList">
                @{await Html.RenderPartialAsync("_PartialList", Model);}
            </div>

        </div>
    </div>

В частичном представлении у меня есть таблица, в которой отображаются все записи, которые я возвращаю с контроллера. Пользователи могут фильтровать данные через @ddlSelect и @tbSearch. Для этого я использую следующие jquery:

function filterData() {

            var sender = $(this).attr('id');

            // drop down
            var strSelected = "";
            $('#ddlSelect option:selected').each(function () {
                strSelected += $('#ddlSelect')[0].value;
            });

            // search text
            var search = $('#tbSearch').val();

            // url 
            var url = '/Kontakti/IndexPartial?idSelect=' + strSelected;
            url += '&searchString=' + search;

            // partial reload
            $('#sectionList').load(url);

            return false;
        }

Это прекрасно работает, когда из контроллера возвращаются результаты - таблица get обновляется.

Но когда пользователь вводит поиск со строкой, которая не дает никаких результатов (пустой список), таблица не обновляется / не очищается, но строки последнего (успешного) запроса по-прежнему отображаются.

Как показать пустую таблицу (без строк), когда из контроллера возвращается пустой список?

Answer 1

Очевидно, проблема была в PaginatedList, который я использовал из этого руководства по MS: https://docs.microsoft.com/en-us/aspnet/core/data/ef-mvc/sort-filter-page?view=aspnetcore-2.0

Это метод CreateAsync, который возвращает ошибку, когда источником данных является пустой набор результатов.

Итак, я просто добавил проверку в своем контроллере перед отправкой модели на мой вид, например:

if(result.Count() == 0)
            {
                model.Kontakti = new PaginatedList<KontaktiDetailModel>(result.ToList(), 0, 0, pageSize);
            }
            else
            {
                model.Kontakti = await PaginatedList<KontaktiDetailModel>.CreateAsync(result.AsNoTracking(), pageNumber ?? 1, pageSize);
            }

Теперь я получаю пустую таблицу, когда нет результатов, соответствующих поиску пользователей.

Answer 2

Я не уверен, как возвращаются ваши данные, но вы можете получить доступ к информации о возвращенном объекте, например:

$("#sectionList").load(url, function(response, status, xhr) {

});

Таким образом, вы можете проверить переменную 'response' и действовать соответственно. Например, если вы отправляете обратно объект json, вы делаете что-то вроде:

$("#sectionList").load(url, function(response, status, xhr) {
   if(response.length === 0)
        $("#sectionList").html("No results");
   });
});