如何将 css 类添加到 html 通用控件 div？答案

【问题标题】：how to add css class to html generic control div?如何将 css 类添加到 html 通用控件 div？
【发布时间】：2019-08-12 00:35:40
【问题描述】：

我创建了一个这样的 div 标签：

System.Web.UI.HtmlControls.HtmlGenericControl dynDiv = 
    new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");

我给 div 标签添加了如下样式：

dynDiv.Style.Add(HtmlTextWriterStyle.BorderStyle, "1px solid #DBE0E4");
dynDiv.Style.Add(HtmlTextWriterStyle.Height, "auto");
dynDiv.Style.Add(HtmlTextWriterStyle.MarginTop, "5px");
dynDiv.Style.Add(HtmlTextWriterStyle.PaddingBottom, "5px");
dynDiv.Style.Add(HtmlTextWriterStyle.Width, "682px");

但我需要通过位于文件夹 ~/css/maincss.css 的外部 css 文件来控制 div 标签的样式。

如何将该文件中的 css 应用到该 div？

【问题讨论】：

给 div 元素添加一个类或 ID，然后你就可以在 CSS 中做你喜欢的事情了。

标签： c# css

【解决方案1】：

dynDiv.Attributes["class"] = "myCssClass";

【讨论】：

这是真的，尽管下面的其他答案适用于已经在类列表中的类。

【解决方案2】：

要将类添加到通过HtmlGenericControl 生成的div，您可以使用：

div1.Attributes.Add("class", "classname");

如果您使用Panel 选项，则为：

panel1.CssClass = "classname";

【讨论】：

在技术上取代了类。它没有添加它。您可以使用 dynDiv.Attributes["class"] += "myCssClass";
@GarrGodfrey 记得在类之间添加一个空格。

【解决方案3】：

如果您想将一个类添加到一个元素的现有类列表中：

element.Attributes.Add("class", element.Attributes["class"] + " " + sType);

【讨论】：

【解决方案4】：

我的做法是：

/// <summary>
/// Appends CSS Class seprated by a space character
/// </summary>
/// <param name="control">Target control</param>
/// <param name="cssClass">CSS class name to append</param>
public static void AppendCss(HtmlGenericControl control, string cssClass)
{
    // Ensure CSS class is definied
    if (string.IsNullOrEmpty(cssClass)) return;

    // Append CSS class
    if (string.IsNullOrEmpty(control.Attributes["class"]))
    {
        // Set our CSS Class as only one
        control.Attributes["class"] = cssClass;
    }
    else
    {
        // Append new CSS class with space as seprator
        control.Attributes["class"] += (" " + cssClass);
    }
}

【讨论】：

【解决方案5】：

我认为Curt的答案是正确的，但是，如果您想将一个类添加到一个已经在ASP.NET代码中声明了一个类的div。

这是我的解决方案，它是一个通用方法，因此您可以直接调用它：

Asp Net Div 声明：

<div id="divButtonWrapper" runat="server" class="text-center smallbutton fixPad">

添加类的代码：

divButtonWrapper.AddClassToHtmlControl("nameOfYourCssClass")

通用类：

public static class HtmlGenericControlExtensions
{
    public static void AddClassToHtmlControl(this HtmlGenericControl htmlGenericControl, string className)
    {
        if (string.IsNullOrWhiteSpace(className))
            return;

        htmlGenericControl
            .Attributes.Add("class", string.Join(" ", htmlGenericControl
            .Attributes["class"]
            .Split(' ')
            .Except(new[] { "", className })
            .Concat(new[] { className })
            .ToArray()));
    }
}

【讨论】：

我应该把那个泛型类放在哪里？
你可以把它放在你的 web 应用程序的 Util 文件夹中。
这是我为此目的创建的文件夹？
是的，但理论上你可以把它放在你想要的任何地方。仅用于组织目的。

【解决方案6】：

如果你要重复这个，不妨有一个扩展方法：

// appends a string class to the html controls class attribute
public static void AddClass(this HtmlControl control, string newClass)
{
    if (control.Attributes["class"].IsNotNullAndNotEmpty())
    {
        control.Attributes["class"] += " " + newClass;
    }
    else
    {
        control.Attributes["class"] = newClass;
    }
}

【讨论】：

【解决方案7】：

您不将 css 文件添加到 div，而是向其中添加一个类，然后将您的导入放在 HTML 页面的顶部，如下所示：

<link href="../files/external.css" rel="stylesheet" type="text/css" />

然后在您的代码中添加如下类：'myStyle'。

然后在 css 文件中执行如下操作：

.myStyle
{
   border-style: 1px solid #DBE0E4;
}

【讨论】：

你如何将.myStyle 类放到html元素上？这就是 OP 的问题所在。

【解决方案8】：

如果您想将类添加到元素的现有类列表中，另一种方法：

element.Attributes["class"] += " myCssClass";

【讨论】：

【解决方案9】：

扩展方法怎么样？

这里我有一个显示或隐藏方法。使用我的 CSS 类隐藏。

public static class HtmlControlExtensions
{
    public static void Hide(this HtmlControl ctrl)
    {
        if (!string.IsNullOrEmpty(ctrl.Attributes["class"]))
        {
            if (!ctrl.Attributes["class"].Contains("hidden"))
                ctrl.Attributes.Add("class", ctrl.Attributes["class"] + " hidden");
        }
        else
        {
            ctrl.Attributes.Add("class", "hidden");
        }
    }

    public static void Show(this HtmlControl ctrl)
    {
        if (!string.IsNullOrEmpty(ctrl.Attributes["class"]))
            if (ctrl.Attributes["class"].Contains("hidden"))
                ctrl.Attributes.Add("class", ctrl.Attributes["class"].Replace("hidden", ""));
    }
}

那么当你想显示或隐藏你的控件时：

myUserControl.Hide();

//... some other code

myUserControl.Show();

【讨论】：