Routing Issue on asp.net mvc 5 GET

Question

I am trying to get my product search URL to look like "Products/Search/{search term here}".

I am using attribute based routing and my controller action looks like this:

[HttpGet]
[Route("Products/Search/{searchTerm?}", Name="ProductSearch")]
public ActionResult Search(string searchTerm = "")
{
    return View();
}

I have tried using the HTML Helper for BeginForm and BeginRouteForm (shown below) but have not had luck with either. The right action is being called, but my URL looks like "Products/Search?searchTerm"

BeginRouteForm

    @using (Html.BeginRouteForm("ProductSearch", new { searchTerm = "" }, FormMethod.Get, new { Class = "navbar-form navbar-right", role = "search" }))
    {
        <div class="form-group">
            @Html.TextBox("searchTerm", null, new { Class = "form-control", placeholder = "Item # or Name" })
        </div>
        <button type="submit" class="btn btn-default">Search</button>
    }

BeginForm

        @using (Html.BeginForm("Search", "Products", new { searchTerm = "" }, FormMethod.Get, new { Class = "navbar-form navbar-right", role = "search" }))
        {
            <div class="form-group">
                @Html.TextBox("searchTerm", null, new { Class = "form-control", placeholder = "Item # or Name" })
            </div>
            <button type="submit" class="btn btn-default">Search</button>
        }

I have gone through debugging and the right route is selected, the URL is just not displaying how I wanted it to. What am I missing?

Answer 1

Here is the solution I suggest -

You have the following controller Action -

    [HttpGet]
    public ActionResult Search(string searchTerm = "")
    {
        return View();
    }

Let the view be -

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>

    $(function () {
        $('#click').click(function (e) {

            var name = $("#search").val();
            var url = '@Url.Action("Search", "Action")' + '/' + name;
            window.location.href = url;

        });
    });

</script>

<input type="text" name="searchText" id="search"/>
<input type="button" value="click" id="click"/>

And when you click the button -

Do not forget to have proper route to be added on to the route configuration -

routes.MapRoute(
       name: "searchaction",
       url: "{controller}/{action}/{searchTerm}",
       defaults: new { controller = "Action", action = "Search" }
    );

Answer 2

I don't think that BeginRouteForm works the way that you're expecting it to. According to the documentation , all that the method does is insert a <form> using the arguments provided. If you had provided something other than an empty string for the route value such as , new { searchTerm = "somesearchterm" } , you would see that show up in the Url as "/product/search/somesearchterm". As it is now, however, the form will be processed as normal, putting the search term on the Url as a normal query parameter.

Answer 3

The problem you think you are experiencing isn't because of anything about ASP.Net MVC. All Html Forms that use the method GET will translate all input elements into QueryString parameters. This is just a W3C standard .

If you want this to work, you'll have to write jQuery to throw an event before the form is submitted, take the text value from the input store it temporarily, empty the input box, and then update the action by appending the temporary value.