MVC Razor $ .Ajaxがうまく機能しない

Question

MVC/Razorアプリケーションでメンテナンスを行っていて、コードの仕組みを理解しようとしています。 Webページには更新ボタンがあり、ユーザーがクリックすると、タスクのリストが更新されるはずです。それは壊れているようですが、どのように動作するかを調べる際に、Ajaxのやり方とMVCの部分的な見方との間に矛盾があるように見えます。私はコードがもともとAjax呼び出しのために書かれた疑いがありますが、後にMVCに行くことに決めたときに、部分ビューのアプローチでそれをオーバーライドしました。しかし、私はこれがどのように機能するかについて十分に知識がありません。ここで

@model TasksAndAlertsModel 
<section class="block-1-2 pull-right" id="TasksAndAlertsSection"> 
    <div class="inline"> 
     <h3>tasks/alerts<span>@Model.alerts.Count</span></h3> 
    </div> 
    <div class="inline" style="margin: 19px 0px 0px 0px;"> 
      <!-- this is the "refresh" button, visually it's an icon --> 
     <button style="width: 20px; height: 20px;" id="refreshTasksAndAlerts" class="k-button" 
       onclick="RefreshTasksAndAlertsAjaxCall(0);return false;"> 
     <span style="position: relative; left: -6px; top: -6px;" class="k-icon k-si-refresh"></span> 
     </button> 
    </div> 
    <ul class="tasks" style="overflow: auto; height: 404px"> 
     @for (int a = 0; a < Model.lockedByCurrentUserAlerts.Count; a++) 
     { 
      @Html.Raw(HttpUtility.HtmlDecode(Model.alerts[Model.lockedByCurrentUserAlerts.ElementAt(a)].ToString())); 
     } 
     @for (int b = 0; b < Model.unassignedAlerts.Count; b++) 
     { 
      @Html.Raw(HttpUtility.HtmlDecode(Model.alerts[Model.unassignedAlerts.ElementAt(b)].ToString())); 
     } 
     @for (int c = 0; c < Model.lockedByAnotherUserAlerts.Count; c++) 
     { 
      @Html.Raw(HttpUtility.HtmlDecode(Model.alerts[Model.lockedByAnotherUserAlerts.ElementAt(c)].ToString())); 
     } 
    </ul> 
</section> 

が

function RefreshTasksAndAlertsAjaxCall(alertID) { 
    $.ajax({ 
     type: "GET", 
     url: siteRoot + "Home/RefreshTasksAndAlerts/?t=" + Math.random(), 
     success: function (response) { 
      $(document.getElementById("TasksAndAlertsSection")).html(response); 
     }, 
     error: function (response) { 
      //alert(response.responseText); 
     } 
    }); 
} 

「更新」をクリックすることでトリガーされたJavaScriptです - ここ

は部分図「更新」ボタンが含まれています（名前の「_TasksAndAlerts.cshtml」）であります

about $ .ajaxを読んで、私は、成功値の内容が "getElementById（" TasksAndAlertsSection "）"部分内のすべてを置き換えるという印象を受けました。しかし、 "RefreshTasksAndAlerts"から返されるのはHTMLではなくリストです。そして、何らかのJavaScriptでリストを処理することは可能ですが、それを実現するための何も表示されません。ここで

ではJavaScript

public PartialViewResult RefreshTasksAndAlerts(int? id) 
{ 
    LIMDUEntities db = closedKeyEntity; 
    return PartialView("HomePage/_TasksAndAlerts", limduDataHelper.GetTasksAndAlertsModel(HOURS_UNTIL_TASKS_SHOULD_BE_REASSIGNED, db)); 
} 

から呼び出されるコントローラコードは、「リターン」に言及コードは（私はそれの一部を示すよ最終的にリストを返すコードの長い作品です何それはビルドすることは私の質問）ではないので、：

public TasksAndAlertsModel GetTasksAndAlertsModel(int HOURS_UNTIL_TASKS_SHOULD_BE_REASSIGNED, LIMDUEntities db) 
    { 
     ArrayList alerts = new ArrayList(); 
     TasksAndAlertsModel TAAM = new TasksAndAlertsModel(); 
     TAAM.alerts = alerts; 
     TAAM.unassignedAlerts = UnassignedIndexes; 
     TAAM.lockedByAnotherUserAlerts = lockedByAnotherUserIndexes; 
     TAAM.lockedByCurrentUserAlerts = lockedByCurrentUserIndexes; 
     return TAAM; 
    } 

私は実際に何が起こるかによって混乱している - それはお互いに二つのアプローチが競合のように私には見えます。 $ .Ajaxに返されるデータはHTMLではないので、私はそれがちょうど失われていると推測しています。コントローラから返された部分的なビューは表示されるものです。そうであれば、「成功：」の部分も必要なのでしょうか？これを表現するきれいな方法がありますか？

Answer 1

この場合、MVC Razorと$ .Ajaxの間に競合はありません。あなたのコントローラーアクションRefreshTasksAndAlertsは、部分的な表示（もしあればページの一部）をレンダリングし、HTMLコードだけを返します（どのような種類のリストもありません）。あなたのケースでは、このようなものが返されます。

<section class="block-1-2 pull-right" id="TasksAndAlertsSection"> 
    <div class="inline"> 
     .... other html here .... 
    </div> 
</section> 

JavaScript関数RefreshTasksAndAlertsAjaxCall呼び出すには、/コントローラのアクションを呼び出します。レスポンスが返されると（コントローラからの上記HTMLコード）、successコールバック関数が実行されます。この関数は、要素内のHTMLをid="TasksAndAlertsSection"に置き換えます。あなたの場合、最初のページが読み込まれたのは実際の<section>要素です。だから、上の最初のクリック後のページのHTMLは次のようになり、「リフレッシュ」：あなたは今、同じIDを持つページ上の2つの要素を持っているので、今

<section class="block-1-2 pull-right" id="TasksAndAlertsSection"> 
    <section class="block-1-2 pull-right" id="TasksAndAlertsSection"> 
     <div class="inline"> 
      .... other html here .... 
     </div> 
    </section> 
</section> 

、これは問題のビットです無効にしますが、ブラウザはこれを許容し、予想どおりページをレンダリングします。この状況では、JavaScriptコードに問題がある可能性があります。

オリジナルの<section>要素を元のビューの<div>要素に囲んで、ページを描画します（部分ビューには表示されません）。

<div id="SectionParent"> 
    .... render partial view the same way you are doing it now .... 
</div> 

このようなHTML出力を生成します：：だから、あなたのメインビューで、あなたはこのようなものがあるだろう

<div id="SectionParent"> 
    <section class="block-1-2 pull-right" id="TasksAndAlertsSection"> 
     <div class="inline"> 
      .... other html here .... 
     </div> 
    </section> 
</div> 

アップデートをsuccessコールバックへ：

success: function (response) { 
     $(document.getElementById("SectionParent")).html(response); 
}, 

それはすべて良いものでなければなりません。

ブラウザでdevツールを使用し、ページのHTMLとネットワークトラフィックを調べて、部分表示アクションから返されているものを確認できます。