Incorporate web control's stylesheet into page with UpdatePanel registration

What is the most effective way to register a stylesheet only once on a page using a custom web control? Keep in mind that the page utilizes an UpdatePanel for asynchronous calls. I attempted placing the <link> tag in ScriptManager.RegisterClientScriptBlock(), but encountered the following error:

The script tag registered for type 'MyControl' and key 'MyKey' contains invalid characters outside of the script tags. Only properly formatted script tags can be registered.

Adding the stylesheet to the control hierarchy results in it being displayed multiple times, once for each instance of my control on the page.

asp.netcssuser-controlsstylesheetweb-controls

Answer №1

After much consideration, I decided to take the route of creating extension methods that incorporate the link within them.

Update: To my dismay, I had to make alterations to the ScriptManager extension as it was still causing issues with UpdatePanels. Find the updated code snippet below.

    <System.Runtime.CompilerServices.Extension()> _
    Public Sub IntegrateStylesheetInclude(ByVal scriptManager As ScriptManager, ByVal page As Page, ByVal url As String)
        Dim css = "var cssNode = document.createElement('link');" & _
         "cssNode.type = 'text/css';" & _
         "cssNode.rel = 'stylesheet';" & _
         "cssNode.href = '" & url & "';" & _
         "document.getElementsByTagName('head')[0].appendChild(cssNode);"

        scriptManager.RegisterClientScriptBlock(page, page.GetType(), url, css, True)
    End Sub

    <System.Runtime.CompilerServices.Extension()> _
    Public Sub IntegrateStylesheetInclude(ByVal clientScriptManager As ClientScriptManager, ByVal page As Page, ByVal url As String)
        Dim located = page.Header.Controls.OfType(Of HtmlLink).Any(Function(m) m.Href = url)

        If Not located Then
            Dim link As New HtmlLink()
            link.Href = url
            link.Attributes("type") = "text/css"
            link.Attributes("rel") = "stylesheet"
            page.Header.Controls.Add(link)
        End If
    End Sub

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

Fixing the Overflow Property in CSS

I just started learning about css, and I've encountered a problem with the code for the overflow property: div.hidden { background-color: #00FF00; width: 1000px; height: 1000px; overflow: hide; } ...

css

Incorporating and designing a side button using jQuery Mobile

I'm working on adding a button to the left side of the screen that is round (but not necessarily) and partially visible, with a visually appealing design. This button will allow users to open a side menu panel. Below is the HTML code for the button: ...

javascripthtmlcssjquery-mobile

Incorrect Display of Datepicker Position

Trying to display a datepicker in a modal, but the output is not as expected: The datepicker is appearing in the wrong place. However, it works fine when testing on jsfiddle. Here is the link: http://jsfiddle.net/alverhothasi/D7bBg/ Currently using the ...

jquerycsstwitter-bootstrapdatepickermodal-dialog

ASP.NET Event Handling: The Power of OnTextChanged

I am working with an asp:TextBox <asp:TextBox ID="usernameInput" runat="server" AutoPostBack="true" OnTextChanged="NameChanged"></asp:TextBox> The goal is to have the textbox trigger a postback to my CodeBehind in C# whenever there is a chan ...

c#asp.net

JavaScript alert box

I'm fairly new to the world of web development, with knowledge in CSS & HTML and currently learning TypeScript. I'm attempting to create a message icon that opens and closes a notifications bar. Here's where I'm at so far: document.getE ...

javascripthtmlcsstypescriptpopup

What is the best way to ensure my arrow text remains properly positioned when using fullpage.js?

Seeking guidance from the web development community. I am currently working on a client's website that utilizes fullpage.js and encountering a persistent issue. On slide1 of the website, I am struggling to display the correct text next to the arrows. ...

javascriptjqueryhtmlcssfullpage.js

Is there a way to automatically recalculate the "Total Price" when the input values are adjusted?

Whenever I add an item to the cart, it gets appended to the row in the shopping cart, and the price adjusts accordingly. However, I'm having trouble getting the price to adjust whenever I change the input values (input type: "number"). I can't se ...

