How to Add CSS Class to HTML Generic Control Div

Add CSS class to a div in code behind

What if:

 <asp:Button ID="Button1" runat="server" CssClass="test1 test3 test-test" />

To add or remove a class, instead of overwriting all classes with

   BtnventCss.CssClass = "hom_but_a"

keep the HTML correct:

    string classname = "TestClass";

    // Add a class
    BtnventCss.CssClass = String.Join(" ", Button1
               .CssClass
               .Split(' ')
               .Except(new string[]{"",classname})
               .Concat(new string[]{classname})
               .ToArray()
       );

     // Remove a class
     BtnventCss.CssClass = String.Join(" ", Button1
               .CssClass
               .Split(' ')
               .Except(new string[]{"",classname})
               .ToArray()
       );

This assures

• The original classnames remain.
• There are no double classnames
• There are no disturbing extra spaces

Especially when client-side development is using several classnames on one element.

In your example, use

   string classname = "TestClass";

    // Add a class
    Button1.Attributes.Add("class", String.Join(" ", Button1
               .Attributes["class"]
               .Split(' ')
               .Except(new string[]{"",classname})
               .Concat(new string[]{classname})
               .ToArray()
       ));

     // Remove a class
     Button1.Attributes.Add("class", String.Join(" ", Button1
               .Attributes["class"]
               .Split(' ')
               .Except(new string[]{"",classname})
               .ToArray()
       ));

You should wrap this in a method/property ;)

Apply CSS for an HTML generic control like UL and LI in ASP.NET

Please try this,

ull.Style.Add("background-color", "Red");

Or, I have tested this, will definitely work, please check

ull.Attributes.Add("class", "yourClass");

Edit:
To test this solution I have provided you:

1. make new blank master page and put <ul runat="server" id="ull">

2. then add a new page and use the above master page.

3. make findcontrol ul and put in CSS as I have mentioned in the answer.

4. then run your page, and view source of your HTML page and you will find what you are looking for. Like

Add CSS class to DnnModule outer div

Found an answer on the DotNetNuke.com forums:

<script runat="server">    
    Private Sub Page_PreRender(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.PreRender
        Try
            Dim cParent As HtmlGenericControl = CType(Me.Parent, HtmlGenericControl)
            cParent.Attributes("class") = cParent.Attributes("class") + " span6"
        Catch ex As Exception
        End Try
    End Sub
</script>

Adding this to the container .ascx file allows me to insert my own specific class to the wrapper div.

Source: http://www.dotnetnuke.com/Resources/Forums/forumid/109/threadid/458919/scope/posts.aspx

How to change CSS class of a HTML page element using ASP.NET?

The FindControl method searches for server controls. That is, it looks for controls with the attribute "runat" set to "server", as in:

<li runat="server ... ></li>

Because your <li> tags are not server controls, FindControl cannot find them. You can add the "runat" attribute to these controls or use ClientScript.RegisterStartupScript to include some client side script to manipulate the class, e.g.

System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append("<script language=\"javascript\">");
sb.Append("document.getElementById(\"li1\").className=\"newClass\";")
sb.Append("</script>");
ClientScript.RegisterStartupScript(this.GetType(), "MyScript", sb.ToString());

how to change a css class of div in master page from update panel in content page

Without the UpdatePanel you would use FindControl to change the class.

Panel panel = Master.FindControl("Panel1") as Panel;
panel.CssClass = "myClass";

But since you use an UpdatePanel, the easiest way is to use jQuery.

On the master page the Panel and the script

<asp:Panel ID="Panel1" runat="server">Welcome to StackOverflow</asp:Panel>

<script type="text/javascript">
    function changeClass(className) {
        $("#<%= Panel1.ClientID %>").attr("class", className);
    }
</script>

Then in the code behind of the aspx page, you can call that javascript function on PostBack.

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "changeClassName", "changeClass('myClass');", true);

Changing user control css class in code behind

So I solved the problem by defining the ListViews ItemDataBound event handler and assigning the css class in there. The problem previously was, that since my controls were inside updatePanels the ItemDataBound event was not firing. I had to manually call "DataBind()" inside the click method.

Inside my default.aspx

// Exposed click event, updates RecentBooks control sqlDataSource.
private void SidebarItems1_Clicked ( object sender , EventArgs e ) {
  RecentBooks1.updateDataSource( SidebarItems1.FacultyId.ToString() );
  SidebarItems1.DataBind();

}

Inside my user control.ascx

protected void sidebarListView_ItemDataBound ( object sender , ListViewItemEventArgs e ) {
  LinkButton button = e.Item.FindControl( "NameLabel" ) as LinkButton;
  if (FacultyName != null && button != null) {
     if ( button.Text == FacultyName ) {
        button.CssClass = "sidebarItemActive";
     }
  }

How to add HtmlGenericControl to a HtmlNode?

Try the code below. you will need to make some changes. controls innerHTML is well formed and can be used as innerXML for an xmlNode

XmlDocument doc = new XmlDocument();
//Load your xml here TODO
var divEl = doc.DocumentElement.SelectSingleNode("//div[@id='test']"); //Change your xpath here TODO
var newdiv = new HtmlGenericControl("div"); 
newdiv.Attributes.Add("id", "id"); 
newdiv.Attributes.Add("text", "text"); 
newdiv.Attributes.Add("class", "class");

XmlNode newNode = doc.CreateNode("NodeType", "NodeName", "URI/if/any"); //update your variables here
newNode.InnerXml = newdiv.InnerHtml;
divEl.AppendChild(newNode);

Hope this helps

---

Related Topics