asp.net MVC Ajax Request Not Firing Correctly

Question

I cannot figure out why this Ajax request is not firing correctly. For simplicity's sake I've been trying to implement Ajax request using this tutorial. However I cannot get my controller to recognize the request as being so. I've tried placing the Ajax.ActionLink within the div to be updated (outside of it here).

Using the Response.Write to place the Datetime, the one within the Div does get updated, whilst the one outside of the target div does not (as expected). I'm not all too familiar with how the MS Ajax library works, but on the surface it seems to be updating the right section of the page, but my controller won't recognize the request type, and therefore outputs the incorrect information.

...
    <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
    <script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div class="chart" id="divChart">
        <% Html.RenderPartial("GraphView", Model); %>
        <br />
        <% Response.Write(DateTime.Now); %>
        <br />
    </div>
    <%= Ajax.ActionLink("no parameters", "MyWorkouts", new AjaxOptions{ UpdateTargetId = "divChart"}) %>
    <%= Ajax.ActionLink("id parameter", "MyWorkouts", new {chtype=1},new AjaxOptions { UpdateTargetId = "divChart", OnBegin = "beginContactList", OnSuccess = "successContactList", OnFailure = "failureContactList" })%>
    <%= Ajax.ActionLink("all parameters", "MyWorkouts", new {chtype=2, range=ViewData["daterangevalue"]},new AjaxOptions { UpdateTargetId = "divChart", OnBegin = "beginContactList", OnSuccess = "successContactList", OnFailure = "failureContactList" })%>
    <br />
    <% Response.Write(DateTime.Now); %>
    <h2>
...

And then my ActionResult looks like so...

[AcceptVerbs(HttpVerbs.Get)]
        public ActionResult MyWorkouts(int? chtype, int? range) {
            int dateRange = 3;

             // do some stuff here - left out for readability

            if (Request.IsAjaxRequest()) {
                if (range != null) {
                    dateRange = (int)range;
                }

            }

           //do some other stuff...

            if (Request.IsAjaxRequest()) {
                return PartialView("GraphView", workouts);
            } else {
                return View(workouts);
            }
        }

(Everything is pretty much default as this is just a test page to implement it once I have it figured out). As a result, I keep getting the full view inside of the targeted div.

Answer 1

I'm not sure what the problem is but Fiddler and the RouteDebugger might help in debugging it.

Answer 2

It looks like you may be using an older version of MVC framework?

If so I recommend updating to the release version and ensuring that you are using the newest jquery and mvc scripts... There were some changes specifically in how the Request.IsAjaxRequest() method works that may be related to your problem.

Also, if there is a RedirectToAction call involved in there you might want to read about a similar problem here.

Answer 3

It doesn't show in the snippet you have posted, but you most likely have form /form tags. These are interfering with the Ajax.BeginForm which generates the form tags as well. Once you remove the outer form tags, the Request.IsAjaxRequest will return true.