javascripthtmlcss

What are the steps to implement character movement in a 2D game using JavaScript?

I'm having trouble getting the image with the ID "yoshi" to move around in my 2D game document.onkeydown = (e) => { if (e.keyCode == 37) yoshi.style.left = yoshi.offsetLeft - 5 + "px"; else if (e.keyCode == 38) yoshi.style.top = yoshi.offset ...

javascripthtmlcss

When working in Flask, I am experiencing an issue where my CSS is not linking to my

I am new to coding with HTML, CSS, and Flask and I have encountered an issue where my CSS styling only partially affects my HTML file. Here is the HTML code snippet: <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

pythonhtmlcssflask

What's the best way to preserve the aspect ratio of my background image while utilizing background-size: cover;?

I have a background image that I'm working with. Is there a way to preserve the aspect ratio of the image even when using background-size: cover;? Currently, the image fits perfectly on the screen but appears slightly distorted. I've experimented ...

htmlcssdebugging

Seeking assistance in the development of a visual depiction of device orientation through JS

My goal is to visually represent the device orientation values alpha, beta, and gamma by creating a series of "bars" for each value. Currently, I have managed to display only the values in plain text using innerHTML. However, I envision these bars moving i ...

javascriptcss

Creating a new role with RoleManager ApplicationRole

Recently, I developed a method to add new roles in a more efficient way by utilizing the following code snippet: public async Task<IActionResult> CreateRole(ApplicationRoleModel model) { try { foreac ...

c#asp.netasp.net-web-apiasp.net-core.net-core

JSON, RESTful API, Data Binding, Model Binding, Mapping Library

Could someone lend me a hand with this issue? I'm trying to pass a Json object through the body in my POST method, but I keep encountering an error. I've attempted using [FromUri] and [FromBody], but nothing seems to work. Any suggestions? ...

asp.netjsonrestbinding

Despite having a hover animation, the CSS animation remains stuck

I'm looking to create a hover animation where one picture disappears upon hovering and is replaced by another picture, but I'm having trouble getting the back picture to disappear My attempt involved changing opacity from 1 to 0 with a transitio ...

htmlcss

When my screen measures 1700px wide, a width of 100% in CSS appears significantly narrower than a width of 500px

Currently, I am working on designing a responsive layout for a 3D globe. The code snippet that stores the structure is as follows: <div class="text-center main"> <canvas id='globe' width='100%' height='100%'> ...

htmlcss

Styling Tables with Bootstrap CSS and Integrating Database Data

Currently, I am utilizing the code snippet below to retrieve and display data stored in a database. Although everything functions correctly, I am encountering an issue with displaying it using Bootstrap CSS. Strangely, when I try copying an example of a ta ...

htmlcsstwitter-bootstrap

Tips on revealing concealed information when creating a printable format of an HTML document

I need to find a way to transform an HTML table into a PDF using JavaScript or jQuery. The challenge I'm facing is that the table contains hidden rows in the HTML, and I want these hidden rows to also appear in the generated PDF. Currently, when I co ...

javascripthtmljquerycss

Ways to retrieve the image URL from a div element?

How can I use PHP to extract the background image URL from a div? Specifically, I need to search for a specific class within the string and then extract the background-image URL. For instance: <div class="single-post-image" style="backgr ...

phpcssurlstring-parsing

Learn how to customize the global style within a child component in Angular and restrict the changes to only affect that specific component

I have applied some custom css styling in my global style.css file (src/style.css) for my Angular project. However, I encountered a problem when trying to override this styling in a specific component without affecting the rest of the project. Currently, I ...

htmlcssangularangular-components

Press anywhere outside the container to conceal it along with the button

Utilizing an Angular directive to hide div elements when the user interacts outside of them has been effective. However, there is a specific issue that arises when clicking outside of a div on a button that toggles the visibility of the div. The 'ang ...

javascriptcssangularjshtml