MVC - Route with querystring

Question

After following this MVC 4 tutorial series I was trying some of the stuff myself. I started by trying to make the searchfilter url friendly. The following code is what I'm using at the moment:

Global.asax

 public static void RegisterRoutes(RouteCollection routes)
        {
            routes.MapRoute(
               name: "MovieSearch",
               url: "Movies/SearchIndex/{movieGenre}/{searchString}",
               defaults: new { controller = "Movies", action = "SearchIndex", movieGenre = UrlParameter.Optional, searchString = UrlParameter.Optional }
           );

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );           
        }
protected void Application_Start()
        {
                RegisterRoutes(RouteTable.Routes);
        }

SearchIndex.cshtml

<p>
    @Html.ActionLink("Create New", "Create")

    @using (Html.BeginForm("SearchIndex", "Movies", FormMethod.Get))
    {   
         <p>  Genre: @Html.DropDownList("movieGenre", "All")
              Title: @Html.TextBox("searchString")<br /> 
         <input type="submit" value="Filter" /></p>
        }
</p>

MoviesController.cs

        //
        // GET: /Movies/SearchIndex/Comedy/Sherlock
        public ActionResult SearchIndex(string movieGenre, string searchString)
        {
            var GenreList = new List<string>();

            var GenreQry = from d in db.Movies
                           orderby d.Genre
                           select d.Genre;

            GenreList.AddRange(GenreQry.Distinct());
            ViewBag.movieGenre = new SelectList(GenreList);

            var movies = from m in db.Movies
                         select m;

            if (!string.IsNullOrEmpty(searchString))
            {
                movies = movies.Where(s => s.Title.Contains(searchString));
            }

            if (string.IsNullOrEmpty(movieGenre))
            {
                return View(movies);
            }
            else
            {
                return View(movies.Where(m => m.Genre == movieGenre));
            }
        }

Now everything goes well when I put the following url in my adressbar: /Movies/SearchIndex/Comedy/Sherlock

But when I filter with the "filter" button in the SearchIndex.cshtml I get the following url: /Movies/SearchIndex?movieGenre=Comedy&searchString=Sherlock

Anyone knows the problem here?

Answer 1

When you use form method="get", your browser will join your form fields together into a long querystring. This has nothing to do with MVC itself. A couple of solutions:

1. Handle the form submission event client-side, and re-create the url as you see fit.
2. Create a custom route provider that 301 redirects your querystring back to a "friendly" url.

Answer 2

Routes are generated server-side by ASP.NET MVC: When you press the filter button, the browser is creating the GET request: It doesn't know about the routes, and so it uses the query string format.