ASP.NET MVC and jQueryUI dilemma

Question

I just migrated the project to the beta version of the ASP.net MVC frame, and the only problem I encountered was jQuery and jQueryUI .

Here's the deal:

The following script links are provided in Site.Master :

 <script src="../../Scripts/jquery-1.2.6.js" type="text/javascript"></script> <script src="../../Scripts/jquery-ui.js" type="text/javascript"></script> 

And using those accordian UI that I have on one of the views work fine, except for one problem: images from ThemeRoller not included on the page. If I comment on jQuery links, there are ThemeRoller images. All css are in the Content folder , and all scripts are in the Scripts folder .

I know this is a dumb way problem, but it makes me nervous.

What am I missing?

Update

I tried the first answer to no avail, read the comment for details. Thanks again to those who watch.

The second approach does not work either. I am puzzled.

Another update

Using Url.Content tags for scripts really allows scripts to work correctly. Using a regular tag for a style sheet gets all the styles on the EXCEPT page for all those related to ThemeRoller.

The jquery-ui-themeroller.css is located in the "Content" folder, and when I check the element, css is present. I suspect the problem is with the display of this css file in the image folder for themeroller, which is also located in the "Content" folder. Link images in this file as indicated: background: url(images/foo.gif)

Do I need to change the links in this file?

Answer 1

Does it help?

http://forums.asp.net/p/1334947/2690469.aspx

The cause of inconstancy is very simple, although I admit it is not easy to understand! When you have <& link GT; tag inside the header runat = "server">, ASP.NET will process the <link> tag and URL detection and resolve them relative to the application root. When you have <script> on the page (without runat = "server"), then ASP.NET will leave this alone, as this is just old HTML.

Using Url.Content () - this is the approach I will use this, since this is to get permission regarding the application root, like the <link> tag.

Answer 2

If all your views are on the same level, you need to either use

• Use an absolute path like / Scripts / jquery -1.2.6.js
• Or even better: allow a virtual path such as <% = Url.Content ("~ / Scripts / jquery-1.2.6.js")%>

Url.Content () http://jvance.com/media/2008/10/18/UrlContent5.media

Answer 3

You need to change the links in jquery-ui-themeroller.css to indicate the current location of the images.

As with the case, you need to update the path to the images that the css file is looking for.

 background: url(images/foo.gif) 

Remove the "images /" from your paths so that they look like this:

 background: url(foo.gif) 

since your css and images are in the content folder.

Answer 4

  protected void Page_Load(object sender, EventArgs e) { Page.ClientScript.RegisterClientScriptInclude(this.GetType(),"JQuery", ResolveUrl("~/js/jquery.min.js")); Page.ClientScript.RegisterClientScriptInclude(this.GetType(), "JQueryUI", ResolveUrl("~/js/jquery-ui.custom.min.js"));