MVC dropdownlist filter onchange - asp.net-mvc

Question

I have an index view with dropdownlist filter. Whenever a new item is selected from the dropdownlist, the index page will display data based on groupid. Here is the view
#using (Html.BeginForm("index", "service"))
{
<div class="row">
<div class="navbar navbar-default">
<div class="navbar-header" style="margin:10px 0px 5px 5px">
<div class="col-lg-12">
<a id="btnSAdd" class="btn btn-info glyphicon glyphicon-plus" href="/AppName/Service/Create"> Create New </a>
<button type="submit" id="btnSSave" class="btn btn-info glyphicon glyphicon-floppy-save"> Save </button>
</div>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse" style="margin:10px 0px 5px 5px">
<div class="input-group">
<span class="navbar" style="font-family:'Californian FB';font-weight:bold">Select a Menu:</span>
#Html.DropDownList("GroupID", new SelectList(ViewBag.TopMenuList, "GroupID", "GroupName"),
new { #class = "btn btn-info dropdown-toggle", #style = "border-color:grainsboro", #onchange = "window.location = 'service/index?groupid=' + this.value" })
</div>
</div>
</div>
</div>
<div class="row">
<div id="drag" class="panel-body">
<table class="table table-hover" style="width:auto" id="sTable">
<colgroup>
<col width="30" />
<col width="250" />
<col width="250" />
<col width="200" />
</colgroup>
<thead>
<tr>
<th> </th>
<th>Parent Group</th>
<th>Service Name</th>
<th>Service Description</th>
</tr>
</thead>
<tbody>
#for (int i = 0; i < Model.Count; i++)
{
<tr class="orderedrow">
<td class="rowhandler">
<div class="drag rowdip">#Html.HiddenFor(model => model[i].ServiceID)</div>
</td>
<td>#Html.DropDownListFor(model => model[i].GroupID, new SelectList(Model[i].ParentServiceGroupList, "GroupID", "GroupName", Model[i].GroupID))</td>
<td>#Html.EditorFor(model => model[i].ServiceName, new { htmlAttributes = new { #style = "width:250px" } })</td>
<td>#Html.EditorFor(model => model[i].ServiceDescription, new { htmlAttributes = new { #style = "width:250px" } })</td>
</tr>
}
</tbody>
</table>
</div><!--End Div drag-->
</div><!--End of row-->
}
RouteConfig.cs
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
The problem I am having is the filter works only the first time as
http://localhost/AppName/service/index?groupid=4
. The second time, it seems to append my url as
http://localhost/AppName/service/service/index?groupid=5
How do I fix this?
Thanks

Answer 1

Try to change this
#onchange = "window.location = 'service/index?groupid=' + this.value"
to this
#onchange = "window.location = '/service/index?groupid=' + this.value"