Remove "X-Requested-With" from the query string URL during ajax request

Question

The problem I am facing is that it &X-Requested-With=XMLHttpRequest&_=1462736803425continues to join my url because it is different from the query string. Is there a way I can prevent it from becoming a query string and doing Ajax.BeginFormwithout doing a “hack”?

@using (Ajax.BeginForm("Search", "Filter", new { Area = "Music" }, new AjaxOptions { HttpMethod = "Get", InsertionMode = InsertionMode.Replace, UpdateTargetId = "body-wrapper", OnSuccess = "updateHistory" }, new { @id = "search-form" }))
{
       <div>
           <i class="fa fa-search"></i>
           <input type="search" placeholder="Search" id="search" name="searchString" />
       </div>
}

public ActionResult Search(string searchString)
{
    //do stuff
    return PartialView();
}

On the partial view page, I get the path and request:

@Html.HiddenFor(x => Request.Url.PathAndQuery)

Value Request.Url.PathAndQuery:http://localhost:1526/Music/Search?searchString=maid&X-Requested-With=XMLHttpRequest&_=1462736803425

And then update the url using History.js:

function pushState(target) {
    manualStateChange = false;
    History.pushState(null, null, $("#Request_Url_PathAndQuery").val());
}

Answer 1

, , , , , - , , . url, , xhr .

function pushState(target) {
    //Remove the queryString parameter of xhr that gets appened in 117 of ajax-unobtrusive.js
    var index = target.indexOf("?X-Requested-With");
    if (index === -1) 
        index = target.indexOf("&X-Requested-With");

    target = target.replace(target.substring(index), "");

    manualStateChange = false;
    History.pushState(null, $("input#Title").val(), target);
}

. :

@using (Html.BeginForm("Index", "Search", new { area = "Media" }, FormMethod.Get, new { @id = "search", data_url = Url.Action("SetSearchTags", "Search", new { Area = "Media" }) }))
{
    <i class="fa fa-search"></i>
    <input type="search" placeholder="Search" id="search" name="searchString" />

    <div id="filter" name="filter">
        <span><strong>Syntax</strong></span>

        @foreach (var item in SearchContext.SearchFilters)
        {
            <div id="filter-@item">
                @Html.DisplayFor(x => item)
            </div>
        }
    </div>
}

$("form#search").submit(function (event) {
    event.preventDefault();

    var $form = $(this);
    var searchString = $form.find("input[type='search']").val();
    var url = $form.attr("action");
    var method = $form.attr("method");

    $.ajax({
        url: url,
        data: { searchString: searchString },
        method: method,
        success: function (data) {
            $('#body-content').html(data);
            updateHistory(true);
        }
    });
});

function updateHistory(useQuery) {
    var path = (useQuery === true) ? $("#Request_Url_PathAndQuery").val() : $("#Request_Url_AbsolutePath").val();

    pushState(path);
};

, , , jquery .

Answer 2

"jquery-ajax-unobtrusive.js" , . 117:

options.data.push({ name: "X-Requested-With", value: "XMLHttpRequest" });

. , , HTTP-, , .

, beforeSend ajax. , :

function removeExtraData(jqXHR, settings) {
  if (settings.data.hasOwnProperty('X-Requested-With')) {
    delete settings.data['X-Requested-With']; // or settings.data['X-Requested-With'] = undefined;
  }
}

, data-ajax-begin HTML removeExtraData. , , WebForms, .

URL- _=1462736803425 jQuery, . , , HTML- data-ajax-cache true. , , .

Answer 3

, , URL-.

Application_BeginRequest() context.RewritePath() .

Something like that:

    protected override void Application_BeginRequest(object sender, EventArgs e)
    {
        base.Application_BeginRequest(sender, e);
        var urlpath = HttpContext.Current.Request.Url.PathAndQuery; //Modify this based on condition
        if(<condition>)
            Context.RewritePath(<updatedpath>);
    }

This may solve your problem, but I can’t say if this is good.