在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. 不引人注目的 JavaScript是你的朋友!
5. 维护变得更加复杂,因为您需要记住硬编码JavaScript字符串在C#代码中的位置.
6. 智能感知失去了.Visual Studio有一个很棒的JavaScript编辑器,你通过对字符串进行硬编码就会失去所有的功能
7. 我提到Unobtrusive JavaScript是你的朋友!
8. 你失去了功能分离的好处.
9. 如果您有重复的按钮具有相同的功能,那么您有重复的代码.

我敢肯定有一堆我错过了.

Answer 2

这不是CSS而是JavaScript,使用jQuery库.怀疑是对的,这个代码有几个" 臭 "的部分:

• OnClientClick在onclick=""属性中使用结果,这比绑定事件要好.这是动态完成的,表明它发生了多种类型.

• 使用和硬编码background-color-一个CSS类会更好,这种颜色可能是重复的代码或CSS文件很多次,需要大量的工作来改变(重新部署的站点代码,而不是依靠资源文件).更好的方法是使用CssClass:

  imageDiv.CssClass = "imageDiv";
  

  并在您的CSS文件中:

  .imageDiv { width: 70px; height: 50px; text-align: center; padding-top: 5px; }
  

  这允许您轻松地更改设计,并imageDiv在其上下文中具有不同的样式(例如,当它在侧边栏中时,使用选择器可以更小.sidebar .imageDiv)

• 使用String.FormatJavaScript/CSS并不漂亮.例如,这是在JavaScript中有效(和jQuery支持).css({'color': '#FBFBFB', 'border-color':"green"}).使用此代码,它应该写为.css({{'color': '#FBFBFB', 'border-color':""green""}})- 转义字符串的双引号,以及String.Format的大括号.

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

Answer 3

生成的代码实际上是Javascript,虽然它操纵了一些元素的CSS.

我想说最好的方法是在加载页面时执行它.如果您只需要将一个函数绑定到click事件,那么您可以在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 IMO.

Answer 6

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

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

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

我不喜欢在c#/ javascript中操纵颜色/边框等,因为随着项目的增长,您的演示文稿信息会在整个地方结束,更改或覆盖颜色变得困难.