Programmatically adding Javascript File to User Control in .net

How do you add Javascript file programmatically to the user control?

I want the user control to be a complete package – ie I don’t want to have to add javascript that’s related to the user control on the page where it’s used, when I can do it inside the control itself.

Since there is no Page object in the user control, how would you do it?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

In the Page_Load method of control.ascx.cs file:

LiteralControl jsResource = new LiteralControl();
jsResource.Text = "<script type="text/javascript" src="js/mini-template-control.js"></script>";
Page.Header.Controls.Add(jsResource);

HtmlLink stylesLink = new HtmlLink();
stylesLink.Attributes["rel"] = "stylesheet";
stylesLink.Attributes["type"] = "text/css";
stylesLink.Href = "css/mini-template-control.css";
Page.Header.Controls.Add(stylesLink);

This will load css and Javascript into the head tag of the main page, just make sure that the head has runat=”server”.

Method 2

You can register client script includes using the ClientScriptManager.
Page is accessible through the Control.Page property.

Page.ClientScript.RegisterClientScriptInclude (
  typeof ( MyControl ), "includeme.js", "js/includeme.js"  );

EDIT: Sorry, for a total “complete package”, its possible using scripts as Embedded Resources,
and aquire dynamic URL’s through the WebResource.axd handler.
If this is not considered totally complete, then i guess it could be put in App_LocalResources, but it never gonna be just one file,
unless the code and script is inline.

Method 3

The same as gnomixa’s response, only a bit cleaner:

HtmlGenericControl js = new HtmlGenericControl("script");
js.Attributes["type"] = "text/javascript";
js.Attributes["src"] = "jscript/formfunctions.js";
Page.Header.Controls.Add(js);

from http://www.aspdotnetfaq.com/Faq/How-to-Programmatically-add-JavaScript-File-to-Asp-Net-page.aspx

Method 4

In my site I Place all needed scripts and styles to placeHolder

<asp:placeHolder runat="Server" ID="phHead">
    <script src="/header/widget/script.js" type="text/javascript"></script>
    <link href="/header/widget/style.css" rel="nofollow noreferrer noopener" rel="stylesheet" type="text/css" />
</asp:placeHolder>

and

Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    Page.Header.Controls.Add(phHead)
End Sub

Method 5

Good question!

A UserControl should be a single package without any dependency on a JavaScript or a CSS file. You will need to make the JS and CSS files as embedded resources. Right click properties and set build action to embedded resources. Then you need to inject the JavaScript and CSS files as WebResources.

Here is one article that I wrote yesterday which talks about the same scenario:

http://highoncoding.com/Articles/502_Creating_RadioButton_Validation_Using_Custom_Validator.aspx

Method 6

I generally do it when rendering the HTML for the control and depending on whether it’s a library injection or an instance injection I use the Items collection to specify whether or not I have already produced the code for a control of this type during the current request using a unique identifier.

Something to the effect of:

    protected override void Render(HtmlTextWriter writer)
    {
        base.Render(writer);

        //Check if the Object Script has already been rendered during this request.
        if (!Context.Items.Contains("xxx"))
        {
            //Specify that the Object Script has been rendered during this request.
            Context.Items.Add("xxx", string.Empty);
            //Write the script to the page via the control
            writer.Write([libraryinjection]);
        }
        //Write the script that instantiates a new instance for this control
        writer.Write([instanceinjection]);
    }

Method 7

If you have the text of the actual javascript in your .CS file, you can call Page.ClientScript.RegisterClientScriptBlock.

The following assumes that “GetScript()” returns the actual javascript you want added to the rendered control.

Page.ClientScript.RegisterClientScriptBlock(GetType(), "controlScriptName", GetScript());

Method 8

I found this to be a more elegant way to fix-link to your javascript.
In your .ascx, link to your script files the following way:

<script src='<%= ResolveClientUrl("~/Scripts/jquery-1.7.1.min.js") %>' type="text/javascript"></script>
<script src='<%= ResolveClientUrl("~/Scripts/jquery.maskedinput-1.3.min.js") %>' type="text/javascript"></script>

That way, no matter which subfolder/page you add your user control to, the link to your scripts will always be correctly resolved.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0