Select a CSS design with C# coding in ASP.net

I have defined two classes in my embedded CSS on the Default.aspx page. If necessary, I can move the code to an external CSS file.

Is it possible to write C# code that allows me to select between these two styles for my table after clicking a button? I have limited experience with ASP and C#.

The classes are as follows:

   .tftable
    {
        background-color: Blue;
        font-size: 12px;
        color: #333333;
        margin: 0px;
        padding: 0px;
        width: 100%;
        border-width: 1px;
        border-color: #729ea5;
        border-collapse: collapse;
    }

    .CSSTable
    {
        background-color: Gray;
        margin: 0px;
        padding: 0px;
        width: 100%; /*Fits the <div>*/
        box-shadow: 10px 10px 5px #888888;

    }

So, by clicking one button, I want my table to use the "tftable" class, and by clicking another button, I want it to use the "CSS" class.

Best regards

c#htmlasp.netcss

Answer №1

This is not C# code, but rather JavaScript code.

Insert a style link with the following Id:

<link href="css/style1.css" type="text/css" rel="stylesheet" id="stylesheet" />

Next, create a JavaScript function to switch the CSS file:

function changeStyle(name){
    if(name=='style1')
        document.getElementById('stylesheet').href='css/style1.css';
    else if(name=='style2')
        document.getElementById('stylesheet').href='css/style2.css';
    else if(name=='style3')
        document.getElementById('stylesheet').href='css/style3.css';
}

Invoke this function with your buttons:

<ul>
<li><a href="javascript:changeStyle('style1')">Style1</a></li>
<li><a href="javascript:changeStyle('style2')">Style2</a></li>
<li><a href="javascript:changeStyle('style3')">Style3</a></li>
</ul>

For more information, visit the following references:

Answer №2

If you prefer using the same css file for both styles, give this a shot.

protected void Button1_Click(object sender, EventArgs e)
{
    myTable.Attributes.Add("class", "tftable");
}

