Programmatically adding Javascript File to User Control in .net

Question

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?

Peter · Accepted Answer · 2013-10-30 12:48:38Z

26

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".

edited Oct 30, 2013 at 12:48

Peter

38.9k39 gold badges151 silver badges213 bronze badges

answered Feb 11, 2009 at 0:07

sarsnake

28k62 gold badges185 silver badges295 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Tangiest Over a year ago

Gnomixa, very nice solution. +1

ak3nat0n Over a year ago

This is so cool! i used to just put all the script in the ascx design page. but how do you handle cases where the javascript file is already added to the page header (maybe by a different ascx control)

sarsnake Over a year ago

@zaladane, i have never had to deal with this case as i control fully what is loaded and when. The way I would do it, is write a simple function that loops over what's added and makes sure that something is not added twice. But, I think that you can add the same js file several times to the same page, shouldn't affect anything at the end. Try it out and see to make sure.

Martin Murphy Over a year ago

if you have multiple instances of the control this is no good. See the baretta post below.

Oyvind Over a year ago

Ditto on multiple instances. the baretta-answer does not solve CSS includes, which I solved by using HtmlLink with an id.

baretta · Accepted Answer · 2009-02-06 19:53:38Z

9

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.

edited Feb 6, 2009 at 19:53

answered Feb 6, 2009 at 18:54

baretta

7,6451 gold badge29 silver badges25 bronze badges

2 Comments

David Morton Over a year ago

The user specifically mentioned he wants his entire control to be a "complete package". This solution assumes that the control is added with a javascript file, which wouldn't be a complete package.

Greg Over a year ago

The accepted answer doesn't embed the javascript file, does it?

Contra · Accepted Answer · 2010-03-25 12:10:38Z

6

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

answered Mar 25, 2010 at 12:10

Contra

2,7934 gold badges20 silver badges18 bronze badges

Comments

DNV · Accepted Answer · 2011-11-18 20:37:45Z

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="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

answered Nov 18, 2011 at 20:37

DNV

1401 silver badge7 bronze badges

Comments

azamsharp · Accepted Answer · 2009-02-07 03:39:02Z

2

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

answered Feb 7, 2009 at 3:39

azamsharp

20.1k38 gold badges148 silver badges232 bronze badges

2 Comments

sarsnake Over a year ago

I am using a web site project rather than web application, so i don't have AssemblyInfo.cs file. I would rather keep using this model as I like it better than web application project.

azamsharp Over a year ago

The website project was a big mistake by Microsoft. It is slow as hell since it creates assemblies for everything! On the bright side now you can use your user controls as server controls.

Quintin Robinson · Accepted Answer · 2009-02-06 18:52:10Z

0

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]);
    }

answered Feb 6, 2009 at 18:52

Quintin Robinson

82.6k14 gold badges128 silver badges132 bronze badges

3 Comments

Quintin Robinson Over a year ago

It can be done at the ascx.cs level or if the control is pure code at the code level in your library.

sarsnake Over a year ago

oh ok, whats [libraryinjection]? pardon me, I have never seen this before:) and what do you mean by xxx? something like myscript.js?

Quintin Robinson Over a year ago

yes that was just a placeholder, if you want to package your script has a resource or something to that nature that would be the string representation of it, whether it be something "<script src='myscripthandler.ashx?f=myscript.js'></script>" or the entire script itself.

David Morton · Accepted Answer · 2009-02-06 18:59:57Z

0

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());

answered Feb 6, 2009 at 18:59

David Morton

16.5k3 gold badges66 silver badges74 bronze badges

3 Comments

sarsnake Over a year ago

I would like to have javascript in the separate file. Is it possible to programmatically add a JS file to the user control? If not I will just use Dennis's solution

David Morton Over a year ago

You could read the file to a string using something like File.ReadAllText and then use that text to register the client script block, but if you want the item in it's own file, I would suggest Dennis' solution.

sarsnake Over a year ago

thanks! wow, didn't think that adding a js file to a user control is such a headache. By the way I have <script> </script> inside the .ascx now and it works, but because there is no <head> tag in the user control, it somehow seemed sketchy, but I think I will stick with it.

stvn · Accepted Answer · 2012-06-18 14:09:25Z

0

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.

answered Jun 18, 2012 at 14:09

stvn

1,1981 gold badge8 silver badges24 bronze badges

Collectives™ on Stack Overflow

Programmatically adding Javascript File to User Control in .net

8 Answers 8

5 Comments

2 Comments

Comments

Comments

2 Comments

3 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

5 Comments

2 Comments

Comments

Comments

2 Comments

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related