如何从 div 内部的 asp.net c# 代码中获取文本？

Question

实际上，我正在创建一个 SQL QUERY 编辑器，用户在其中输入查询，然后我获取此文本并传递给 SQL COMMAND 并执行查询并将结果显示给GRIDVIEW 中的用户。但是，问题是我如何获取文本在codebehind 来自<div contenteditable="true" ></div>。 我有 3 个文件，它们是 html、JScript.js、StyleSheet.css。 我输入textbox 只是为了检查在按钮单击时检索textbox 中的值，但它不起作用。 这是我的aspx代码：

<asp:Content ID="Content2" ContentPlaceHolderID="body" Runat="Server">
<form id="form1" runat="server">
<div id="editor" contenteditable="true"></div>
<br />
<asp:Button runat="server" OnClick="load" Text="Submit" />
<asp:TextBox   ID="TextBox1" ForeColor="White" runat="server"></asp:TextBox>
</form>
</asp:Content>

这里是 aspx.cs 代码：

public void load(object sender, EventArgs e)
{
HtmlGenericControl footer = (HtmlGenericControl)mainContent.FindControl("editor");
String cmd = footer.InnerHtml.ToString();
TextBox1.Text = cmd;
}

这里是 JScript.js 代码：

$(function () {
$("#editor").on("keydown keyup", function (e) {
    if (e.keyCode == 32) {
        var text = $(this).text().replace(/[\s]+/g, " ").trim();
        var word = text.split(" ");
        var newHTML = "";

        $.each(word, function (index, value) {
            switch (value.toUpperCase()) {
                case "SELECT":
                case "FROM":
                case "WHERE":
                case "LIKE":
                case "BETWEEN":
                case "NOT LIKE":
                case "FALSE":
                case "NULL":
                case "FROM":
                case "TRUE":
                case "NOT IN":
                    newHTML += "<span class='statement'>" + value + "&nbsp;</span>";
                    break;
                default:
                    newHTML += "<span class='other'>" + value + "&nbsp;</span>";
            }
        });

        $(this).html(newHTML);

        //// Set cursor postion to end of text
        var child = $(this).children();
        var range = document.createRange();
        var sel = window.getSelection();
        range.setStart(child[child.length - 1], 1);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
        $(this)[0].focus();
    }
});
});

所有代码工作正常，但问题是我如何从div 内部获取用户以查询形式输入的codebehind 中的文本。谢谢

Answer 1

像这样在 div 中添加runat="server"：-

<div id="editor" contenteditable="true" runat="server">Lorem Ipsum</div>

修改您的脚本而不是 $("#editor") 使用 $("div[ID$='editor']")，如下所示：

当您在渲染 ID 自动更改后添加 runat="server" 时，现在您的 ID 不再是 editor，因为 runat 标签已更改，它将像这样 ctl00_body_editor（可能会有所不同，只是为了您的理解我我正在写这个）所以这个 -> $("div[ID$='editor']") 会给你确切的 ID。

$(function () {
$("div[ID$='editor']").on("keydown keyup", function (e) {
    if (e.keyCode == 32) {
        var text = $(this).text().replace(/[\s]+/g, " ").trim();
        var word = text.split(" ");
        var newHTML = "";

        $.each(word, function (index, value) {
            switch (value.toUpperCase()) {
                case "SELECT":
                case "FROM":
                case "WHERE":
                case "LIKE":
                case "BETWEEN":
                case "NOT LIKE":
                case "FALSE":
                case "NULL":
                case "FROM":
                case "TRUE":
                case "NOT IN":
                    newHTML += "<span class='statement'>" + value + "&nbsp;</span>";
                    break;
                default:
                    newHTML += "<span class='other'>" + value + "&nbsp;</span>";
            }
        });

        $(this).html(newHTML);

        //// Set cursor postion to end of text
        var child = $(this).children();
        var range = document.createRange();
        var sel = window.getSelection();
        range.setStart(child[child.length - 1], 1);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
        $(this)[0].focus();
    }
});
});

并使用此代码

protected void load(object sender, EventArgs e)
    {       
        ContentPlaceHolder mainContent = (ContentPlaceHolder)this.Master.FindControl("body");
        HtmlGenericControl footer = (HtmlGenericControl)mainContent.FindControl("editor");
        String cmd = footer.InnerHtml.ToString();
        TextBox1.Text = cmd;
    }

body 是 ContentPlaceHolderID 你可以在你的内容页面上找到它

<asp:Content ID="Content2" ContentPlaceHolderID="body" Runat="Server">

为您的内容页面使用此 html

<asp:Content ID="Content2" ContentPlaceHolderID="body" Runat="Server">
<div id="editor" contenteditable="true"></div>
<br />
<asp:Button runat="server" OnClick="load" Text="Submit" />
<asp:TextBox   ID="TextBox1" ForeColor="Black" runat="server"></asp:TextBox>
</asp:Content>

希望对你有帮助

Answer 2

为您的DIV 添加runat=server 以在代码隐藏中访问

<div id="editor" runat=server contenteditable="true"></div>