在 Razor 局部视图中解码 HTML 内容

Question

我有一个 ASP.NET MVC 应用程序，它使用以下局部视图来显示用户输入的注释：

@model NoteViewModel

<div title="@Model.Content"><span class="accordion-header">@Model.HeaderText</span></div>
<div>
    @using (Ajax.BeginForm("SaveNote", "Note", null, new AjaxOptions() { OnSuccess = "SaveNoteCallback(data, status, xhr)" }, new { id = ("Note" + Model.NoteId + "_form") }))
    {
        @Html.HiddenFor(model => model.AuditId)
        @Html.HiddenFor(model => model.NoteId)
        @Html.HiddenFor(model => model.NoteTypeId)
        @Html.TextAreaFor(model => model.Content, new { @class = "rteditor" })

        <div class="note-buttons">
            <input class="note-button note-submit" type="submit" value="Save" />
            @Html.ActionLink("Delete", "Delete", "Note", new { id = Model.NoteId }, new { @class = "note-button note-delete" })
        </div>
    }
</div>

模型的Content 属性通常包含HTML 内容，例如<p>Example</p>。此内容显示在 CKEditor 实例中。当在初始页面加载期间将部分视图作为另一个视图的一部分加载时，这可以正常工作。我遇到的问题是我还需要能够将部分视图返回到 AJAX 回调以通过 JQuery 呈现。当我在 JQuery 中得到结果时，Content 被编码：

<div title="&lt;p&gt;Example&lt;/p&gt;"><span class="accordion-header">Added by John Doe on Aug 05, 2014</span></div>
<div>
    <form action="/Note/SaveNote" class="smartaudit" data-ajax="true" data-ajax-success="UpdateNoteCallback(data, status, xhr)" id="Note50_form" method="post">
        <input data-val="true" data-val-number="The field AuditId must be a number." data-val-required="The AuditId field is required." id="AuditId" name="AuditId" type="hidden" value="327" />
        <input data-val="true" data-val-number="The field NoteId must be a number." data-val-required="The NoteId field is required." id="NoteId" name="NoteId" type="hidden" value="50" />
        <input data-val="true" data-val-number="The field NoteTypeId must be a number." data-val-required="The NoteTypeId field is required." id="NoteTypeId" name="NoteTypeId" type="hidden" value="2" />
        <textarea cols="20" id="Content" name="Content" rows="2">&amp;lt;p&amp;gt;Example&amp;lt;/p&amp;gt;</textarea>

        <div class="note-buttons">
            <input class="note-button note-submit" type="submit" value="Save" />
            <a class="note-button note-delete" href="/Note/Delete/50">Delete</a>
        </div>
    </form>
</div>

如您所见，我首先直接使用Content 属性在第一个div 元素上设置title 属性——内容被正确编码为<p>Example</p>。我还在TextAreaFor html 助手中再次使用Content 属性。在这种情况下，视图将文本区域内的内容双重编码为​​<p>Example</p>。这是来自我在 javascript 回调中返回的原始结果——它不是我在脚本中所做的任何事情的结果。

这是在这种情况下返回部分视图的控制器操作：

[HttpPost]
public PartialViewResult SaveNote(NoteViewModel viewModel)
{
    Note note;
    if (viewModel.NoteId == 0)
    {
        note = Db.Notes.Create();
        Db.Notes.Add(note);
    }
    else
    {
        note = Db.Notes.Find(viewModel.NoteId);
    }

    Mapper.Map<NoteViewModel, Note>(viewModel, note);

    Db.SaveChanges();

    Mapper.Map<Note, NoteViewModel>(note, viewModel);

    return PartialView("~/Views/Shared/NoteView.cshtml", viewModel);
}

编辑：这是我最初尝试处理返回的部分视图：

function SaveNoteCallback(data, status, xhr) {
    var notesContainer = $("#accordion-container");
    var html = $(data);
    html.appendTo(notesContainer);
    notesContainer.accordion("refresh");
    var contentArea = $(".rteditor", html)[0];
    CKEDITOR.replace(contentArea, {
        width: '100%',
        resize_enabled: false,
        htmlEncodeOutput: true
    });
    $(".note-button", html).button();
    $(".note-buttons", html).show();
}

我想知道最干净的处理方法是什么。是否可以让部分视图返回未编码的 HTML 内容？最好只从客户端回调函数中解码（以及如何完成）？

编辑 2：在进行了一些调试之后，在我看来，当视图通过控制器的PartialView 方法（与在另一个视图中通过Html.Partial 渲染相反）。

Answer 1

事实证明，问题的根源在于我的控制器在渲染局部视图之前（通过自动映射器）解码了模型的 Content 属性。这是避免双重编码所必需的。但是，我没有考虑的是 ModelState 字典仍然包含 Content 属性的编码版本，因此 html 助手在视图渲染期间仍然使用它。

解决方案是在返回局部视图之前调用ModelState.Clear()。