why if(Request.IsAjaxRequest) is false

Question

I wanted to have a hyperlink which when clicked opens in same page without the complete page being refreshed instead of opening different link. In my controller I have following function

public ActionResult PrivacyPolicy()
{
    if (Request.IsAjaxRequest())
    {
       return PartialView();
    }
       return View();
}

when i run the the program and insert a break point at return view(); I realise that my program always returns view() instead of PartialView();

here is the index.cshtml code

@section head{

    <script type="text/javascript"
            src="@Url.Content("~/scripts/AjaxDemo.js")"></script>
}
@Html.ActionLink("Show the Privacy Policy", "PrivacyPolicy", null, new{id="privacyLink"})

<div id="privacy"></div>

in the partial view PrivacyPolicy I just have few texts.

and the AjaxDemo.js looks like this

$(document).ready(function () {
    $('#privacyLink').click(function (event) {
        event.preventDefault();
        var url = $(this).attr('href');
        $('#privacy').load(url);
    });
});

why doesn't my program return partial view? or why is it not taking the ajax request? Shouldn't my program open the link in same index page(CustomAjax), if the javascript in my browser is enables?

See these posts : http://stackoverflow.com/questions/5164540/why-doesnt-request-isajaxrequest-work-in-asp-net-mvc-3 http://stackoverflow.com/questions/9607164/request-isajaxrequest-never-returns-true-in-mvc3 — gideon, May 15 '13 at 10:00

Kenneth · Answer 1 · 2013-05-15T11:45:37.083

if you do a jQuery load, it will actually execute a normal request and then load the resulting data inside the given element.

You should remove the custom JavaScript code, use the built-in ajax helpers and specify the updateTargetID in the AjaxOptions:

    @Ajax.ActionLink("Show the Privacy Policy", "PrivacyPolicy", null, new{id="privacyLink"}, new AjaxOptions {UpdateTargetId = "privacy"})

    <div id="privacy"></div>

EDIT: Adding some more information about IsAjaxRequest():

When you make an Ajax request you're supposed to set the X-Requested-With HTTP header to XMLHttpRequest'. Internally,IsAjaxRequest` checks for the presence of this header.

When you use jQuery.Ajax or the default Ajax-helpers for that matter, this header will be included. If you use jQuery.load() this header is not included. jQuery.load does not allow for custom headers to be set.

Edit In order to use Ajax.ActionLink you need to include the unobtrusive ajax library and enable it in the web.config:

<configuration>
    <appSettings>
        <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
    </appSettings>
</configuration>

In addition to setting the flag, you will also need to include the MVC plugin for unobtrusive Ajax with jQuery (~/Scripts/jquery.unobtrusive-ajax.js).

I replaced my `@Html.ActionLink`with the `@Ajax.ActionLink` like you mentioned. Now it takes me to this link http://localhost:19208/customajax/PrivacyPolicy/privacyLink when i click the SHow the privacy policy hyperlink. What should I do to make sure that when the hyperlink is clicked it is taken as Ajax request and open the partial view rather than the whole view. For the edit part of your answer, how do i set the x-requested with internally? — Cybercop, May 15 '13 at 11:41
You cannot add headers with jQuery.load. I've added information on how to enable unobtrusive Ajax — Kenneth, May 15 '13 at 11:45

score 0 · Accepted Answer · answered May 15 '13 at 12:10

0

IIRC event is a reserved word. Try like this:

$('#privacyLink').click(function (e) {
    e.preventDefault();
    var url = $(this).attr('href');
    $('#privacy').load(url);
});

or:

$('#privacyLink').click(function () {
    var url = $(this).attr('href');
    $('#privacy').load(url);
    return false;
});

Also don't forget to include jQuery.js before your AjaxDemo.js script.

answered May 15 '13 at 12:10

Darin Dimitrov

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

I tried the first option that you mentioned. and included `@section head { }` but still on hyperlink click i get forwarded to new page – Cybercop May 15 '13 at 13:03
Make sure that jQuery is not included twice and that you don't have some javascript errors. Look at your javascript console in the browser as well as the Network tab to ensure that all your scripts are included properly. This should work. – Darin Dimitrov May 15 '13 at 13:34
Thanks a lot, well I now got some kind of error on my AjaxDemo.js which is shown by javascript console. It says Uncaught reference error: $ is not defined just below the line `$('#privacyLink').click(function (e) {`. Any idea why am I getting that error? – Cybercop May 15 '13 at 14:02
Yes, you haven't referenced jquery or referenced it twice or simply `~/Scripts/jquery-1.8.2.js` doesn't exist. From what I can see you have included this in a section called `head` but make sure that this section is properly included in your Layout and that you don't have a duplicate @Scripts.Render call for jQuery at the end of your DOM. By the way it's better to include all scripts at the end of the DOM and in this case you don't need to wrap your code in a `$(document).ready` callbacks. – Darin Dimitrov May 15 '13 at 14:31
Thank you very very much. Finally works now. I've spent my whole day trying to solve this thing. – Cybercop May 15 '13 at 14:41

why if(Request.IsAjaxRequest) is false

2 Answers2