如何将CSS类添加到html通用控件div中?


70

我创建了一个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");

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

如何将该文件中的CSS应用于此div?


将一个类或ID添加到div元素,然后您可以在CSS中使用它来完成您喜欢的事情。
Ben Everard

Answers:


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

这是正确的,尽管下面的其他答案适用于已经在类列表中的类。
GregoryBrad

40

要将类添加到通过使用HtmlGenericControl方式生成的div中,请执行以下操作:

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

如果使用该Panel选项,则将是:

panel1.CssClass = "classname";

9
从技术上讲,它取代了班级。它没有添加。您可以使用dynDiv.Attributes [“ class”] + =“ myCssClass”;
Garr Godfrey 2015年

4
@GarrGodfrey记住在类之间添加一个空格。
TrueWill


6

我的方法是:

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

4

我认为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()));
    }
}

我该把通用类放在哪里?
Dov Miller

1
您可以将其放在Web应用程序的Util文件夹中。
安德烈斯Villenas

那是我为此目的创建的文件夹吗?
Dov Miller

1
是的,但是从理论上讲,您可以将其放置在任何位置。仅用于组织目的。
安德烈斯Villenas

3

如果您要重复此操作,不妨使用扩展方法:

// 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;
    }
}

2

您没有将css文件添加到div中,而是向其中添加了一个类,然后将导入内容放在HTML页面的顶部,如下所示:

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

然后将类似以下的类添加到您的代码中:'myStyle'。

然后在css文件中执行以下操作:

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

以及如何将.myStyle类放到html元素上?这就是OP的问题。
mbomb007 '16

2

如果要将类添加到元素的现有类列表中,请使用另一种方法:

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

1

扩展方法怎么样?

在这里,我有一个show或hide方法。使用我的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();
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.