从 asp.net 中的可编辑 div 中获取内部 html

Posted 2023-02-22

【中文标题】从 asp.net 中的可编辑 div 中获取内部 html

【英文标题】：get inner html out of editable div in asp.net

【发布时间】：2013-02-02 22:25:44

【问题描述】：

我对 Web 开发相对较新，对 ASP.NET Web 窗体完全陌生。 我有以下用户控制：

CSS：

div.textareaDiv 
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 200px;
    padding: 2px;
    resize:both;
    width: 400px;
    word-wrap: break-word;
    word-break:normal;

脚本：

function CatchEnterKey(e) 
        if (e.keyCode == 13) 
         e.stopPropagation();
         return false;
     
     return true;
 

标记：

<div id='htmlTextField' style="height:200px!important;"   class="textareaDiv"     onkeypress="CatchEnterKey(event);"  contenteditable="true" unselectable="off" runat="server"></div>;

当父页面上的“提交”按钮为 按下：

public string GetHtml()
        
            Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "gethtml", "alert($('.textareaDiv').html());", true);
                return null;
        

这个想法是通过脚本执行返回div的内部html，但目前我只想弄清楚为什么我会收到空​​警报。是不是div的内部html在回发时真的被清空了，我需要想一个不同的解决方案，还是我做错了什么？

提前致谢

罗马

【参考方案1】：

看到这个post on SO。切换您的示例以改用 RegisterStartupScript。问题是 RegisterClientScriptBlock 在元素呈现到屏幕之前注册，因此当您运行该代码时甚至不会呈现元素。 RegisterStartupScript 在所有元素之后呈现。

此外，JQuery 还支持延迟运行脚本，直到加载完所有内容。如果您使用以下代码包装代码：

$(document).ready(function()  /* alert code here */ );

或简写：

$(function()  /* alert code here */ );

这会延迟执行，直到文档准备好。这是另一种选择。

【讨论】：

谢谢，这确实起到了延迟执行的作用，但是还有另一个问题：现在 div 中的文本已经被编辑并且我想要更新的值，我得到了初始值。我想，我必须更早地将它保存到一些隐藏的控件或视图状态：在某些特定事件中......

你是说回发到服务器吗？

@user2082616 我原以为您必须在稍后（即在回发之前）将其保存到隐藏控件中。

是的，就在回发之前。无论如何，我需要在按下提交按钮时获取更新的值。

DIV 不会将内容发布到服务器，所以是的，您必须将值存储在隐藏中才能将其返回到服务器。 非常适合此操作，因为您可以轻松地在客户端和服务器上与之对话。您可能必须对结果进行序列化才能发布。默认情况下，asp.net 禁用 HTML 标记回发到服务器（以防止恶意内容），但您可以禁用它。