I’m trying to get a live search bar to work in .Net Razor with AJAX, and it looks like it returns the whole page, instead of my partial only. Im trying to replace a container with the results of the search.

So, I have this div container with a foreach loop that loops through all the blogposts. This works fine. Now I implemented a search bar in my 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>

This search bar should call this AJAX script that same file:

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

In my Blog.cshtml.cs Model, i have this search function:

        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);
        }

Something is not going well here, I can’t even see the logger info.

It should fill in this partial and return it (_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>
}

The problem is, I suddenly have the whole page returned, instead of just a partial. Also, the search isn’t working at all. It just returns the page and tries to fit it in the container?

Im new to .Net and web development in general and I understand that more info may be needed for any help.