Css 在 asp.net c# 中不起作用？答案

【问题标题】：Css not working in asp.net c#?Css 在 asp.net c# 中不起作用？
【发布时间】：2016-06-16 09:57:23
【问题描述】：

我有三个文件html,css,javascript。我的css 不工作。我不知道为什么？这是我的 aspx 代码：

<asp:Content ID="Content2" ContentPlaceHolderID="body" Runat="Server">
<form id="form" runat="server">
<div id="editor" contenteditable="true" runat="server"></div>
<br />
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
</form>
</asp:Content>

这里是 StyleSheet.css

#editor {
width: 100px;
height: 500px;
background-color:#444;
color: white;
font-size: 14px;
font-family: monospace;
display: block;
}
.statement {
color: #00FF00;
}

这里是 JScript.js

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

在 Masterpage.master 中，这里是 StyleSheet.css 和 JScript.js 的链接：

<link rel="stylesheet" href="StyleSheet.css" type="text/css" />
<script type="text/javascript" src="JScript.js"></script>

div 高度、宽度、背景颜色不变。

【问题讨论】：

标签： javascript c# html css asp.net

【解决方案1】：

由于它是在服务器上运行，因此 ID 将被更改，将 ClientIDMode 更改为静态以便可预测，但更好的是：向控件添加 CssClass。

【讨论】：

但是runat="Server" 是强制性的，因为我想在后面的代码中使用div 文本
是的，但是当它生成到客户端时，ID 会有所不同 - 查看浏览器中的 html 源代码。在生成过程中，ID 中会添加一些东西 - 所以它不再只是“#ID”。这就是为什么您需要更改为 ClientIDMode="static"

【解决方案2】：

您已创建 div runat="server"，这会将 div 的 ID 更改为 ContentPlaceHolder，因此在页面中将找不到 #editor。

要么在css 中创建一个class，然后将class 分配给div，要么在div 上设置ClientIDMode="static"，这样它的id 将与您设置的相同。

.editor {
width: 100px;
height: 500px;
background-color:#444;
color: white;
font-size: 14px;
font-family: monospace;
display: block;
}

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

或者在div上添加ClientIDMode="static

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

【讨论】：

但是runat="Server" 是强制性的，因为我想在后面的代码中使用div 文本
是的，我没有删除无论如何你可以在css 中创建一个类并将该类提供给div 看答案。
谢谢它现在正在工作。你太棒了 :) 你能告诉我如何在后面的代码中获取 div 文本。我试试这个但它不起作用string cmd = editor.InnerText;TextBox1.Text = cmd; 它只有在我这样做时才有效这样<div id="editor" calss="editor" contenteditable="true" runat="server">HELLO</div> 它返回HELLO
很抱歉，但它检索到NULL 值。我使用String cmd=editor.InnerText
你用过ClientIDMode="static 或者你上课了吗？

【解决方案3】：

只需放入 div "clientidmode=Static" 使用下面的代码

#editor {
 width: 100px;
 height: 500px;
 background-color:#444;
 color: white;
 font-size: 14px;
 font-family: monospace;
 display: block;
}

<div id="editor" clientidmode="Static" runat="server"></div>

试试这个。它非常适合我

【讨论】：

你能告诉我如何在后面的代码中获取 div 文本。我试试这个，但它不起作用string cmd = editor.InnerText;TextBox1.Text = cmd; 只有当我这样做时才有效<div id="editor" calss="editor" contenteditable="true" runat="server">HELLO</div> 它返回 HELLO -跨度>
@Ashley 您正在将您的 div 内容处理为 TextBox1 如果该 div 中没有数据，您应该手动或通过代码添加一些数据，它将如何工作
@Ansari 用户在div 中输入sql 查询并按button 然后在div 文本中输入后面的代码。我想这样做
@Ashley 用户如何在 div 中输入（不是输入字段），用户可以在文本框中输入文本
@Ansari 请检查您的电子邮件

【解决方案4】：

如果您不使用 ClientIDMode 而不添加它，则无需更改您的 div 只需复制以下 css：

你的 div：

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

我还在最后添加了渲染的 Div

 div[id$='editor'] {
      width: 100px;
      height: 500px;
      background-color: #444;
      color: white;
      font-size: 14px;
      font-family: monospace;
      display: block;
}

&lt;DIV id="ContentPlaceHolder1_editor" contentEditable="true"&gt;Lorem Ipsum&lt;/DIV&gt;

希望这会对你有所帮助。

【讨论】：