MVC Razor $ .Ajax不能很好地互相工作

Question

我正在做一個MVC/Razor應用程序的維護，並且試圖瞭解一些代碼是如何工作的。網頁上有一個刷新按鈕，當用戶點擊它時，它應該刷新任務列表。它似乎被破壞了，但在試圖追蹤它的工作方式時，我遇到了Ajax做事情和MVC做部分視圖的方式之間的衝突。我有點懷疑代碼最初是爲Ajax調用編寫的，但是當他們後來決定去使用MVC時，他們只是用部分視圖方法取代了它;但我對這個工作如何確定還不夠了解。

下面是部分認爲含有「刷新」按鈕（名爲「_TasksAndAlerts.cshtml」） -

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

從閱讀大約$ .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。該函數僅用id="TasksAndAlertsSection"替換元素中的HTML。在你的情況下，它是實際加載第一次頁面時呈現的<section>元素。因此，在第一次點擊後「刷新」頁面上的HTML看起來像：

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

現在，這是有點問題的，因爲你現在有兩個頁面上的元素用相同的ID，這是無效，儘管瀏覽器可以容忍這一點，並且會按照您的預期呈現頁面，更不用說了。您的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); 
}, 

它應該都是好的。

您可以在瀏覽器中使用開發工具並檢查頁面html和網絡流量，以確認部分視圖操作返回的內容。