MVC Ajax.BeginForm - Update URL in Browser after successful Get Request

Question

I have an Ajax form, something like this:

@using (Ajax.BeginForm("AjaxSerchResult", "Search", new { area = string.Empty }, new AjaxOptions() { HttpMethod = "Get", UpdateTargetId = "Results", LoadingElementId = "Loading" }, new { id = "Search" })
{
//Fields go here
}

The question is: how to update the browser url with params i send using AJAX?

Answer 1

if you want to use Ajax.BeginForm(), you would use "OnSuccess" attribute and benalman's plugin, as without javascript you will not able to change url

demo of url changing (jQuery 1.9 required)

@using(Ajax.BeginForm(
      "AjaxSerchResult",
      "Search",
       new { area = string.Empty },
       new AjaxOptions(){
                         HttpMethod = "Get",
                         UpdateTargetId = "Results",
                         LoadingElementId = "Loading",
                         OnSuccess = "changeUrl(data)"
                        },
       new { id = "Search" }))
       {
          //Fields go here
       }

and javascript:

    <script>
    function changeUrl(data) {
        //if you are using benalman's plugin with jQuery 1.9
        location.hash = "#my_hash";
    }
    </script>

Note: but due to using $.browser (that was already removed from jQuery 1.9) in the benalman's plugin, i would recommend to use window.location.hash = "#my_url"; or window.location.replace("#my_url"); instead of location.hash = "#my_url";