Ajax搜索第二次不起作用（ASP.NET MVC）

Question

我在搜索后更改项目时遇到问题。

我看过类似的线程，但在那儿找不到解决方案：（

好像页面第一次加载良好-第一次加载整个Index.cshtml页面，其中包含所选类别的书籍集合。

页面上有一个搜索引擎-搜索“ manual”后-ajax会用名称中包含“ manual”的元素正确替换元素。

然后，当我第二次在搜索引擎中输入内容（例如“练习”）时，页面内容不再更改。

我尝试进行调试，我发现从数据库中正确下载了新项目-条件“ if（Request.IsAjaxRequest（））”为true，并且这些项目被传递到局部视图-通过“ foreach”循环他们。不幸的是，在_Partial之后，什么都没有发生。

我找不到错误-最奇怪的是，第一个ajax调用工作正常-仅第二个（及其后）不好。

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

<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

我不确定是否是这种情况，但是请尝试更改此代码：

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

为此：

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

我认为问题是在第一次搜索后替换了id =“ booksList”的div元素。因此，第二个搜索中没有此元素。

Answer 2

我逐步查看了代码，找到了解决我问题的方法。

在第一次搜索中，替换id =“ booksList”

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

部分视图中没有id = booksLists。

在下一次搜索中，该位置没有ID，也没有可替换的东西。