ASP.NET MVC4 Ajax ActionLink helper doesn't work - reloads entire page with the returned partial view

Question

I have a pretty simple index page for an MVC project which allows you to create "jobs" and edit existing jobs. I'm trying to use an Ajax link to replace the contents of a div with the job-edit form, which the Create() and Edit() actions return as a partial view. Instead, when you click on the Ajax links, the entire page content is replaced with the partial view, instead of just the contents of the appropriate div element. Here's the relevant .cshtml code:

@{
    string placeholder = "777777";
}

    <body>
        <ol id="JobListing">
        @Html.Partial("_ExportJobListingPartial", Model)
        </ol>
        <br /><br /><br />
        @Ajax.ActionLink("New", "Create", new AjaxOptions { UpdateTargetId = "EditJobContainer", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" })
        <br /><br />
        <div id="EditJobLinkContainer">
        @Ajax.ActionLink("Edit", "Edit", 
            new { id = placeholder }, // Route values
            new AjaxOptions { UpdateTargetId = "EditJobContainer", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" }, // Ajax options
            new { id = "EditJobLink" } // Html attributes
            ) 
        </div>
        <br /><br />
        <div id="EditJobContainer">
        EMPTY BOX HERE
        </div>
        <br />
    </body>
    </html>

    <script>
      $(function() {
          $("#JobListing").selectable({
              selected: function (event, ui) {
                  // Select only one at a time
                  $(ui.selected).addClass("ui-selected").siblings().removeClass("ui-selected");
                  $("#EditJobLinkContainer").html('@Ajax.ActionLink("Edit", "Edit", 
                    new { id = placeholder }, // Route values
                    new AjaxOptions { UpdateTargetId = "EditJobContainer", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" }, // Ajax options
                    new { id = "EditJobLink" } // Html attributes
                    )');

                  $("#EditJobLink").click(UpdateOnClick);
              }
          });

          $("#EditJobLink").click(UpdateOnClick);

          function UpdateOnClick() {
              //Get the id of the selected item
              var id = $(".ui-selected").first().attr("name");
              this.href = this.href.replace("@placeholder", id);
          }

      });

    </script>

Most of the answers I've read online to similar questions suggest that maybe I'm not including the unobtrusive-ajax code correctly or in the right place. I have it in the _Layout view, before the RenderBody() call, as

    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

I know this code is loading in because I inserted an alert() call into the unobtrusive-ajax.js file which launches on page load, and the links to the code in Chrome work fine. However, I had to manually replace the calls to live() with on() in the ajax scripts since live() is deprecated in the most recent version of jQuery, even though I'm pretty sure they're the latest scripts with MVC4. At one point the Ajax call was actually working for the "New" link, but I've made changes since, and nothing has been working for a few days now. Any help would be greatly appreciated.

Thanks. I'm assuming you mean the unobtrusive-ajax script includes. I have both because I've been just trying everything I could think of, but I've tried it with just one of them and it behaves the same way. — user2146445
Yes, jQuery is included before the ajax scripts. There are error messages after the partial view loads referring to the jQuery code in the partial view, but that's because the jQuery scripts aren't included in the partial because the partial, of course, isn't meant to be loaded on its own. — user2146445

Ahmed Eid Yamany Ahmed Eid Yamany · Accepted Answer · 2013-03-25T13:39:00

I use empty dedicated div for that

the html is

<div id="targetDiv">

and the script is

    $(".get-roles").live("click", function (e) {

        $("#targetDiv").empty();

        $.ajax({
         url: "edit",
         type: 'GET'
         xhrFields: {
             withCredentials: true
         },
         success: function (data) {
             if (data) {

                 $("#targetDiv").append(data);
             }
             else {
                 $("#targetDiv").text("Error");
             }
         }
     });
    });

ASP.NET MVC4 Ajax ActionLink helper doesn't work - reloads entire page with the returned partial view

2 Answers