Ajax поиск не работает во второй раз (ASP. NET MVC)

Question

У меня проблема с изменением элементов после поиска.

Я смотрел похожие темы, но там не нашел решения: (

Похоже, что в первый раз страница загружается хорошо - в первый раз загружается вся страница Index.cs html, которая содержит коллекцию книг в выбранной категории.

На странице имеется поисковая система - после поиска слова "manual" - ajax правильно заменяет элементы с теми, которые содержат «руководство» в названии.

Затем, когда я вхожу в поисковую систему второй раз (например, «упражнения») - содержание страницы больше не меняется.

Я попытался отладить, и я вижу, что новые элементы правильно загружаются из базы данных - условие «if (Request.IsAjaxRequest ())» истинно, и элементы передаются в частичное представление - там «foreach» l oop проходит через них. К сожалению, после _Partial ничего не происходит.

Я не могу найти ошибку - самое странное, что первый ajax cal Я отлично работает - только второй (и последующий) плохо.

CatalogController.cs

public ActionResult Index(string categoryName = null, string searchQuery = null)
        {
            if (categoryName == null)
                categoryName = (db.Categories.Find(1)).Name;

            var category = db.Categories.Include("Books").Where(x => x.Name.ToLower() == categoryName).Single();

            var books = category.Books.Where(x => (searchQuery == null || x.Title.ToLower().Contains(searchQuery.ToLower()) || x.SubTitle.ToLower().Contains(searchQuery.ToLower()) || x.Level.ToLower().Contains(searchQuery.ToLower())) && !x.Inaccessible);

            if (Request.IsAjaxRequest())
                return PartialView("_PartialBooksList", books);
            else
                return View(books);
        }

Index.cs html

<form class="o-search-form" id="search-form" method="get" data-ajax="true" data-ajax-target="#booksList">
   <input class="o-search-input" id="search-filter" type="search" name="searchQuery" data-autocomplete-source="@Url.Action("SearchTips")" placeholder="Search" />
   <input class="o-search-submit" type="submit" value="" />
</form> 

<div class="row" id="booksList">
   @Html.Partial("_PartialBooksList")
</div>

@section Scripts
{
    <script src="~/Scripts/jquery-3.5.0.js"></script>
    <script src="~/Scripts/jquery-ui-1.12.1.js"></script>
    <script>
        $(function () {
            var setupAutoComplete = function () {
                var $input = $(this);
                var options =
                {
                    source: $input.attr("data-autocomplete-source"), 
                    select: function (event, ui) { 
                        $input = $(this);
                        $input.val(ui.item.label);
                        var $form = $input.parents("form:first");
                        $form.submit();
                    }
                };
                $input.autocomplete(options);  
            };
            var ajaxSubmit = function () { 
                var $form = $(this);
                var settings = {                                            
                    data: $(this).serialize(), 
                    url: $(this).attr("action"),  
                    type: $(this).attr("method")                       
                };
                $.ajax(settings).done(function (result) {    
                    var $targetElement = $($form.data("ajax-target"));
                    var $newContent = $(result);
                    $($targetElement).replaceWith($newContent);  
                    $newContent.effect("slide");
                });
                return false;
            };
            $("#search-filter").each(setupAutoComplete);
            $("#search-form").submit(ajaxSubmit); 
        });
    </script>
}           

_PartialBooksList

@model IEnumerable<ImpressDev.Models.Book>
@using ImpressDev.Infrastructure
<div class="row">
    @foreach (var book in Model)
    {
        <div class="col-12 col-xl-4">
            <a class="o-shop-link" href="@Url.Action("Details", "Catalog", new { bookId = book.BookId })">
                <div class="o-shop-item">
                    <img class="o-shop-img" src="@Url.BookPhotoSourcePath(book.PhotoSource)" />
                    <div class="o-shop-text">
                        <h2>@book.Title</h2>
                        <h6>@book.SubTitle - @book.Level - <b>@book.Price zł.</b></h6>
                        <a href="@Url.Action("AddToCart", "Cart", new { bookId = book.BookId })" class="o-shop-button">+ Add to cart</a>
                    </div>
                </div>
            </a>
        </div>
    }
</div>

Пожалуйста, помогите

Answer 1

Я шаг за шагом просматривал код и нашел решение своей проблемы.

В первом поиске замените id = "booksList"

                    <div class="row" id="booksList">
                            @Html.Partial("_PartialBooksList")
                    </div>

частичное представление, в котором есть был только без id = booksLists.

В следующем поиске не было идентификатора в этом месте, и заменить было нечего.

Answer 2

Я не уверен, что это так, но попробуйте изменить этот код:

$($targetElement).replaceWith($newContent);

На это:

$($targetElement).html($newContent);

Я думаю, что проблема заключается в элементе div с id = "booksList" заменяется после первого поиска. Таким образом, у вас нет этого элемента во втором поиске.