从C#向Div动态追加创建的标题：解决重复点击按钮时内容被覆盖的问题

我明白你遇到的困扰了——每次点击按钮添加新标题时，之前的内容就消失了，看起来像是被覆盖。这其实是ASP.NET Web Forms的回发机制导致的：每次页面回发（比如点击服务器端按钮），服务器都会重新构建整个控件树，之前动态添加的控件不会自动保留，所以你每次点击时，emailPreview容器里的控件都是空的，新添加的标题自然就“覆盖”了（本质是之前的内容已经在回发时丢失了）。

下面是实用的解决方案，帮你实现每次点击都把新标题追加到原有内容下方：

方案1：使用ViewState保存预览内容（推荐，适合单页面状态保持） #

ViewState是ASP.NET内置的页面状态存储机制，我们可以用它保存已经添加的HTML内容，每次点击按钮时先取出已有内容，追加新标题后再重新渲染到容器中。

步骤1：初始化ViewState #

在页面的Page_Load方法里初始化存储预览内容的ViewState项：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 首次加载时初始化预览内容为空字符串
        ViewState["PreviewHtml"] = string.Empty;
    }
}

步骤2：修改按钮点击事件 #

我们可以封装一个通用的添加标题方法，避免重复代码，然后在每个按钮事件里调用它：

// 通用添加标题方法，负责追加新内容到预览区
private void AppendHeader(string headerClass, string headerText)
{
    // 获取已有的预览HTML内容，为空则默认空字符串
    string existingHtml = ViewState["PreviewHtml"] as string ?? string.Empty;
    
    // 构造新标题的HTML，加上<br/>让新标题换行显示在下方
    string newHeaderHtml = $"<label class='{headerClass}' contentEditable=true>{headerText}</label><br/>";
    
    // 追加新内容到已有内容后
    existingHtml += newHeaderHtml;
    
    // 更新ViewState里的内容，确保回发后不会丢失
    ViewState["PreviewHtml"] = existingHtml;
    
    // 清空容器并重新添加完整的HTML内容
    emailPreview.Controls.Clear();
    emailPreview.Controls.Add(new LiteralControl(existingHtml));
}

// Header 1按钮点击事件
protected void HeaderOne_Click(object sender, EventArgs e)
{
    AppendHeader("labelHeader1", "Header 1");
}

// Header 2按钮点击事件
protected void HeaderTwo_Click(object sender, EventArgs e)
{
    AppendHeader("labelHeader2", "Header 2");
}

方案2：使用Session保存内容（适合跨页面或长期保存需求） #

如果你的场景需要跨多个页面保持预览内容，或者ViewState容量不足以存储大量内容，可以改用Session来存储：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        Session["PreviewHtml"] = string.Empty;
    }
}

private void AppendHeader(string headerClass, string headerText)
{
    string existingHtml = Session["PreviewHtml"] as string ?? string.Empty;
    string newHeaderHtml = $"<label class='{headerClass}' contentEditable=true>{headerText}</label><br/>";
    existingHtml += newHeaderHtml;
    Session["PreviewHtml"] = existingHtml;
    
    emailPreview.Controls.Clear();
    emailPreview.Controls.Add(new LiteralControl(existingHtml));
}

补充说明 #

• 你也可以把<br/>换成<div>标签包裹每个标题，实现更灵活的排版；
• 若要支持编辑后内容的保存，还可以在页面提交时读取ViewState["PreviewHtml"]的值进行后续处理。

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