How to use @Html.BeginRouteForm for search form

Question

I have form to search products:

@using (Html.BeginForm("Search", "Results", FormMethod.Get, htmlAttributes: new { @class = "navbar-form navbar-left", role = "search" }))
{
    <div class="form-group">
        <input type="text" name="txtSearch" class="form-control" placeholder="Products name..." />
        @Html.DropDownList("CategoryId", null, "Select category", new { @class = "form-control" })
        <select class="form-control" id="FromPrice" name="FromPrice">
            <option value="0">From price</option>
            <option value="2000000">2,000,000d</option>
            <option value="4000000">4,000,000d</option></select><select class="form-control" id="ToPrice" name="ToPrice">
            <option value="0">To price</option>
            <option value="2000000">2,000,000d</option>
            <option value="4000000">4,000,000d</option>
            <option value="6000000">6,000,000d</option>                    
        </select>
        <input type="submit" class="btn btn-danger form-control" value="Search" />
    </div>
}

And a route in RouteConfig file

routes.MapRoute(
    name: "SearchForm",
    url: "ket-qua/{txtSearch}-{CategoryId}-{FromPrice}-{ToPrice}",
    defaults: new { controller = "Results", action = "Search"}
)

How can i call the route "SearchForm" when i submit search form above with all of parameter.

Answer 1

Your routing code will like this.

     routes.MapRoute(
       name: "SearchForm",
       url: "ket-qua/",
       defaults: new { controller = "Results", action = "Search"}
      )
  

In your view code it will be like this.

@using (Html.BeginRouteForm("SearchForm", FormMethod.Get, htmlAttributes: new { @class = "navbar-form navbar-left", role = "search" }))
{

Your controller code will be like this way.

[ValidateInput(false)]
public ActionResult Search(SearchModel model)
{

}

public class SearchModel
{
      public string txtSearch {get;set;}
      ----------------
}

If you want your url like that, you have to do that using javascript. And have to change controller code and view code.

<input type="button" class="btn btn-danger form-control" value="Search" onclick="newDoc()" />

function newDoc() {
    //here you bind all your data
    window.location.assign("http://----------")
}