Updating the CSS link href in ASP.NET using code behind

I'm struggling with changing the CSS href in the code-behind of my .ASPX page. I've tried various methods but haven't found a solution that works as intended.

HTML Markup:

<link id="linkCSS" runat="server" href='/css/1.css' rel="stylesheet" type="text/css" />

This is what I have attempted in Code behind:

If (mobile)
{
    HtmlLink link = (HtmlLink)this.FindControl(linkCSS.UniqueID);
    link.Href = "/css/2.css";
}

Unfortunately, I am encountering the following exception:

Unable to cast object of type 'System.Web.UI.HtmlControls.HtmlGenericControl' to type 'System.Web.UI.HtmlControls.HtmlLink'.

Any suggestions or ideas would be greatly appreciated. Thank you.

c#htmlcssasp.net

Answer №1

Instead of searching for css, you can easily modify it like this.

If (mobile)
{
  linkCSS.Attributes["href"] = "~/css/2.css";
}

I came across This Helpful Resource.

Answer №2

To achieve more control over a control that cannot be directly accessed and modified, you can utilize a placeholder. Here's an example:

<asp:PlaceHolder ID="headPlaceHolder" runat="server" />

Then in your server-side code:

HtmlLink link = new HtmlLink();
link.Href = "/css/2.css";
headPlaceHolder.Controls.Add(link);

Give it a try to see if it solves your issue :)

Answer №3

Implement this script in your backend system

HtmlGenericControl link = this.FindControl(linkCSS.UniqueID) as HtmlGenericControl;

link.Attributes["href"] = "stylesheet/2.css";

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

Place a <ul> list in the center

I've hit a roadblock trying to find a solution for this issue. Nothing I've attempted so far has proven successful. I'm hopeful that someone could lend me a hand. The challenge at hand involves centering a standard <ul> list on the pa ...

htmlcsshtml-listscentering

Troubleshooting Vue.js rendering problems on Safari_BROWSER

I'm encountering a strange issue with my portfolio website, which is built using Vue and Laravel. The problem arises specifically in Safari - the project thumbnails don't display until the browser window is resized. Here's the relevant code ...

htmlcsslaravelvue.js

Form calculation

An issue has arisen with my calculating form for a client where an incorrect amount is displayed when 0.93 is entered into the percentage box. Original calculation: 10 x 10 x 15 x 0.93 = 13.95 Corrected calculation: 10 x 10 x 15 x 0.93 = 1.395 I am seek ...

javascripthtmlforms

Ways to delete an attribute from a DOM element with Javascript

My goal is to use JavaScript to remove an attribute from a DOM node: <div id="foo">Hi there</div> First, I add an attribute: document.getElementById("foo").attributes['contoso'] = "Hello, world!"; Then I attempt to remove it: doc ...

javascripthtml

How can we save the final composite image created with image layers, Cufon, jQuery,

I'm currently exploring the possibility of a new idea, but I'm not entirely certain if it can be achieved. My progress so far involves loading an image from a URL and using jQuery UI draggable feature to enable users to drag HTML text (which has ...

phpjqueryhtmlimage-manipulationimagemagick

Steps for invoking the Struts Action class and presenting the information on the screen utilizing jQuery

In my JSP page, I have a table displaying data in a tabular format with three different links in one column. Each link triggers a different method in the Action class, which then appends rows based on the returned list size. Using struts iterator, I iterat ...

jqueryhtmlajaxjspstruts2

What is the best way to target the final child element of a specific CSS class?

I am working with an HTML table and my goal is to remove the border-bottom from the last row, excluding the row with class .table-bottom: <table cellpadding="0" cellspacing="0" style="width:752px;" class="table"> <tr class="table-top">< ...

htmlcsscss-selectors

Angular: How to restrict the compilation of rgba() to #rrggbbaa in your codebase

There are some browsers that do not support #rrggbbaa but do support rgba(). However, in my Angular project, background-color: rgba(58, 58, 58, 0.9) in common.css was compiled to background-color:#3a3a3ae6 in style.[hash].css. How can I prevent this co ...

cssangular

Ways to add more spacing between list items without affecting the position of the bottom div

I'm attempting to achieve a layout similar to an Instagram post, where the list expands but does not push the footer down. In my case, adding margin-bottom to the comment class affects the height of the <div class="post-details-container" ...

htmlcss

Tips for creating space between two fluid divs

I'm currently facing an issue with the spacing between two child divs inside a parent div. The web page needs to be responsive for different screen widths, but the vertical space between the left and right divs is not behaving as expected. I am using ...

jquerycsspositioninghtml

Display a div when hovering over a span with custom styling

Don't let the title fool you. http://jsfiddle.net/whb8A/ I'm struggling to style the text inside a span tag within a div. The h3 element shouldn't be nested in the span, but removing it makes it difficult to style with CSS. When hovering ...

csshtml

My toggleclass function seems to be malfunctioning

I am encountering a strange issue with my jQuery script. It seems to work initially when I toggle between classes, but then requires an extra click every time I want to repeat the process. The classes switch as expected at first, but subsequent toggles req ...

javascriptjqueryhtmlcss

Deactivating a form field depending on a selected radio button in Angular 2

If I have two radio buttons, with a click function called localClick for the first button to give value 1 and the second button to give value 2. <div class="ui-g-12"><p-radioButton name="group1" value="Local" (click)=localClick(1) label="Local"&g ...

javascripthtmlangulartypescriptangular2-template

Merging a VUE project and a .NET framework project to unleash their full potential

Currently, I am working on a project that involves using VUE for the client side and .net framework for the server side. However, these two components are hosted as separate projects, requiring me to open different ports during development. I am aware tha ...

javascriptc#.netvisual-studiovue.js

The Intriguing Riddle of HTML Semantic

I've been working on a puzzle presented in the link provided below: HTML Structure Challenge This mind-teaser consists of three questions: Modify the HTML code of the website to enhance its structure as follows: Replace the generic outer div eleme ...

htmlcss

Adding clickable padding to a Draft.js editor can enhance the user experience and make the editing process

Is there a way to apply padding to the Draft.js Editor so that clicking on the padding area selects the Editor? If I add padding directly to the container div of the Editor, the padding displays properly but clicking on it does not enable writing in the E ...

javascriptcssreactjsdraftjs

How to Add a Responsive Inset Transparent Overlay to Images without Using JavaScript?

My goal is to create a unique overlay effect on images of different sizes within a Pinterest-style fluid grid layout. The outer border width and inset 'border gap' will remain consistent, while the images themselves need to dynamically adjust. C ...

jquerycsstransparencyoutline

Trouble displaying AngularJS $scope.data in the HTML code

I'm experiencing an issue where the data received from a POST request is being logged in the console, but is not displaying on the HTML page. Despite having a controller set up, the {{user}} variable is not appearing on the HTML page. While I can se ...

javascripthtmlangularjs

CSS: Aligning content vertically centered

Take a look at the following example: <div class="container"> <div class="box1"></div> <div class="box2"></div> </div> The height of box1 is smaller than that of box2. Is there a way to vertically center box1 w ...

htmlcss

Innovative sound system powered by React

I am working on implementing a music player feature on a website where users can select a song and have it play automatically. The challenge I am facing is with the play/pause button functionality. I have created all the necessary components, but there see ...

javascripthtmlreactjsreact-nativereact-hooks