MVC 5 PartialView 的 Ajax 重新加载返回无效的 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 渲染时，一切看起来都很好

一旦计时器启动，就会毫无问题地调用 Notification 控制器，但返回的不是有效的 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 的调用正在做一些额外的工作，而当你直接点击控制器 url 时没有完成，但我不知道那是什么。

我尝试在Html.Action 上查看 MSDN 文档，但没有任何运气。任何人都可以阐明这里发生的事情吗？我错过了什么？

更新：

我意识到我只是在捕获浏览器正在呈现的内容，而不是对 Action 的调用返回的完整响应。

这里是部分视图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();
    }
}