ASP.NET MVC Query string not showing in Url

Question

@using (Ajax.BeginForm("Search", "Filter", new { Area = "Music" }, new AjaxOptions { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "body-wrapper", OnSuccess = "updateHistory" }, new { @id = "search" }))
{
      <div>
           <i class="fa fa-search"></i>
           <input id="searchString" name="searchString" type="search" placeholder="Search">
      </div>
}

Area Registration:

 context.MapRoute(
     "Music_default",
     "Music/{controller}/{action}/{category}",
     defaults: new { controller = "Home", action = "Index", category = UrlParameter.Optional }
 );

Global route config:

routes.MapRoute(
     name: "Default",
     url: "{area}/{controller}/{action}/{category}",
     defaults: new { area = "Music", controller = "Home", action = "Index", category = UrlParameter.Optional }
).DataTokens.Add("area", "Music");

Controller:

public ActionResult Search(string searchString)
{
    //Do search stuff
}

Whenever the user types into the search input and submits it the Url is always: /Music/Filter/Search , instead of /Music/Filter/Search/{queryStringHere} .

How do I show the query that the user typed in into the url? The searchString is getting binded correctly, but just not showing in the url.

Here's what I have tried in the area registration, however it doesn't map to this one for some reason:

context.MapRoute(
     "Music_Search",
     "Music/Filter/Search/{searchString}",
     defaults: new { controller = "Filter", action = "Search" }
);

Here is the generated Url according to RouteDebugger when I type in the search term 'Maid':

Generated URL: /User/Filter/Search?searchString=Maid&X-Requested-With=XMLHttpRequest&_=1462458566832

Edit: RouteDebugger image, it doesn't call the correct route config because it doesn't seem to append the query string to RouteData:

Answer 1

A browser knows nothing about your route definitions (which is server side code) and values in a <form> with method="get" are always added as query string values.

It is simply not possible to generate User/Filter/Search/Maid unless you were to add the route values in the BeginForm() method or you were to use javascript/jquery to update the action attribute of the of the <form> before submitting the form.

Answer 2

Try this. Change your Route to accept the optional searchString parameter:

routes.MapRoute(
     name: "Default",
     url: "{area}/{controller}/{action}/{category}/{searchString}",
     defaults: new { area = "Music", controller = "Home", action = "Index", category = UrlParameter.Optional, searchString = UrlParameter.Optional }
).DataTokens.Add("area", "Music");

Then in your Ajax.BeginForm pass the searchString as third parameter :

@using (Ajax.BeginForm("Search", "Filter", new { Area = "Music" }, new AjaxOptions { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "body-wrapper", OnSuccess = "updateHistory" }, new { @id = "search" }))
{
  // Or pass the value as input
  <input type="text" id="searchString" name="searchString" value="@item.Quantity"/>
 <input type="submit" />
}