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:

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

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.

score 8 · Accepted Answer · answered Oct 10 '11 at 17:59

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

}

score 3 · Answer 2 · answered Oct 06 '11 at 19:57

3

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.

answered Oct 06 '11 at 19:57

Darin Dimitrov

1,023,142
271
3,287
2,928

I have the exact setup as you mentioned in your code, except the form is submitted via a Post (not Get). So, if I change the form method to 'Get'... I would lost the existing querystring parameters in the url other than the dropdown values. Correct? – andytech Oct 06 '11 at 20:46
@andytech, that's correct. If you want to preserve existing query string parameters instead of calling `.submit()` to trigger form submission you could alter the `window.location.href` by appending or modifying a query string parameter containing the value of the dropdown. Here's a nice thread about manipulating query strings in javascript: http://stackoverflow.com/questions/901115/get-query-string-values-in-javascript – Darin Dimitrov Oct 06 '11 at 20:47

score 0 · Answer 3 · edited Feb 07 '17 at 21:48

0

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 () {

    }
  }

edited Feb 07 '17 at 21:48

marc_s

732,580
175
1,330
1,459

answered Oct 06 '11 at 19:48

Rikard

3,828
1
24
39

Rikard... with due respect..the problem is not posting but reloading the page user is currently on with modified querystring values. I do however use a similar jQuery function as you mentioned to submit my form. – andytech Oct 06 '11 at 20:49
If you from the Controller returns a View instead of a PartialView, I think you will get the querystring that you want. – Rikard Oct 06 '11 at 20:57

MVC 3 Reload current page with modified querystring values

3 Answers3