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();
    }
});
});

所有代码都运行良好，但问题是如何从codebehind内部div获取用户以查询形式输入的文本。谢谢

Answer 1

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

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

Answer 2

在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（可能是不同的只是为了你的理解我写这个）所以这 - ＆gt; $("div[ID$='editor']")会为您提供准确的身份证明。

$(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>

希望这会对你有所帮助

如何在asp.net c＃后面的代码中从div内部获取文本？

2 个答案: