I have an input box to search ...

Html :

<form id="searchForm" asp-controller="Product" asp-action="SearchProduct" method="get">

This input performs search in two ways:

1- After pressing the Enter key 2- After the click on the "a" tag

In the first step, the address is displayed in the image below :

In the second step, the address is displayed in the image below :

After searching again, the address is displayed in the image below

JavaScript :

 $('.txt-search-story').click(function () {
    var span = $(this).find('span');
    var txtspan = span.text();

     $.ajax({
         url: "/Product/GetTextSearch",
         type: 'Get',
         data: { "q": txtspan },
         success: function (response) {
             window.location.href = response.redirectToUrl;
         }
    });
});

Controller one :

[Route("/search/{**q}")] 
public async Task<IActionResult> SearchProduct(string q, int page = 1)
    {
        if (q != null)
        {                
            var searchProduct = await _product.SearchProduct(q, skip, countproduct);
            ViewBag.searchtext = q;

            return View(searchProduct);
        }                    
    }

 

Controller two for Ajax:

 public IActionResult GetTextSearch(string q)
    {
        return Json(new { redirectToUrl = Url.Action("SearchProduct", "Product", new { q = q }) });
    }

I want the second address to be like the first address What should I do?