阿賈克斯刷新返回無效的HTML

Question

新手到MVC在這裏（大約一個星期或兩個）...

我試圖重新加載使用Ajax的MVC 5局部視圖。我已經找到了很多關於如何做到這一點的例子，並且我決定使用jQuery load（）函數。

下面是控制器代碼：

public class NotificationController : Controller 
{ 
    // 
    // GET: /Notification/ 
    public ActionResult Get() 
    { 
     return PartialView(); 
    } 
} 

下面是渲染局部視圖中的HTML：

<div id="notificationArea"> 
    @Html.Action("Get", "Notification") 
</div> 

而這裏的我正在重新加載局部視圖的呼叫（在定時器）：

$('#notificationArea').load('@Url.Action("Get","Notification")'); 

當部分視圖最初使用Html.Action每個東西看起來不錯

一旦定時器啓動，呼叫到通知控制器沒有問題，但返回的是不是有效的HTML。它看起來是這樣的：

<$A$> <$B$> id="notificationDropdown"<$C$> class="notificationDropdown"<$D$>> <$E$> 
class="notificationsTable"<$F$>> Operation Title File <$G$> src="/Images/online.png 
<$H$> alt="Online"<$I$> /> Operation Test #1 TestFile2.mp4 <$$$> 

如果我在使用Url.Action在頁面的底部，並點擊該鏈接，創建一個鏈接扔，我得到相同的無效的HTML如上：

<a href="@Url.Action("Get", "Notification")">@Url.Action("Get", "Notification")</a> 

我不得不假設電話Html.Action正在做一些額外的工作，當你只是直接點擊控制器網址時就沒有完成，但我不知道那是什麼。

我已經試過通過MSDN文檔在Html.Action沒有任何運氣。任何人都可以點亮這裏發生的事情嗎？我錯過了什麼？

UPDATE：

我意識到，我只是捕捉要說的是什麼瀏覽器，而不是由調用返回的行動充分反應呈現。

下面是部分查看HTML：

@model IEnumerable<MyApp.Models.Notification> 

<style type="text/css"> 

.notificationDropdown { 
    background-color: #eeeeee; 
    position: absolute; 
    left: 210px; 
    border-left: 3px; 
    border-bottom: 3px; 
    border-right: 3px; 
    border-top: 0px; 
    border-style: ridge; 
    border-color: #aaaaaa; 
} 

.notificationsTable { 
    margin: 5px; 
    border-collapse: collapse; 
    border: 1px solid #aaaaaa; 
} 

    .notificationsTable td { 
     border: 1px solid #aaaaaa; 
     padding-left: 10px; 
     padding-right: 10px; 
     padding-top: 3px; 
    } 

    .notificationsTable th { 
     color: #ffffff; 
     background-color: #000000; 
     border: 1px solid #aaaaaa; 
     padding-left: 10px; 
     padding-right: 10px; 
     padding-top: 3px; 
    } 
</style> 



<div id="notificationDropdown" class="notificationDropdown"> 
<table class="notificationsTable"> 
    <thead> 
     <tr> 
      <th>&nbsp;</th> 
      <th>Operation</th> 
      <th>Title</th> 
      <th>File</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td> 
       <img src="/Images/online.png" alt="Online" /> 
      </td> 
      <td>Operation</td> 
      <td>Test #1</td> 
      <td>TestFile2.mp4</td> 
     </tr> 
    </tbody> 
</table> 
</div> 

下面是我在嘗試從動作訪問局部視圖完整的響應：

<$A$><style> 

.notificationDropdown { 
    background-color: #eeeeee; 
    position: absolute; 
    left: 210px; 
    border-left: 3px; 
    border-bottom: 3px; 
    border-right: 3px; 
    border-top: 0px; 
    border-style: ridge; 
    border-color: #aaaaaa; 
} 

.notificationsTable { 
    margin: 5px; 
    border-collapse: collapse; 
    border: 1px solid #aaaaaa; 
} 

    .notificationsTable td { 
     border: 1px solid #aaaaaa; 
     padding-left: 10px; 
     padding-right: 10px; 
     padding-top: 3px; 
    } 

    .notificationsTable th { 
     color: #ffffff; 
     background-color: #000000; 
     border: 1px solid #aaaaaa; 
     padding-left: 10px; 
     padding-right: 10px; 
     padding-top: 3px; 
    } 
</style> 



<div</$A$><$B$> id="notificationDropdown"</$B$><$C$> class="notificationDropdown"</$C$><$D$>> 
<table</$D$><$E$> class="notificationsTable"</$E$><$F$>> 
    <thead> 
     <tr> 
      <th>&nbsp;</th> 
      <th>Operation</th> 
      <th>Title</th> 
      <th>File</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td> 
       <img</$F$><$G$> src="/Images/online.png"</$G$><$H$> alt="Online"</$H$><$I$> /> 
      </td> 
      <td>Operation</td> 
      <td>Test #1</td> 
      <td>TestFile2.mp4</td> 
     </tr> 
    </tbody> 
</table> 
</div></$I$><$$$><map><file path="~/Views/Notification/Get.cshtml" encoding="Windows-1252"><node id="A" start="70" length="895" literal="true" /><node id="B" start="965" length="26" literal="true" /><node id="C" start="991" length="29" literal="true" /><node id="D" start="1020" length="13" literal="true" /><node id="E" start="1033" length="27" literal="true" /><node id="F" start="1060" length="288" literal="true" /><node id="G" start="1348" length="25" literal="true" /><node id="H" start="1373" length="13" literal="true" /><node id="I" start="1386" length="202" literal="true" /></file></map> 

的HTML很大程度上保留，但與似乎幾乎是隨機插入標籤。

我認爲值得注意的是該視圖目前是靜態的，並且沒有使用來自該模型的數據。我要嘗試一個真正的實現，這實際上使用模型和Razor引擎，但我仍然會很想知道這裏發生了什麼...

Answer 1

我能夠通過將CSS類定義從局部視圖移動到Site.css文件來解決問題。顯然，Razor引擎不喜歡部分視圖中的CSS。

Answer 2

嘗試更改操作，使其返回就緒html ，不是部分查看結果：

public ActionResult Get() 
{ 
    return Content(RenderRazorViewToString("Get")); 
} 

public string RenderRazorViewToString(string viewName) 
{ 
    using (var sw = new StringWriter()) 
    { 
     var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName); 
     var viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw); 
     viewResult.View.Render(viewContext, sw); 
     viewResult.ViewEngine.ReleaseView(ControllerContext, viewResult.View); 
     return sw.GetStringBuilder().ToString(); 
    } 
}