jQuery.Load() not triggering Request.IsAjaxRequest in ASP.NET MVC2

Question

Hi

I'm using the Jquery full calendar plugin, and i want to be able to click on an event and the details of the event to be populated via AJAX into a div with the id of #details.

here is my controller action that i'm trying to load. When debugging, the action does not consider the incoming request to be AJAX and returns the full view instead of the partial. Does it matter if the full view is called the same as the partial view? Ie; 'Details.aspx' & 'Details.ascx'?

public ActionResult Details(int id)
    {
        Pol_Event pol_Event = eventRepo.GetEvent(id);
        ViewData["EventTypes"] = et.GetEventType(id);
        if (pol_Event == null)
            return View("NotFound");
        else
        {
            if(HttpContext.Request.IsAjaxRequest()){
                return PartialView("Details");
            }
            else
                return View(pol_Event);

        }
    }

Here is the jquery code i'm using. Am i missing not using .load() correctly in the eventClick function? The Developer of the calendar plugin has confirmed that eventClick has nothing to do with AJAX so the fault must lie in my code.

$(document).ready(function() {
            $('#calendar').fullCalendar({

                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },

                events: "/Events/CalendarData",
                allDayDefault: false,

                selectable: true,
                eventClick: function(event) {
                    $('details').load(event.url);
                },
                eventRender: function(event, element) {
                    element.qtip({
                        content: event.title + " @ " + event.venue,

                        position: {
                            corner: {
                                target: 'topLeft',
                                tooltip: 'bottomLeft'
                            }
                        }

                    });
                }


            });

        });

So am i using the Jquery.Load() function incorrectly, or is there something wrong with my controller?

More updates: I finally caught the problem. The XMLHttpRequest is being sent but i'm encountering a 500 internal server error, not solved yet as i can't figure out what's causing the error.

Host: localhost:4296
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.8) Gecko/20100722 
Firefox/3.6.8
Accept: text/html, */*
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
X-Requested-With: XMLHttpRequest
Referer: http://localhost:4296/Events/EventCalendar
Cookie: .ASPXAUTH=56C5F4FD536564FF684F3F00E9FB51A5F2F1B22D566C517923D71FEAF599D266531CAC52BF49D2700E048DD420A4575456855303CC2DCB5875D4E1AD8883821EA62E5169969503776C78EB3685DAA48C

UPDATE: I finally figured out what the problem was. I wasn't passing in the model to the partial so the line

return PartialView("Details");

Should have been

return PartialView("Details", pol_Event);

this was generating the 500 internal service error.

Answer 1

When you make an Ajax request you're suppose to set the 'X-Requested-With' HTTP header to something like 'XMLHttpRequest' eg.

Host                www.google.com
User-Agent          Mozilla/5.0 (Windows; U; Windows NT 6.1; (snip...)
Accept              */*
Accept-Language     en-us,en;q=0.5
Accept-Encoding     gzip,deflate
Accept-Charset      ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive          115
Connection          keep-alive
X-Requested-With    XMLHttpRequest
Referer             http://www.google.com

This 'X-Requested-With' header is what the 'IsAjaxRequest()' method looks for. Normally, jQuery's Ajax methods will send this header automatically. My guess is that for some reason the jQuery Calendar plugin isn't sending this header.

I would download something like fiddler, or install Firebug for Firefox and check the raw HTTP Request/Response data when the Ajax request/Calendar control is fired/initialised. See if the X-Requested-With header is being included.

Answer 2

Yes. Although it doesn't have to be sent as a HTTP Request Header. You can POST it in a form data or in the query string of a GET. www.example.com?x-requested-with=XMLHttpRequest (case sensitive value)

Seems ridiculous but true. I've tried it and it works :) Reflection on the IsAjaxRequest() extension method will prove this:

return ((request["X-Requested-With"] == "XMLHttpRequest") || ((request.Headers != null) && (request.Headers["X-Requested-With"] == "XMLHttpRequest")));