3

我有一个非常简单的 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>

我在网上阅读的大多数类似问题的答案表明，也许我没有正确或在正确的位置包含 unobtrusive-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 中代码的链接工作正常。但是，我不得不手动替换 ajax 脚本中对 live() 的调用，因为 live() 在最新版本的 jQuery 中已被弃用，即使我很确定它们是 MVC4 的最新脚本. 在某一时刻，Ajax 调用实际上是为“新建”链接工作的，但从那以后我已经进行了更改，现在几天没有任何工作。任何帮助将不胜感激。

4

2 回答 2

0

您需要将其包含在您的页面中

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
于 2014-02-05T09:52:42.817 回答
0

我为此使用空的专用 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");
             }
         }
     });
    });
于 2013-03-25T13:39:00.797 回答