CssClass change programatically

.NET
1

Hi,

I have a table in my asp.net that has a CssClass defined but when the page_Loads how can I programatically change the CssClass of the table.

I have tried googling this but haven’t had any success in finding a solution

tabletab1.CssClass = ("csstest");

I have tried the above code but that didn’t work.

if anyone could help me out that would be great! Thanks

Al

P.S - i’m using c#

2

Table needs to be a server control… so that you can change its properties programaticaly. Must have an ID attribute be marked with runat=“server”

You can use the Table Web Server Control (System.Web.UI.WebControls.Table) or the Html Server control (System.Web.UI.HtmlControls.HtmlTable).

for the first you can just change its CssClass string property…
Table1.CssClass = “myCssClass”;

for the Html Control you have to add an attribute to the attributes collection.
You don’t have a direct property for Css Classes like the Table Web Server Control.

first clear the attribute class and then add a new attribute.
[size=2]Table1.Attributes.Remove(“class”[size=2]);

[/size]Table1.Attributes.Add([/size]“class”, “myCssClass”);

Cheers,
rui

3

thanks for replying pufa.

I have tried using your code but I still can;t get it running yet.

Below I haqve pasted my code - would you (or someone else) please be able to take a look to see where I am going wrong?

<%@ Page language="c#" Codebehind="WebForm2.aspx.cs" AutoEventWireup="false" Inherits="tabs.WebForm2" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
	<HEAD>
		<title>WebForm2</title>
		<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
		<meta name="CODE_LANGUAGE" Content="C#">
		<meta name="vs_defaultClientScript" content="JavaScript">
		<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
		<style type="text/css">
.csstest {bgcolor: red; border: #000 1px solid; }
		</style>
	</HEAD>
	<body>
		<form id="Form1" method="post" runat="server">
			<asp:Table id="Table1" runat="server"><asp:TableRow><asp:TableCell>hey</asp:TableCell></asp:TableRow></asp:Table>
		</form>
	</body>
</HTML>

code behind

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace tabs
{
	/// <summary>
	/// Summary description for WebForm2.
	/// </summary>
	public class WebForm2 : System.Web.UI.Page
	{

		protected System.Web.UI.WebControls.Table Table1;
		
		void Page_Load(Object Sender, EventArgs e)
		{
			//Table1.CssClass = "";
			Table1.Attributes.Remove("class");
			Table1.Attributes.Add("class", "csstest");
		}

		#region Web Form Designer generated code
		override protected void OnInit(EventArgs e)
		{
			//
			// CODEGEN: This call is required by the ASP.NET Web Form Designer.
			//
			InitializeComponent();
			base.OnInit(e);
		}
		
		/// <summary>
		/// Required method for Designer support - do not modify
		/// the contents of this method with the code editor.
		/// </summary>
		private void InitializeComponent()
		{

		}
		#endregion
	}
}

Thanks for your time and help

Al

4

Sorry, I made a few mistakes in my previous comment.

This is how you change the CssClass property in a Asp.net WebControl
In this case an System.Web.UI.WebControls.Table Webcontrol.


void Page_Load(Object Sender, EventArgs e) {
[indent]Table1.CssClass = "csstest";
[/indent]}

if you use a regular Html Table, you can make an HtmlControl by adding an ID attribute an runat=“server” attribute.


<table id="htmlTable1" runat="server">
<tr>
<td>Hey2</td>
</tr>
</table>

Since HtmlControls don’t have a CssClass Property you have to add an attribute to the Attributes Collection of the Control.


void Page_Load(Object Sender, EventArgs e) {
[indent]htmlTable1.Attributes.Add("class", "csstest");

[/indent]}
[size=1][color=#008000][/color][/size]

you don’t need to “clear” the attribute first (Remove method call).
If you have a class attribute in your table the Add method will replace it.

I was thinking that if you add a class attribute in the html markup, calling the add method would append another value to the attribute. It doesn’t.

Cheers,
Rui

5

pufa,

I replaced the page_load with the code you just supplied and then ran the project and this was the HTML output.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
	<HEAD>
		<title>WebForm2</title>
		<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
		<meta name="CODE_LANGUAGE" Content="C#">
		<meta name="vs_defaultClientScript" content="JavaScript">
		<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
		<style type="text/css">
.csstest {bgcolor: red; border: #000 1px solid; }
		</style>
	</HEAD>
	<body>
		<form name="Form1" method="post" action="WebForm2.aspx" id="Form1">
<input type="hidden" name="__VIEWSTATE" value="dDw4ODU3ODExMjA7Oz7zcGXv5pEZQPZGeLBrK2s25VMYRg==" />

			<table id="Table1" border="0">
	<tr>
		<td>hey</td>
	</tr>
</table>
		</form>
	</body>
</HTML>

So it didn’t appear to work? Or have I mad a mistake somewhere?

Thanks,

Al

6

Strange I pasted your code in VS.net, corrected it and it worked for me…

I edited my last post …

7

You are missing this in your code behind…

/// <summary>

/// Required method for Designer support - do not modify

/// the contents of this method with the code editor.

/// </summary>

private void InitializeComponent()

{

[size=2]this.Load += new System.EventHandler(this[size=2].Page_Load);

[/size][/size]}

8

Thanks pufa - That was the problem - I hadn’t noticed that!

Al :wink: