Razor Pages on Asp.Net Core - Added Razor Page but cant get page to show

Question

I am still figuring a lot out on Razor Pages for.Net Core and am a little stuck on something. I have added a new Razor Page:

Which lives in the Pages folder:

On an existing page I have added an Input and a button to initiate a Search:

Which onClick calls the following Javascript function:

In the below screenshot, OnGetAsync method is hit when I put a breakpoint in, and can see the input value SearchValue is populated:

However I would expect the browser to then display the Search.cshtml page. Instead the browser just remains on the current index.cshtml page.

Am I missing something or am I just doing this incorrectly?

Answer 1

However I would expect the browser to then display the Search.cshtml page. Instead the browser just remains on the current index.cshtml page.

That is because $.get will not call back the result only if you did something in success function.

You need change jquery like below:

@page
@model IndexModel

<input id="inpSearchMembers" placeholder="Search for a Member..." />
<input id="btnSearchMembers" type="button" value="Search"  onclick="SearchMembers()" />
@section Scripts
{
    <script>
        function SearchMembers() {
            var searchValue = $("#inpSearchMembers").val();
            debugger;
            $.get("/Search", { searchValue: searchValue }, function (data) {
                window.location.href = "/Search";   //add this...
            });
        }
    </script>
}

BTW, You create a button which is disabled ,it is impossible to click it and trigger the onclick event.

Actually,I think you could use form submit without using the jquery,change your Index.cshtml like below:

@page
@model IndexModel
<form asp-page="Search" method="get">
    <input name="searchValue" placeholder="Search for a Member..." />
    <input type="submit" value="Search" />
</form>

Answer 2

In your page controller you should have an Action which returns the View:

public IActionResult Search()
{
    return View();
}