Question

我有一个非常简单的MVC项目索引页面，它允许您创建“作业”并编辑现有作业。我正在尝试使用Ajax链接用作业编辑表单替换div的内容，Create（）和Edit（）操作作为局部视图返回。相反，当您单击Ajax链接时，整个页面内容将替换为部分视图，而不仅仅是相应div元素的内容。这是相关的.cshtml代码：

@{
    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>

我在网上看到的类似问题的大多数答案表明，我可能没有正确地或正确地包括不显眼的ajax代码。我在_Layout视图中，在RenderBody（）调用之前将其作为

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

我知道这个代码正在加载，因为我在一个unobtrusive-ajax.js文件中插入了一个alert（）调用，该文件在页面加载时启动，并且Chrome中代码的链接工作正常。但是，由于在jQuery的最新版本中不推荐使用live（），我不得不在ajax脚本中手动替换live（）和on（）的调用，尽管我很确定它们是MVC4的最新脚本。有一次，Ajax调用实际上是在为“新”链接工作，但是我已经做了更改，现在几天都没有工作。任何帮助将不胜感激。

Answer 1

我使用空专用div

html是

<div id="targetDiv">

，脚本是

    $(".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");
             }
         }
     });
    });

Answer 2

您需要在页面中包含此内容

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

ASP.NET MVC4 Ajax ActionLink帮助程序不起作用 - 使用返回的部分视图重新加载整个页面

2 个答案: