asp.net-mvcjquery-uiasp.net-mvc-3jquery-ui-theme

jquery ui css not loading and creating problems with asp.net mvc3 page (unexpected token error)


First off, I can see that my mvc3 project already had jquery ui in it but no theme css files.

I needed a date picked and as usual needed to override the EditorFor DateTime. I started off today by just using the default jquery ui js files supplied with the project under scripts. The date picker shows up fine, only with a completed messed up UI based on Site.css.

So now I downloaded a build of jquery (with the start theme) and followed this page about how to put it together.

I'm using T4MVC so my page looks like this:
Layout.cshtml:

<script src="@Links.Scripts.jquery_1_4_4_js" type="text/javascript"></script>
<link href="@Links.Content.Site_css" rel="stylesheet" type="text/css" />
<script src="@Links.Content.start.jquery_ui_1_8_7_custom_css" type="text/javascript"></script>

Create.cshtml

 <script src="@Links.Scripts.jquery_validate_min_js" type="text/javascript"></script>
    <script src="@Links.Scripts.jquery_validate_unobtrusive_min_js" type="text/javascript"></script>
    <script src="@Links.Scripts.jquery_ui_1_8_7_custom_min_js" type="text/javascript"></script>

And this is the result:
alt text

Any ideas, I tried a couple combinations of where I put the script and css files tags in different places, but nothing seems to work.


Update: So I was a dumbhead to have a <script> instead of a <link> tag in the layout! But there is still a problem, the date picker shows with the css from Site.css.
alt text


Update 2: With Solution

So I checked chrome and under resources I can't see the jquery css file. I fire fiddler and I don't see any request for the css file.

The I see it!

<link href="@Links.Content.start.jquery_ui_1_8_7_custom_css" **rel="Stylesheet"** type="text/css" />

Yes! Thats right, I didn't add a rel!


Solution

  • In your Layout.cshtml you are using a script tag to include the css file. Change:

    <script src="@Links.Content.start.jquery_ui_1_8_7_custom_css" type="text/javascript"><script> to

    <link href="@Links.Content.start.jquery_ui_1_8_7_custom_css" rel="stylesheet"></link>