Using JQuery as an ASP.NET embedded webresource

Question

I have an ASP.NET server control which relies on JQuery for certain functionality. I've tried to add as a webresource.

My problem is my method of including the jquery file adds it to the body, or the form to be exact:

this.Page.ClientScript.RegisterClientScriptInclude(...)

The alternative to this is to add it as a literal in the head tag:

LiteralControl include = new LiteralControl(jslink);
this.Page.Header.Controls.Add(include);

The problem with this however is any existing code srcs in the head which use JQuery fail, as JQuery is loaded afterwards (ASP.NET adds the literal at the bottom of the control tree).

Is there a practical way of making JQuery an embedded resource, but loaded in the head first? Or should I give up now.

Can I ask why your not just adding the jquery file to you project and referencing it with a script tag? — d4nt
– d4nt, Commented Jan 8, 2009 at 13:01
It can be done like this and is at the moment, but the idea is the server control is self contained — Chris S
– Chris S, Commented Jan 8, 2009 at 13:25

Crescent Fresh · Accepted Answer · 2009-01-08 14:56:20Z

7

If you want to package up jQuery and embed it inside your own server control you should serve it to the client using the ScriptManager. From the top of my head you have to:

add jQuery.js to your project
under its "Build Action" Property, make it an Embedded Resource

in the AssemblyInfo.cs for your control add

[assembly: WebResource("<Your Server Control namespace>.jQuery.js", "application/x-javascript")]

Make your control inherit from System.Web.UI.ScriptControl (or at least implement IScriptControl)

Override GetScriptReferences:

protected override IEnumerable<ScriptReference>
GetScriptReferences()
{
return new ScriptReference[] { 
    new ScriptReference("<Your Server Control namespace>.jQuery.js", this.GetType().Assembly.FullName),
};
}

All of your own client script should be setup inside:

protected override IEnumerable<ScriptDescriptor> GetScriptDescriptors()

Which will then ensure the correct order of dependencies (ie jQuery will be available to your own client script).

edited Jan 8, 2009 at 14:56

answered Jan 8, 2009 at 14:37

Crescent Fresh

117k27 gold badges157 silver badges140 bronze badges

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

3 Comments

Crescent Fresh Over a year ago

Oh, and you should probably use jQuery noConflict() and expose it inside your own client-side namespace. IE MyNameSpace.$ = jQuery.noConflict() So as not to interfere with other uses of $ the outer page might be doing.

mbillard Over a year ago

I have to try that, we've had the same issue.

Chris S Over a year ago

This has pushed me in the right direction, I also found en.csharp-online.net/…—IScriptControl.GetScriptReferences_Method .My problem still remains though, the ScriptManager adds the references after the script in the head.

Chris S · Accepted Answer · 2009-01-27 17:55:35Z

Update:

A far easier way of doing it is to simply add the script tag dynamically, in your script and point to the google code hosting. e.g.

function include_dom(script_filename) {
    var html_doc = document.getElementsByTagName('head').item(0);
    var js = document.createElement('script');
    js.setAttribute('language', 'javascript');
    js.setAttribute('type', 'text/javascript');
    js.setAttribute('src', script_filename);
    html_doc.appendChild(js);
    return false;
}

include_dom("http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js");

The function is taken from this article

Crecentfresh pushed me in the right direction, I also found

http://en.csharp-online.net/Creating_Custom_ASP.NET_AJAX_Client_Controls—IScriptControl.GetScriptReferences_Method.

My problem still remains though, the ScriptManager adds the references after the script in the head but I think this is an issue that can't be resolved. I've opted to answer myself but also upvoted crescentfresh.

Collectives™ on Stack Overflow

Using JQuery as an ASP.NET embedded webresource

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related