3

「ジョブ」を作成し、既存のジョブを編集できる MVC プロジェクトの非常に単純なインデックス ページがあります。Ajax リンクを使用して、div の内容を、Create() および Edit() アクションが部分ビューとして返す job-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 コードを正しくまたは適切な場所に含めていない可能性があることを示唆しています。RenderBody() 呼び出しの前に、_Layout ビューに持っています。

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

ページの読み込み時に起動する unobtrusive-ajax.js ファイルに alert() 呼び出しを挿入し、Chrome のコードへのリンクが正常に機能するため、このコードが読み込まれていることがわかります。ただし、live() は最新バージョンの jQuery では非推奨になっているため、ajax スクリプトで live() の呼び出しを on() に手動で置き換える必要がありましたが、それらが MVC4 の最新のスクリプトであると確信しています。 . ある時点で、Ajax 呼び出しが「新規」リンクに対して実際に機能していましたが、その後変更を加えましたが、数日間何も機能していません。どんな助けでも大歓迎です。

4

2 に答える 2

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 に答える