Html.BeginForm loses routeValues with FormMethod.GET

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&amp;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>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s