实时搜索返回整个页面

Question

我正在尝试使用 AJAX 在 .Net Razor 中使用实时搜索栏，看起来它返回整个页面，而不是仅返回我的部分页面。我正在尝试用搜索结果替换容器。

所以，我有一个带有 foreach 循环的 div 容器，可以循环遍历所有博客文章。这很好用。现在我在 Blog.cshtml 中实现了一个搜索栏：

<div class="search-bar">
    <form class="search-form" onsubmit="event.preventDefault();" role="search">
        <label for="search" class="search-label">Search for stuff</label>
        <input id="search" class="search-input" type="search" placeholder="Search..." autofocus required oninput="performSearch()"/>
    </form>
</div>

此搜索栏应将此 AJAX 脚本调用为同一文件：

<script>
    function performSearch() {
        var searchQuery = document.getElementById("search").value;

        $.ajax({
            url: '@Url.Page("Blog", "OnGetSearch")',
            method: 'GET',
            data: { query: searchQuery },
            success: function (response) {
                console.log("AJAX request successful. Response:", response);
                $('.blog-content-container').html(response);
            },
            error: function () {
                console.error("An error occurred while searching.");
                $('.blog-content-container').html('<p>An error occurred while searching.</p>');
            }
        });
    }
</script>

在我的Blog.cshtml.cs模型中，我有这个搜索功能：

        public IActionResult OnGetSearch(string query)
        {
            BlogPostsFiltered = _context.BlogPosts
                .Where(post => post.Title.Contains(query, StringComparison.OrdinalIgnoreCase) ||
                               post.Content.Contains(query, StringComparison.OrdinalIgnoreCase))
                .ToList();

            _logger.LogInformation("Search query: {Query}, Filtered results count: {Count}", query, BlogPostsFiltered.Count);
            return Partial("_BlogPostsPartial", BlogPostsFiltered);
        }

这里有些事情不太顺利，我什至看不到记录器信息。

它应该填写此部分并返回它（_BlogPostsPartial.cshtml）

@model IList<Myportfolio.Models.BlogPost>

@foreach (var post in Model)
{
    <div class="blog-card">
        <div class="blog-card-content">
            <div class="blog-card-img"></div>
            <div class="blog-card-txt-container">
                <h1 class="blog-card-title">@post.Title</h1>
                <h4 class="blog-card-date">@post.CreatedAt.ToString("MMMM dd, yyyy").ToUpper()</h4>
                <h5 class="blog-card-summary">@post.Content</h5>
            </div>
        </div>
    </div>
}

问题是，我突然返回了整个页面，而不是部分页面。此外，搜索根本不起作用。它只是返回页面并尝试将其放入容器中？

我对 .Net 和 Web 开发总体来说是新手，我知道可能需要更多信息才能获得帮助。

Answer 1

Ajax 代码：

function performSearch() {
var searchQuery = document.getElementById("search").value;

$.ajax({
    //url: '@Url.Page("Index", "Search")',
    url: '?handler=Search',
    method: 'GET',
    data: { query: searchQuery },
    success: function (response) {
        console.log("AJAX request successful. Response:", response);
        $('.blog-content-container').html(response);
    },
    error: function () {
        console.error("An error occurred while searching.");
        $('.blog-content-container').html('<p>An error occurred while searching.</p>');
    }
});
}