在 C# 代码中嵌入 CSS/jQuery 代码不好吗？

Question

我在查看我们的工作代码库时看到了这种类型的代码：

    private Button AddClearButton()
    {
        return new Button
                   {
                       OnClientClick =
                           string.Format(@"$('.{0}').css('background-color', '#FBFBFB');
                                   $('#' + {1}).val('');
                                   $('#' + {2}).val('');
                                   return false;", _className, _hiddenImageNameClientId, _hiddenPathClientId),
                       Text = LanguageManager.Instance.Translate("/button/clear")
                   };
    } 

或

            _nameAndImageDiv = new HtmlGenericControl("div");
            var imageDiv = new HtmlGenericControl("div");
            imageDiv.Attributes.Add("style", "width: 70px; height: 50px; text-align: center; padding-top: 5px; ");

            var nameDiv = new HtmlGenericControl("div");
            nameDiv.Attributes.Add("style", "width: 70px; word-wrap: break-word; text-align: center;");
            var image = new HostingThumbnailImage();

免责声明：我以前没有使用过 CSS。但我听说我们应该把css、js、html、C#分开，而不是把它们放在一起。

那么，上面的代码是不是很糟糕？如果是，更好的方法是什么？

Answer 1

我突然想到几个问题，但并不是致命的。

排名不分先后：

1. 您将失去在服务器或客户端上缓存 JavaScript 文件的能力。
2. 您增加页面的一侧。如果每个按钮都有大量嵌入的 JavaScript，那么页面大小和加载时间都会增加。
3. 调试将变得极其困难。
4. Unobtrusive JavaScript 是你的朋友！
5. 维护变得更加复杂，因为您需要记住硬编码 JavaScript 字符串在 C# 代码中的位置。
6. 智能感知丢失。 Visual Studio 有一个很棒的 JavaScript 编辑器，通过对字符串进行硬编码，你会失去所有这些功能。
7. 我有没有提到 Unobtrusive JavaScript 是你的朋友！
8. 您将失去功能分离的好处。
9. 如果您有具有相同功能的重复按钮，那么您就有重复的代码。

我确信我错过了很多。

Answer 2

这不是 CSS，而是 JavaScript，使用 jQuery 库。 有几个“smelly”部分：

• 您的怀疑是正确的，此代码 OnClientClick 会产生 onclick="" 属性，该属性不如绑定事件好。这是动态完成的，表明它发生多种类型。

• 使用和硬编码background-color - CSS类会更好，这种颜色可能在代码或CSS文件中重复很多次，并且需要大量工作才能被更改（重新部署站点代码，而不是依赖资源文件）。更好的方法是使用 CssClass：

  imageDiv.CssClass = "imageDiv";
  

  并在 CSS 文件中包含：

  .imageDiv { 宽度：70px;高度：50px；文本对齐：居中；顶部填充：5px； }
  

  这使您可以轻松更改设计，并在其上下文中设置最佳的不同 imageDiv 样式（例如，使用选择器 .sidebar 在侧边栏中时它可以更小） .imageDiv)

• 在 JavaScript/CSS 中使用 String.Format 并不漂亮。例如，这在 JavaScript 中有效（并且支持 jQuery）：.css({'color': '#FBFBFB', 'border-color':"green"})。使用此代码，应将其编写为 .css({{'color': '#FBFBFB', 'border-color':""green""}}) - 转义双引号字符串，大括号表示 String.Format。

• 正如您所提到的，数据/表示/行为没有分离。

Answer 3

生成的代码实际上是 Javascript，尽管它操纵了某些元素的 CSS。

我想说最好的方法是在页面加载时执行它。
如果您需要的只是将一个函数绑定到单击事件，那么您可以在 Javascript/JQuery 中完成这一切，如下所示：

$("#<%= this.TheButton.ClientID %>").click(function () {
    $("...").css("...", "...");
    // ...
});

我怀疑 ASP.NET 当前只是生成一个带有 onclick=... 的按钮，这通常被认为是对于 Javascript 编程来说这是一个不好的做法，但这并不是一个大问题。

在我看来，这里的普遍问题是视图和模型逻辑可能混合在一起，但在传统的 ASP.NET 中很难避免它。

Answer 4

回答到重点了：

上面的代码是不是不好？

不好，从“不好的编程实践”的意义上来说，是的。绝对不好。

更好的方法是什么？

更好的方法是将代码拆分为

• 事件生成组件（您不必担心这一点）

• 事件监听器（您必须对其进行编码）

为什么这是更好的方法？

