MVC3 Ajax.ActionLink causes file open dialog

Question

I've got a view with the following Ajax.ActionLink defined

@Ajax.ActionLink(@Model.Game.VisitorTeam.FullName, "SelectTeam", new { gameID = @Model.Game.GameID, pickID = @Model.Game.VisitorTeam.TeamID }, new AjaxOptions { HttpMethod = "POST", OnSuccess = "pickMade" }, new { id = "vpick-" + @Model.Game.GameID });

Here is the Action defined in my controller.

public JsonResult SelectTeam(int gameID, int pickID) {
    var user = Membership.GetUser(User.Identity.Name);
    var message = "Pick Submitted";
    var userID = (Guid) user.ProviderUserKey;
    _pickService.SubmitPick(userID, gameID, pickID);

    return Json(new {id = gameID, teamID = pickID, message}, JsonRequestBehavior.AllowGet);

 }

When I click the link on the page, it posts back to my Action in my controller fine, executes the code and returns the Json result. However, once the client gets the result, the browser opens a 'Save As' dialog. If I save the file, it's my Json result, returning as expected. I don't know why my 'pickMade' function isn't being called to handle the result from the postback.

In my other application, I'm using the [AcceptVerbs(HttpVerbs.Post)] attribute. However, if I try this in this application, I get a 404 error when calling the action from my view. If I remove the attribute, I have to add the JsonRequestBehavior.AllowGet to my return value.

I have very similar functionality in another application and it works fine. I'm not sure what's going on, so any help is appreciated.

Panos Panos · Accepted Answer · 2011-09-26T18:28:05

You have 2 solutions (I guess).

First Solution (not the best one):

1/ Desactivating the Unobtrusive Javascript in your Web.config

<appSettings>
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="false" />
</appSettings>

2/ Including MicrosoftAjax.js and MicrosoftMvcAjax.js script files

<script src="@Url.Content("~/Scripts/MicrosoftAjax.debug.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js")" type="text/javascript"></script>

Second Solution (better):

1/ Keep the unobtrusive Javascript enabled (by default)

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

2/ Include the jquery-unobtrusive javascript files.

  <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
  <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

Already had this issue multiple times and I always worked :/ !

MVC3 Ajax.ActionLink causes file open dialog

1 Answers

First Solution (not the best one):

Second Solution (better):