MVC 3 Reload current page with modified querystring values

Question

Background:

I have an MVC layout (master) view which uses @Html.RenderAction to display a dropdown in the left side navigation panel. This dropdown will be displayed on all the pages of the site. The dropdown is wrapped in a form element and on change of the dropdown the form is posted.

Question:

Now, once the form is posted, I need to reload the contents of the current page (whatever page the user is currently on...) with the value of the dropdown attached in the querystring. This would mean replacing the value which might already be there in the querystring from a previous selection.

Example:

1. The user navigates to the Home page of the website:

Url: /Home/?dropdownvalue=blue

At this point the dropdown displays 'Blue' as selected. The user changes the value in the dropdown to 'Red'. I need to reload the page with the following url -

/Home/?dropdownvalue=red

1. The user moves to another page in the site:

Url: /CustomerFavorite/?dropdown=red

Change the value in the dropdown from 'Red' to 'Green'.

The 'CustomerFavourite' page should be reloaded with 'Green' in querystring.

I apologize for the lenghty post. But, thought of providing some extra information to clarify the issue.

Thanks.

Answer 1

Thanks to Darin for providing the link for javascript manipulation of the querystring. But, I wanted a server side solution so here's how I implemented it -

public ActionResult _ColorSelection(ColorModel model)
{
    string selectedColor = model.Color.Value;

    // Modify Querystring params...

    NameValueCollection querystring = 
            HttpUtility.ParseQueryString(Request.UrlReferrer.Query); // Parse QS

    // If Querystring contains the 'color' param, then set it to selected value
    if (!string.IsNullOrEmpty(querystring["color"]))
    {
        querystring["color"] = selectedColor;
    }
    else  // Add color key to querystring
    {
        querystring.Add("color", selectedColor);
    }

    // Create new url
    string url = Request.UrlReferrer.AbsolutePath 
                         + "?" + querystring.ToString();

    return Redirect(url); // redirect

}

Answer 2

You may try using a GET method of the form in which the drop down is wrapped:

@using (Html.BeginForm(null, null, FormMethod.Get))
{
    @Html.Action("SomeActionThatRendersTheDropDown", "SomeController")
}

or maybe the entire form is wrapped inside the action:

@Html.Action("SomeAction", "SomeController")

and then in javascript subscribe to the change event of the dropdown and trigger the submission of the form:

$(function() {
    $('#DropDownId').change(function() {
        $(this).closest('form').submit();
    });
});

Because you have used GET request, this will automatically reload the current page sending the value of the dropdown in the query string.

Answer 3

If you are using jQuery you can create a function that will post the selected value in your list.

$(document).ready(function () {
  $("#ListId").change(function () {
    $.ajax({
    url: "CustomerFavorite/Edit",
    type: "POST",
    data: "colour=" + $("#ListId").val(),
    success: function (result) {
        //Code to update your page
        }
    },
    error: function () {

    }
  }