C# 在C代码中嵌入CSS/jQuery代码是不是很糟糕？_C#_Javascript_Asp.net_Css_Refactoring

C# 在C代码中嵌入CSS/jQuery代码是不是很糟糕？

c# javascript asp.net css

C# 在C代码中嵌入CSS/jQuery代码是不是很糟糕？,c#,javascript,asp.net,css,refactoring,C#,Javascript,Asp.net,Css,Refactoring,我在查看我们的工作代码库时看到了这种类型的代码： private Button AddClearButton() { return new Button { OnClientClick = string.Format(@"$('.{0}').css('background-color', '#FBFBFB');

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

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

或

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

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

这不是CSS而是JavaScript，使用库。您的怀疑是对的，此代码有几个“”部分：

使用
```
OnClientClick
```
会产生
```
onclick=“
```
属性，这不如绑定事件好。这是动态完成的，表明它发生在多种类型中
使用和硬编码
```
背景色
```
-CSS类会更好，这种颜色可能在代码或CSS文件中重复了很多次，并且需要进行大量更改（重新部署站点代码，而不是依赖资源文件）。更好的方法是使用：
在CSS文件中包含：
```
.imageDiv { width: 70px; height: 50px; text-align: center; padding-top: 5px; }
```
这使您可以轻松更改设计，并使不同的
```
imageDiv
```
在其上下文中具有最佳样式（例如，当它位于侧栏中时，可以使用选择器
```
.sidebar.imageDiv
```
）
在JavaScript/CSS中使用
```
String.Format
```
，并不好看。例如，这在JavaScript中是有效的（并且支持jQuery）：
```
.css（{'color'：'FBFBFB'，'border color'：“green”}）
```
。有了这段代码，它应该写成
```
.css（{{'color'：'fbfb'，'border color'：“green”“}}）
```
-为字符串转义双引号，为string.Format转义大括号
正如您所提到的，没有数据/表示/行为的分离

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

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

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

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

$（“#”）点击（函数（）{
$（“…”）.css（“…”，“…”）；
// ...
});

我怀疑ASP.NET目前只是生成了一个带有onclick=…（onclick=…）的按钮，这通常被认为是Javascript编程的一种糟糕做法，但这并不是一个大问题

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

最有可能的原因是以这种方式实现此JQuery是因为必须引用服务器端控件ID（\u hiddenImageNameClientId，\u hiddenPathClientId），其中，在.NET4之前需要做一些工作。（见

至于“正确性”，我会认为这是不恰当的，因为我更喜欢在JavaScript中定义一个定义良好的客户端层来定义这个点击事件。混合服务器和客户端代码“气味”我不喜欢在代码中嵌入CSS。在我看来，在这两种情况下，更好的方法是向元素添加一个类，然后将CSS放入CSS文件中。在第一个示例中使用javascript更改背景颜色时，我会添加一个名称合理的class“.addClass（'selected'）”（或toggleClass）。在第二个示例中，删除CSS并添加一个类。Attributes.add（“class”，“xxx”）

您的CSS文件将包含以下内容：

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

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

我不喜欢在c#/javascript中操纵颜色/边框等，因为随着项目的发展，您的演示信息会到处都是，更改或覆盖颜色变得很困难。

在我的脑海中，我可以想到几个问题，但这不是致命的

无特定顺序：

您将无法在服务器或客户端上缓存JavaScript文件

如果每个按钮都有很多嵌入的JavaScript，那么页面大小，从而加载时间就会增加

调试将变得极其困难

JavaScript是你的朋友

维护变得更加复杂，因为您需要记住硬编码JavaScript字符串在C代码中的位置

VisualStudio有一个很棒的JavaScript编辑器，通过硬编码字符串，您将失去所有这些功能

我说过JavaScript是你的朋友吗

您将失去功能分离的好处

如果有具有相同功能的重复按钮，则有重复代码

我肯定我错过了很多东西。

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

有人会说这没关系，也有人会说这是一种糟糕的做法，很难看。这真的取决于你的编程风格。这绝对不是致命的

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

缺点： -没有明确的分层 -随着项目的发展，维护和调试变得越来越困难

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

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

这一点的答案是：

上述代码是否错误？

糟糕，在“糟糕的编程实践”的意义上，是的，绝对糟糕

什么是更好的方法？

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

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