how to make custom URL with custom routing in MVC - asp.net-mvc

Question

I have problem to make custom url in mvc. I want to make url like this one:
http://www.domainname.com/directory/bysearch/value1/value2
but its make like this
http://www.domainname.com/directory/bysearch?txtaddress=value1&searchString=value2
and
RouteConfig.cs code
routes.MapRoute(
name: "Directory",
url: "Directory/{qualifier}/{v1}/{v2}/{v3}/{v4}/{v5}/{v6}/{v7}/{v8}",
defaults: new
{
controller = "Directory",
action = "index",
qualifier = UrlParameter.Optional,
v1 = UrlParameter.Optional,
v2 = UrlParameter.Optional,
v3 = UrlParameter.Optional,
v4 = UrlParameter.Optional,
v5 = UrlParameter.Optional,
v6 = UrlParameter.Optional,
v7 = UrlParameter.Optional,
v8 = UrlParameter.Optional
});
routes.MapRoute(
name: "DirectorySerach",
url: "Directory/bysearch/{v1}/{v2}",
defaults: new
{
controller = "Directory",
action = "Search",
v1 = UrlParameter.Optional,
v2 = UrlParameter.Optional
});
Controller
public ActionResult Index(string qualifier, string v1, string v2, string v3, string v4, string v5, string v6, string searchString, int page = 1)
{
// code logic here
return View();
}
public ActionResult Search(string v1 = null,string v2 = null)
{
//code logic here
return View();
}
View
#using (Html.BeginForm("search","Directory", FormMethod.Get))
{
<div class="form-group">
<div class="c-checkbox">
<input id="chkOnline" name="chkOnline" class="c-check" type="checkbox">
<label for="chkOnline" class="c-font-thin c-font-17">
<span></span>
<span class="box"></span> Online
<span class="check"></span>
</label>
</div>
</div>
<div class="form-group">
#Html.TextBox("txtaddress", null, new { #class = "form-control c-square c-theme input-lg", #placeholder = "Address OR ZIP/Postal Code OR City" })
</div>
<div class="input-group input-group-lg c-square">
#Html.TextBox("searchString", null, new { #class = "form-control c-square c-theme input-lg", #placeholder = "Enter Keyword" })
<span class="input-group-btn">
<button class="btn c-theme-btn c-btn-square c-btn-uppercase c-font-bold" type="submit">Go!</button>
</span>
</div>
}
please help/guide me, where i am wrong or what is the problem. and how to resolve.
i appreciate your value able time and effort. thanks in advance.

Answer 1

If you want to make clean URl then you need to craete URl manually, As Form Submit will always create query string.
So remove your form and replace button with hyperlink. and write click event on link.
#Html.TextBox("v1", null, new { })
#Html.TextBox("v2", null, new { })
GO
Now Write a function which will create URl
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$('#btnSearch').on('click',function(){
var baseUrl = '#Url.Action("Search", "Directory")';
var gettext1= $('#v1').val();
var gettext2= $('#v2').val();
if(gettext1){
baseUrl += '/'+gettext1;
}else{
baseUrl += "/0";
}
if(gettext2){
baseUrl +="/"+ gettext2;
}else{
baseUrl += "/0";
}
location.href=baseUrl;
});
});
</script>
here you need to handle 0. as if user doesn't enter anything in textbox then I'm passing 0.