Razor page issue .net 8

This is a Razor page issue. I have simple text box and corresponding search button created in the razor page, say it as index.cshtml.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search Button Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            // Disable the button initially
            $('#searchButton').prop('disabled', true);
 
            // Enable button if text box has value
            $('#searchInput').on('input', function () {
                const inputValue = $(this).val();
                if (inputValue.trim() !== "") {
                    $('#searchButton').prop('disabled', false);
                } else {
                    $('#searchButton').prop('disabled', true);
                }
            });
        });
    </script>
</head>

and simple onGet method , which contains nothing.

The issue is: the search button is only enabled when user enters the text, which is working fine. But when the user press forward or back button of browser and reach to same page, button got disabled again, although it contains the data in the text box.

How can I resolve this?

Solution

Listening to pageshow, popstate, visibilitychange, and onpageshow events can solve the problem that the browser may not execute JavaScript code when returning to the previous page.

Here is my working sample.

Index.cshtml

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search Button Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // Define checkInput in the global scope
        function checkInput() {
            const inputValue = $('#searchInput').val();
            if (inputValue.trim() !== "") {
                $('#searchButton').prop('disabled', false);
            } else {
                $('#searchButton').prop('disabled', true);
            }
        }

        $(document).ready(function () {
            // Bind the input event
            $('#searchInput').on('input', checkInput);

            // Initial check on page load
            checkInput();
        });

        // pageshow event with event.persisted
        $(window).on('pageshow', function (event) {
            console.log('pageshow event fired');
            if (event.persisted) {
                console.log('Page was restored from bfcache');
            }
            checkInput();
        });

        // popstate event
        $(window).on('popstate', function (event) {
            console.log('popstate event fired');
            checkInput();
        });

        // visibilitychange event
        document.addEventListener('visibilitychange', function () {
            if (document.visibilityState === 'visible') {
                console.log('visibilitychange event fired');
                checkInput();
            }
        });

        // window.onpageshow event
        window.onpageshow = function (event) {
            console.log('onpageshow event fired');
            checkInput();
        };
    </script>


</head>

<body>
    <form method="get">
        <input type="text" id="searchInput" name="searchQuery" value="@Model.SearchQuery" />
        <button type="submit" id="searchButton" disabled>Search</button>
    </form>
</body>

Index.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WebApplication4.Pages
{
    public class IndexModel : PageModel
    {
        private readonly ILogger<IndexModel> _logger;
        public string SearchQuery { get; set; }

        public IndexModel(ILogger<IndexModel> logger)
        {
            _logger = logger;
        }

        public void OnGet()
        {
            SearchQuery = Request.Query["searchQuery"];
        }
    }
}