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的调用正在做一些额外的工作，当你直接点击控制器网址时没有完成，但我不知道那是什么。

我试图在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();
    }
}

MVC 5部分视图的Ajax重新加载返回无效的Html

2 个答案: