Asp.net ajaxToolkit:HtmlEditorExtender仅提交首行内容问题求助

问题 #

在ASP.NET项目的ASCX用户控件中，使用ajaxToolkit:HtmlEditorExtender扩展多行TextBox作为富文本编辑器时，输入多行内容（如第一行"This is first row"，回车后第二行"This is the second row"）提交后，后台仅能获取到首行内容。

前端代码 #

<asp:Panel runat="server" ID="OrderNotePanel" CssClass="tableContainerWithScrollbar">
 <asp:UpdatePanel ID="UpdatePanel2" runat="server">
     <ContentTemplate>
         <div class="row alignedCenter">
             <div class="col-sm-10 col-xs-12">
                 <label>NOTE:</label>

                 <asp:TextBox ID="OrderNoteTextBox" runat="server"  TextMode="MultiLine" Rows="10" CssClass="form-control" Height="200px" />
                 <ajaxToolkit:HtmlEditorExtender ID="HtmlEditorExtender1"  DisplaySourceTab="True" TargetControlID="OrderNoteTextBox" runat="server">
                     <Toolbar>
                         <ajaxToolkit:Bold />
                         <ajaxToolkit:Italic />
                         <ajaxToolkit:Underline />
                         <ajaxToolkit:InsertUnorderedList />
                     </Toolbar>
                 </ajaxToolkit:HtmlEditorExtender>
             </div>
             <div class="col-sm-2">
                 <label style="display: block;">&nbsp;</label>
                 <asp:Button ID="AddButton" runat="server" Text="ADD" OnClick="InsertButton_Click" CssClass="genericButton small" />
                 <asp:HiddenField runat="server" ID="HiddenFieldTextbox" />
             </div>
         </div>

<!-- Other lines of code -->

        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Panel>

后台提交按钮代码 #

protected void InsertButton_Click(object sender, EventArgs e)
{
    try
    {
        String NoteEncoded = OrderNoteTextBox.Text;
        var Note = HttpUtility.HtmlDecode(NoteEncoded);
        if (Note != "")
        {
            OrderNotesDataSource.InsertParameters["OrderID"].DefaultValue = CustomerOrderID;
            OrderNotesDataSource.InsertParameters["OrderDetailID"].DefaultValue = OrderLineID;
            OrderNotesDataSource.InsertParameters["OrderNote"].DefaultValue = Note;
            OrderNotesDataSource.InsertParameters["Step"].DefaultValue = Step;
            OrderNotesDataSource.InsertParameters["UserID"].DefaultValue = Page.User.Identity.Name;
            OrderNotesDataSource.Insert();
        }
        OrderNoteTextBox.Text = "";

        OrderNoteListView.DataBind();

    }
    catch (Exception ex)
    {
        OrderLineNotesLabel.Text = ex.Message;
    }
}

原因分析 #

1. 请求验证拦截：HtmlEditorExtender会将换行转换为<br />或<p>等HTML标签，而ASP.NET默认的请求验证机制会拦截包含HTML标签的提交内容，导致只有第一个HTML标签之前的内容被保留，后续内容被截断。
2. UpdatePanel内容同步延迟：在UpdatePanel环境下，富文本编辑器的内容可能没有及时同步到TextBox的原生value属性中，导致后台读取TextBox.Text时只能获取到初始的首行内容。

解决方法 #

方法1：禁用单个控件的请求验证 #

给目标TextBox添加ValidateRequest="false"属性，允许提交HTML内容：

<asp:TextBox ID="OrderNoteTextBox" runat="server" TextMode="MultiLine" Rows="10" 
             CssClass="form-control" Height="200px" ValidateRequest="false" />

同时需要在ASCX对应的父ASPX页面的Page指令中添加ValidateRequest="false"：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="YourPage.aspx.cs" Inherits="YourNamespace.YourPage" ValidateRequest="false" %>

若需全局配置，可修改Web.config（不推荐，建议局部配置以保证安全性）：

<configuration>
  <system.web>
    <pages validateRequest="false" />
  </system.web>
</configuration>

方法2：通过HiddenField同步编辑器内容 #

利用HtmlEditorExtender的客户端API，在提交前将编辑器的HTML内容同步到HiddenField，后台读取HiddenField的值以规避请求验证影响：

1. 修改前端按钮，添加客户端点击事件：

<asp:Button ID="AddButton" runat="server" Text="ADD" OnClick="InsertButton_Click" 
            CssClass="genericButton small" 
            OnClientClick="syncEditorContent();" />

2. 添加同步内容的JavaScript代码（放在UpdatePanel内部或页面全局脚本区域）：

function syncEditorContent() {
    var editor = $find("<%= HtmlEditorExtender1.ClientID %>");
    if (editor) {
        document.getElementById("<%= HiddenFieldTextbox.ClientID %>").value = editor.get_content();
    }
}

3. 修改后台代码，读取HiddenField的值：

protected void InsertButton_Click(object sender, EventArgs e)
{
    try
    {
        String NoteEncoded = HiddenFieldTextbox.Value;
        var Note = HttpUtility.HtmlDecode(NoteEncoded);
        if (!string.IsNullOrEmpty(Note))
        {
            OrderNotesDataSource.InsertParameters["OrderID"].DefaultValue = CustomerOrderID;
            OrderNotesDataSource.InsertParameters["OrderDetailID"].DefaultValue = OrderLineID;
            OrderNotesDataSource.InsertParameters["OrderNote"].DefaultValue = Note;
            OrderNotesDataSource.InsertParameters["Step"].DefaultValue = Step;
            OrderNotesDataSource.InsertParameters["UserID"].DefaultValue = Page.User.Identity.Name;
            OrderNotesDataSource.Insert();
        }
        OrderNoteTextBox.Text = "";
        HiddenFieldTextbox.Value = "";
        OrderNoteListView.DataBind();
    }
    catch (Exception ex)
    {
        OrderLineNotesLabel.Text = ex.Message;
    }
}

方法3：确认ViewState启用 #

确保TextBox的EnableViewState属性为true（默认值），保证ViewState能正确保存多行内容：

<asp:TextBox ID="OrderNoteTextBox" runat="server" TextMode="MultiLine" Rows="10" 
             CssClass="form-control" Height="200px" EnableViewState="true" />

内容的提问来源于stack exchange，提问作者Alex