protected void Button2_Click(object sender, EventArgs e)
{
    myTable.Attributes.Add("class", "CSSTable");
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Expanding a Material UI Accordion does not cause the surrounding content to shift or move

I'm currently designing a User Interface for a web application that allows users to have multiple projects open simultaneously. To achieve this, I decided to use an accordion as the logical component in the left navigation bar. The reason behind this ...

javascriptcssreactjsmaterial-ui

What is the best way to create a flexible Ul-LI menu?

Is it possible to create a flexible menu where clicking on an item does not cover other items in the menu? #demo { margin: 30px 0 50px 0; font-family: sans-serif; } #demo .wrapper { display: inline-block; width: 180px; height: 20px; position ...

javascripthtmlcssdrop-down-menu

Troubleshooting: GSM Modem AT Commands not functioning properly in loop condition

I have been working on a project in .net that involves sending SMS messages using a GSM Modem Device. While I am able to send single SMS messages successfully, I encounter issues when trying to loop through AT Commands to send SMS to multiple recipients. T ...

c#.netserial-portat-commandmodem

Adjust the position of an image to move it closer to the top using CSS

I have a fiddle where I am trying to adjust the position of an image (keyboard) to match a specific design. https://i.sstatic.net/flqCH.png In my fiddle, the keyboard image is slightly lower than the desired position shown in the design. I am looking for ...

javascripthtmlcsstwitter-bootstrap-4

Creating an HTML table from dynamic JSON data - A comprehensive guide

I am in need of a solution to transform JSON data into an HTML table format quickly and easily. Can anyone provide guidance on effectively utilizing PartialView to recursively render tables, ensuring that most details are visible? ...

c#htmljsonasp.net-mvc

CssLint detected an unfamiliar property: "fill"

Currently, I am updating the color of an SVG path using CSS: .compute .svg path { fill: #fff; } The functionality is working properly, however, during a CSSLint check, I received this warning: Unknown property: "fill" I am unsure if this is an erro ...

csssvgcsslint

What is the reason for the crossed out background image CSS in the Datatables header within Zurb Foundation 5.5.3?

I am facing an issue with displaying images in a wide Datatables header. The design is based on the Zurb Foundation 5.5.3 framework. Does anyone know why this CSS code is being strikethrough in the image below? (you can view it at https://i.sstatic.net/l ...

cssdatatableszurb-foundationzurb-foundation-6zurb-foundation-5

How to save HTML content in a variable for future use in Next.js

When working with Next JS, my code resembles something like this: function Test() { return ( <section> <div>Test</div> </section> ); } Now, imagine that I want to have multiple entries here, gen ...

javascripthtmlnext.js

Resolving Issues with Page Feature Images on Your WordPress Site

Currently enrolled in a web development course, I collaborated with my instructor to create a custom website. However, I am facing an issue where the header image appears shorter on the Resources page () and Contact page () compared to the Blog page (). De ...

phphtmlcsswordpressdynamic

Cannot retrace steps in file tree using ../

My website has a file structure set up like this: css style.css other files... templates index.html other files... I am attempting to reference the style.css file from my index.html document. My initial attempt was to navigate back a directory u ...

pythonhtmlcsspostgresqlflask

Setting up IIS to allow multiple website uploads within a single domain

Currently, I have a classic ASP project deployed on IIS 7 with the ApplicationPool set to .Net framework 2.0. I have also developed an admin site in ASP.NET 3.5. Now, I am trying to integrate this admin site into the existing classic ASP project that is al ...

asp.netiisdeploymentiis-7asp-classic

CSS3 family tree tutorial: Incorporating a wife into the design

I came across a fascinating tutorial about creating a family tree using CSS3 only. However, I'm struggling to understand how to depict a marriage. To explain further: What the code currently accomplishes is this: what i aim to include is this: Alth ...

htmlcssfamily-tree

Tips for eliminating repetitive code in JavaScript

I have a jQuery function that deals with elements containing a prefix 'receive' in their class or ID names. Now, I need to duplicate this function for elements with the prefix 'send'. Currently, it looks like this: function onSelectAddr ...

javascripthtmljquery

What is the purpose of setting the image border to inline block?

When I added a span element as the circular border to my image, which is placed inside a span tag, I observed that the span tag was being pushed down. By giving the span a display:inline-block property, the issue was resolved. But why does this happen? ...

htmlcss

Exploring an HTML document with XPath expressions

I am trying to query an HTML document using C# and XPath. I am specifically looking for an XPath expression, without any language-specific code samples like XSLT or PHP. Any assistance with providing the XPath expression would be greatly appreciated :). & ...

c#htmlxpath

Loading an assembly from stream in .NET Core: A step-by-step guide

Working with Roslyn in a .NET Core console application has been an interesting experience for me. I attempted to generate an assembly and compile it into a memory stream. However, when trying to load it, I encountered an issue where a necessary API (common ...

c#.net.net-core

The PHP on server could not be loaded by Ajax

Trying to establish a PHP connection, encountering an error and seeking assistance. The error message displayed is as follows: { "readyState": 0, "status": 0, "statusText": "NetworkError: Failed to execute 'send' on 'XMLHttpReq ...

javascriptphpjqueryajaxhtml

Request financial data from AlphaVantage using PHP

I'm currently working on utilizing the alphavantage API to retrieve currency exchange information. In order to obtain the desired data, I am using the following query URI: https://www.alphavantage.co/query?function=CURRENCY_EXCHANGE_RATE&from_cu ...

javascriptphphtmljsonajax

Using AJAX to send data with a POST request in Django may not function properly

Let me preface by saying I have searched for solutions online, but none of them seem to address my specific issue (mainly because they use outdated methods like Jason). I am currently working on a Django project and trying to implement ajax for a particul ...

pythonhtmlpython-3.xdjangoajax

How to Customize the Placeholder Text of a TextField

When working with the TextField API, I noticed that there is no mention of how to style the pseudo placeholder element of the input element. I want to customize the default styling of the placeholder text, but the usual CSS tricks don't seem to work ...

htmlcssmaterial-uijss