how to add css class to html generic control div?

Question

I created a div tag like this:

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

I added style to the div tag like this:

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

But I need to control the style of the div tag through an external css file located at folder ~/css/maincss.css.

How can I apply the css in that file to this div?

Add a class or ID to the div element, then you can do what you like with it in CSS. — Ben Everard
– Ben Everard, Commented Jun 29, 2011 at 7:58

Curtis · Accepted Answer · 2011-12-08 09:54:22Z

96

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

edited Dec 8, 2011 at 9:54

answered Jun 29, 2011 at 8:08

Curtis

104k69 gold badges280 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GregoryBrad Over a year ago

This is true, though the other answers below accommodate for the class already being in the list of classes or not.

2 revs, 2 users 78% · Accepted Answer · 2012-05-01 12:30:30Z

41

To add a class to a div that is generated via the HtmlGenericControl way you can use:

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

If you are using the Panel option, it would be:

panel1.CssClass = "classname";

edited May 1, 2012 at 12:30

community wiki

2 revs, 2 users 78%
jadarnel27

2 Comments

Geoduck Over a year ago

technically that replaces the class. It doesn't add it. You can use dynDiv.Attributes["class"] += "myCssClass";

TrueWill Over a year ago

@GarrGodfrey Remember to add a space between classes.

Fabio Napodano · Accepted Answer · 2014-04-19 10:21:45Z

14

if you want to add a class to an existing list of classes for an element:

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

answered Apr 19, 2014 at 10:21

community wiki

Fabio Napodano

Comments

Amit Bhagat · Accepted Answer · 2015-08-16 05:55:37Z

6

My approach would be:

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

answered Aug 16, 2015 at 5:55

community wiki

Amit Bhagat

Comments

Andrés Villenas · Accepted Answer · 2016-01-28 19:15:44Z

4

I think the answer of Curt is correct, however, what if you want to add a class to a div that already has a class declared in the ASP.NET code.

Here is my solution for that, it is a generic method so you can call it directly as this:

Asp Net Div declaration:

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

Code to add class:

divButtonWrapper.AddClassToHtmlControl("nameOfYourCssClass")

Generic class:

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

answered Jan 28, 2016 at 19:15

community wiki

Andrés Villenas

4 Comments

Dov Miller Over a year ago

Where should I put that Generic class?

Andrés Villenas Over a year ago

You can put it a Util folder of your web application.

Dov Miller Over a year ago

That's a folder that I create for that purpose?

Andrés Villenas Over a year ago

Yes, but in theory you can put it wherever you want. It's only for organization purposes.

2 revs · Accepted Answer · 2015-01-21 20:07:12Z

3

If you're going to be repeating this, might as well have an extension method:

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

edited Jan 21, 2015 at 20:07

community wiki

2 revs
Ben Sewards

Comments

Chris · Accepted Answer · 2011-06-29 08:02:05Z

2

You don't add the css file to the div, you add a class to it then put your import at the top of the HTML page like so:

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

Then add a class like the following to your code: 'myStyle'.

Then in the css file do something like:

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

answered Jun 29, 2011 at 8:02

Chris

3,2014 gold badges24 silver badges37 bronze badges

1 Comment

mbomb007 Over a year ago

And how do you get the .myStyle class onto the html element? That's what the OP's question is asking.

Rithin Chalumuri · Accepted Answer · 2019-08-11 16:35:40Z

2

Alternative approach if you want to add a class to an existing list of classes of an element:

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

answered Aug 11, 2019 at 16:35

community wiki

Rithin Chalumuri

Comments

2 revs · Accepted Answer · 2017-11-25 10:19:25Z

How about an extension method?

Here I have a show or hide method. Using my CSS class hidden.

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

Then when you want to show or hide your control:

myUserControl.Hide();

//... some other code

myUserControl.Show();

Collectives™ on Stack Overflow

how to add css class to html generic control div?

9 Answers 9

1 Comment

2 Comments

Comments

Comments

4 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

1 Comment

2 Comments

Comments

Comments

4 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related