Если пользователь продолжает нажимать кнопку (подробнее), продолжает получать несколько раз без результатов

Question

Я создал частичное представление и добавил визуализацию на страницу индекса. У меня есть кнопка (см. Еще), и каждый раз, когда я вызываю контроллер с помощью ajax и добавляю новые данные на экран. Проблема в том, что у меня больше нет результатов для отображения, а пользователь продолжает нажимать кнопку, которую я добавляю несколько раз «результаты не найдены».

Есть ли способ предотвратить это?

My Index :

  <div class="sectionMain" id="stopscroll">

        @foreach (var item in Model)
        {
            if (item.restDetails != null && item.restDetails.Count() != 0)
            {
                @*<label class="sectionLabels" style="padding-left: 3%;">Restaurants</label>*@
                @Html.Hidden("nextItems")
                <div id="test" class="sectionSeeMore">
                    @Html.Partial("_RestaurantDetails", item.restDetails)

                </div>
                <div class="row">
                    <div class="col-5"></div>
                    <div class="col-2" style="text-align:center;">
                        <button id="btnsubmit" class="buttonCategory" onclick="callseemore(this)" style="font-family:'Fredoka-One';height: 36px;">See More</button>
                    </div>
                    <div class="col-5"></div>

                </div>

            }
            break;
        }

    </div>
<script>
    function callseemore(a){
        var postcode = $("#inputPostCode").val();
        var category = "";
        var slides = document.getElementsByClassName("buttonCategoryMain");
        for (var i = 0; i < slides.length; i++) {
            if (slides.item(i).className == "buttonCategoryMain activebtnMain") {
                category = slides.item(i).value;
            }

        }
        var offerButton = document.getElementById("sidebarOfferBtn").classList.value;
        var isofferparam = "False";
        if (offerButton == "activebtn") {
            isofferparam = "True";
        }
        var nextItems= $("#nextItems").val();
        $.ajax({
            url: "@Url.Action("RestaurantPaging", "Home")",
            type: 'POST',
            data: ({ categoryparam: category, postcodeparam: postcode, nextitemparam: nextItems, isOfferparam: isofferparam}),
                cache: false,
            success: function (result, status, xhr) {
                debugger;
                    $('#tblSeeMore').append(result);
                    var asf = xhr.getResponseHeader("nextItems");
                    document.getElementById("nextItems").value =asf ;
                }
            })
    }
</script>

PartialView:

@model IEnumerable<Restaurants.Models.RestaurantDetail>




