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和网络流量，以确认部分视图操作返回的内容。