Q:

Multiple routing parameters with view model in asp .net mvc

I am trying to experiment with routing and generate a seo-friendly url for searches.
Currently I have viewmodel as below:
public class SearchFormViewModel
    {
        //[Required(ErrorMessage="Keyword is required")]
        public string Keyword { get; set; }

        public IEnumerable<SelectListItem> TransactionTypes { get; set; }
        public int TransactionTypeId { get; set; }

        public IEnumerable<SelectListItem> RoomLookUps { get; set; }
        public int? MinBeds { get; set; }
        public int? MaxBeds { get; set; }
        ...
    }

When this form gets submitted it goes to a controller:
    public ActionResult SearchProperties(SearchFormViewModel viewModelInp)
    {
         // Perform search;
    }

and the search results are displayed. However, the url that gets generated is as follows:
http://localhost:49191/search/searchproperties?Keyword=London&TransactionTypeId=2&MinBeds=&MaxBeds=&MinPrice=&MaxPrice=

I require a URL which looks like
http://localhost:49191/flats-to-rent/London?MinBeds=&MaxBeds=&MinPrice=&MaxPrice=

I am not sure how to pass the parameters from ViewModel to Route
the following route doesn't work:
routes.MapRouteLowercase(
                "Search-Properties-Buy",
                "flats-to-rent/{Keyword}",
                new { controller = "Search", action = "SearchProperties", Keyword = UrlParameter.Optional },
                new { TransactionTypeId = "2" }
            );

I have tried various other things but none of it seems to work and I get a 404 error.
I am unable to find any example which might help me.

A:

Well, I try to give you a solution.
Place an input field that contains a base route generated by asp.net mvc:
<input type="hidden" value="@Url.Action("SearchProperties", new { Keyword = "{Prototype}" })" id="BaseSearchURL" />

As you can see, I've specified a Keyword with "{Prototype}" value, this instruct asp.net mvc to provide your configured custom route, and, after render, in the page HTML you should see something like this:
<input type="hidden" value="server/flats-to-rent/{Prototype}" id="BaseSearchURL" />

After, you can use jquery to override the submit button pressed event and you can write custom code:
$(document).ready(function() {
    $('input[type=submit]').submit(function() {
        var baseURL = $('#BaseSearchURL').val();
        var keyword = $('input[name=Keyword]');
        var action = baseURL.replace('{Prototype}', keyword);
        var form = $(this).parents('form');
        // Get all parameter except Keyword
        var params = $('input[name!=Keyword], select, textarea', form).serialize();
        action += "?" + params;
        document.location = action;
    });
});

Steps are easy:

Get routing template form previous generated
Get keyword that must be replaceted to "{Prototype}";
Get form parameters and append these to the action
Invoke document.location to start specific URL.