@if (Model.Count() == 0)
{
    <h3 style="text-align:center;font-family:'Fredoka-One'">No Results Found</h3>
}
else
{
    <div style="display:flex;flex-flow:row wrap;" id="tblSeeMore">
        @foreach (var itemRest in Model)
        {
            <div class="newRestaurantsSection" id="newRestaurantsSection">
                <div class="newRestaurantBox">
                    @if (itemRest.RestaurantImgPath != null)
                    {
                        <img class="restImage" src="@Url.Content(itemRest.RestaurantImgPath)">
                    }
                    else
                    {
                        <img class="restImage" src="~/Content/Assets/Images/no_image.png" />
                    }
                    <div class="restMethods">
                        @if (itemRest.Pickup)
                        {
                            <span style="display: inline-block; border-right: 1px solid lightgrey;padding-right:3px;">
                                <img class="restMethodImg" src="~/Content/Assets/Images/takeaway.png" />
                                @*<i class="fas fa-box fa-2x"></i>*@
                            </span>
                        }
                        @if (itemRest.Delivery)
                        {
                            <span style="display: inline-block; border-right: 1px solid lightgrey;padding-right:3px;">
                                @*<i class="fas fa-motorcycle fa-2x"></i>*@
                                <img class="restMethodImg" src="~/Content/Assets/Images/delivery.png" />
                            </span>
                        }
                        @if (itemRest.OnlinePayments)
                        {
                            @*<i class="fas fa-credit-card fa-2x"></i>*@
                            <img class="restMethodImg" src="~/Content/Assets/Images/visa.png" />
                        }
                    </div>
                    <div class="row restLogoNameKitchenType">
                        <div class="col-xs-1" style="flex-grow: 0;">
                            @if (itemRest.Logo != null)
                            {
                                <img class="restLogo rounded-circle" src="@Url.Content(itemRest.Logo)">
                            }
                            else
                            {
                                <img class="restLogo rounded-circle" src="~/Content/Assets/Images/no_image.png" />
                            }
                        </div>
                        <div class="col-xs-9 restKitchenTypeContent">
                            <label class="restName">@itemRest.RestaurantName</label>
                            <br />

                            @{ string kitchenTypeFull = "";}
                            @foreach (var kitchenType in itemRest.RestaurantCategories)
                            {
                                kitchenTypeFull += "," + @kitchenType.Category.Description;
                            }
                            @if (kitchenTypeFull.Length > 0)
                            {
                                kitchenTypeFull = kitchenTypeFull.TrimStart(new Char[] { ',' });
                                <label>@kitchenTypeFull</label>
                            }
                        </div>
                    </div>
                    <div class="row restAddressPhoneOffer">
                        <div class="col-md-12">
                            <div class="row">
                                <div>
                                    <i class="fas fa-map-marker-alt"></i>
                                </div>
                                <div class="col" style="margin-left:-20px">
                                    &nbsp;&nbsp;&nbsp; @itemRest.Address1,<br /> &nbsp;&nbsp;&nbsp; @itemRest.Area, @itemRest.PostalCode<br />&nbsp;&nbsp;&nbsp; @itemRest.City
                                </div>
                            </div>
                            <div class="row">
                                <div>
                                    <i class="fas fa-phone-alt"></i>
                                </div>
                                <div class="col" style="margin-left:-20px">
                                    &nbsp;&nbsp;&nbsp; @itemRest.PhoneNumber
                                </div>
                                <div>
                                    @if (itemRest.Offer)
                                    {
                                        <img style="width:60px;" class="restOfferImg" src="~/Content/Assets/Images/gift.png" />
                                    }
                                    else
                                    {
                                        <img style="width:60px;height:60px;" src="~/Content/Assets/Images/no_image _blank.png" />
                                    }
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12" style="margin-top:10px;margin-bottom:10px;padding-left:0px;padding-right:10px;">
                            @if (itemRest.MenuLink != null && itemRest.TableLink != null)
                            {
                                <div class="rowMenuTableLink">
                                    <button class="rowMenuTableLinkM">
                                        @Html.Raw(itemRest.MenuLink)
                                    </button>
                                    <button class="rowMenuTableLinkT">
                                        @Html.Raw(itemRest.TableLink)
                                    </button>
                                </div>
                            }
                            else if (itemRest.MenuLink == null && itemRest.TableLink == null)
                            {
                                <div class="rowTableLink" style="height:44px">
                                </div>
                            }
                            else
                            {
                                if (itemRest.MenuLink != null)
                                {
                                    <div class="col-md-12 rowMenuLink">
                                        <button class="restMenuResrBtns">
                                            @Html.Raw(itemRest.MenuLink)
                                        </button>
                                    </div>
                                }
                                if (itemRest.TableLink != null)
                                {
                                    <div class="col-md-12 rowTableLink">
                                        <button class="restMenuResrBtns">
                                            @Html.Raw(itemRest.TableLink)
                                        </button>
                                    </div>
                                }
                            }
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>

    @*@Html.ActionLink("See More", "RestaurantPaging", "Home", new { JSONModel = Json.Encode(Model) }, null)*@
}
<script type="text/javascript">


    $(document).ready(function () {
        var el = document.getElementsByClassName("newRestaurantBox");
        var sidebar = document.getElementById('scrollableSidebar').style.display;
        var sidebarclasses = document.getElementById('scrollableSidebar').classList.value;
        var newRestaurantsView = document.querySelectorAll("[id='newRestaurantsSection']");
        for (var i = 0, ilen = el.length; i < ilen; i++) {
            if (sidebarclasses != "sectionSidebar sectionSidebarMin" && sidebar != "none") {
                $(newRestaurantsView[i]).addClass('newRestsSectionSidebar');
                $(newRestaurantsView[i]).removeClass('newRestaurantsSection');
            }
            else {
                $(newRestaurantsView[i]).addClass('newRestaurantsSection');
                $(newRestaurantsView[i]).removeClass('newRestsSectionSidebar');
            }
        }
    })

</script>

пример экрана печати:

введите описание изображения здесь

Answer 1

Вам просто нужно удалить добавленное ранее «Результаты не найдены» и показать все, что дает ваш метод публикации в качестве ответа. т.е.

Создайте отдельный div внутри #tblSeeMore, который будет содержать «Результаты не найдены»

<div id="divNoResults">
</div>

и измените свой ajax вызов post на это:

$.ajax({
            url: "@Url.Action("RestaurantPaging", "Home")",
            type: 'POST',
            data: ({ categoryparam: category, postcodeparam: postcode, nextitemparam: nextItems, isOfferparam: isofferparam}),
                cache: false,
            success: function (result, status, xhr) {
                debugger;
                    if(result == "No Results Found"){
                      $('#divNoResults').empty(); 
                      $('#divNoResults').append(result);
                    }
                    else 
                      $('#tblSeeMore').append(result);
                    //rest of the code
                }
            })

Или вы можете просто изменить отображение #divNoResults в зависимости от результата метода публикации

<div id="divNoResults" style="display:none">
  <p>No Results Found</p>
</div>

$.ajax({
                url: "@Url.Action("RestaurantPaging", "Home")",
                type: 'POST',
                data: ({ categoryparam: category, postcodeparam: postcode, nextitemparam: nextItems, isOfferparam: isofferparam}),
                    cache: false,
                success: function (result, status, xhr) {
                    debugger;
                        if(result == "No Results Found"){
                          $('#divNoResults').show(); 
                        }
                        else 
                          $('#tblSeeMore').append(result);
                        //rest of the code
                    }
                })