因为它良好的编程实践，并且这带来了大量优势。这本身就是一门学科，现在所有毕业生都必须学习。 ：D

Answer 5

以这种方式实现此 JQuery 的原因很可能是由于必须引用服务器端控件 Id（_hiddenImageNameClientId、_hiddenPathClientId），这在 .NET 4 之前需要做一些工作。 （参见.NET 4 中的客户端 ID)

就“正确性”而言，我认为这是不正确的，因为我很想更喜欢在 JavaScript 中看到定义良好的客户端层来定义此单击事件。在我看来，混合服务器和客户端代码“闻起来”很糟糕，并且会破坏 SoC。

Answer 6

我不喜欢在代码中嵌入 CSS。在我看来，这两种情况下更好的方法是向元素添加一个类，然后将 CSS 放入 CSS 文件中。在你的第一个例子中，
背景颜色是用javascript更改的，我会添加一个类“.addClass('selected')”（或toggleClass），其名称有意义。在第二个示例中，删除 CSS 并添加一个类 .Attributes.Add("class", "xxx")。

你的 CSS 文件将包含这样的内容：

.selected {
    background-color: #FBFBFB;
}
...

我不喜欢在 c#/javascript 中操作颜色/边框等，因为随着项目的增长，你的演示文稿信息最终会遍布各处，并且更改或覆盖颜色变得很困难。

Answer 7

第一个示例实际上是在单击事件触发时运行 JavaScript (jQuery)。第二个只是添加内联样式。我敢打赌这种方法是用来获取客户端 id 引用的（这在 .net 4.0 之前是很困难的）——尽管，还有其他方法可以使用纯 JavaScript 来获取它。

有些人会说这没关系，另一些人会说这是不好的做法并且丑陋。这实际上取决于您的编程风格。而且它绝对不是致命的。

优点：
- 不需要单独的文件
- 更快的开发（可以说）

缺点：
- 层之间没有明显的分离
- 随着项目变大，难以维护和调试

可能还有更多，但这就是我现在能想到的。

就我个人而言，我会远离这种代码。它使调试和维护变得更加复杂，并且对于接触您的代码的其他程序员来说不容易理解（特别是如果您有仅使用 javascript 和仅使用 C# 的程序员）。但这是经验丰富的程序员无法处理的，尤其是在小型项目上。

Answer 8

我的回答是一些问题：

• 内联样式或将它们放在 css 文件中更好
• 什么将 javascript 与 HTML 混合或将它们放在 js 文件中更好

有很多内容需要讨论来回答这些问题以及一些因情况而异的注意事项。

简短的回答：将其混合是一种不好的做法。优先选择 css 类而不是内联样式。您还可以使用 jquery 的选择器根据 css 类或 id 将动态行为附加到 html 元素。此外，您可以根据包含关系有不同的行为。

Answer 9

这段代码调试起来会非常烦人。您询问了一个更好的解决方案，看来这里所做的一切都可以只用 javascript 来完成。

如果您绝对需要 C# 逻辑来执行此操作，我会将所有 javascript 代码包装到一个函数中，并从您的代码隐藏中专门调用该函数。

Answer 10

第一个示例实际上是在单击事件触发时运行 JavaScript (jQuery)。第二个只是添加内联样式。我敢打赌这种方法是用来获取客户端 id 引用的（这在 .net 4.0 之前是很困难的）——尽管，还有其他方法可以使用纯 JavaScript 来获取它。

有些人会说这没关系，另一些人会说这是不好的做法并且丑陋。这实际上取决于您的编程风格。而且它绝对不是致命的。

优点： - 不需要单独的文件 - 更快的开发（可以说）

缺点： - 没有明确的层分离 - 随着项目变大，难以维护和调试

可能还有更多，但这就是我现在能想到的。

就我个人而言，我会远离这种代码。它使调试和维护变得更加复杂，并且对于接触您的代码的其他程序员来说不容易理解（特别是如果您有仅使用 javascript 和仅使用 C# 的程序员）。但这是经验丰富的程序员无法处理的，尤其是在小型项目上。

Answer 11

我相信很多人都给出了为什么这是一种可怕的方法的充分理由。它确实有效，很多事情也是如此，但这并不意味着你应该继续这样做。

我要在这里插入我自己的博客和目的一个阻止您编写这种特定类型的代码的解决方案，因为我过去常常做这样的事情，而自己却没有更好的解决方案。

在我的博客文章中，我还链接到我不久前提出的一个有关此问题的问题。它展示了如何使用它来完全避免这种类型的依赖性。如果您发现很难理解我的意思，我也很乐意回答有关此方法的任何问题。