Scenario:
I have a list of companies on a page which provide search and sort function, and I want to make search works together with sort.
Search function is implemented as a text box inside a form.
@using (Html.BeginForm("Index", "Company", new { area = "Customer", orderBy = ViewBag.OrderBy, sortDirection = ViewBag.SortDirection }, FormMethod.Get))
{
<input id="findCriteria" type="text" maxlength="100" name="filter" value="@ViewBag.Filter" />
}
Sort function is implemented as links render in table header
@Html.ActionLink("Company Name", "Index", "Company", new { area = "Customer", filter = ViewBag.Filter, orderBy = "Name", sortDirection = sortDirection }, null)
Company list is a table outside and below the search form.
Form is rendered correctly with query string
<form action="/Customer/Company?orderBy=Name&sortDirection=Descending" method="get">
But when i submit the form, routeValues/query string is lost.
http://localhost:60606/Customer/Company?filter=a
As you can see from the resulted URL, browser has stripped away the query string from the action URL, while we expected it to append to the query string instead.
Solution:
1. Use hidden fields to save route values
Put two hidden fields into search form to store route values, when the form is submitted the name and value of those hidden fields will be appended to the query string.
@Html.Hidden("orderBy", (string)ViewBag.OrderBy)
@Html.Hidden("sortDirection", ViewBag.SortDirection as SortDirection?)
2. Use JQuery to submit the form.
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('form').submit(function () {
var $form = $(this);
if ($form.valid()) {
window.location.href = $form.attr('action') + '&filter=' + $('[name=filter]').val();
}
return false;
});
</script>
