CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc
larryq
larryq

Reputation: 16299

using javascript and css files in ASP.Net MVC View?

I'm having some trouble getting a jQuery plugin to work correctly in my MVC view. Here's what it looks like at the moment: (I've copied all needed jQuery includes and css files into the /Scripts folder of the site)

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<script src="/Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="/Scripts/jquery.MetaData.js" type="text/javascript"></script>
<script src="/Scripts/jquery.rating.js" type="text/javascript"></script>
<link href="/Scripts/jquery.rating.css" rel="stylesheet" type="text/css" />

<input name="rating" type="radio" class="star" value="1"/>
<input name="rating" type="radio" class="star" value="2"/>
<input name="rating" type="radio" class="star" value="3"/>
<input name="rating" type="radio" class="star" value="4"/>
<input name="rating" type="radio" class="star" value="5"/>
</asp:Content>

The intellisense is squawking that the link element above can't be nested within a div tag (what div?) Nor can intellisense find the "star" class in any of the input tags.

When I navigate to the page in question I don't see the stars, just a list of radio buttons. It's as if the jQuery stuff doesn't run.

Where should I put the script and link tags in an MVC view? Anyone have small samples I can go by as an example?

I'm going over this example from "Professional ASP.Net MVC" from Wrox and the Ajax chapter leaves something to be desired, as the code is all snippets with no complete pages. The Wrox website chapter code for this book also consists of the same snippets, one per text file, and is of no use.

Thanks!

Upvotes: 1

Views: 1606

Answers (5)

lucky
lucky

Reputation: 65

please check in fiddler and see wat kind of response ur getting when u call the particular file ....if the script is rendered properly and for that particular page ...if no then please post the response and a copy ..

i got a similar problem when i was working with js in mvc i wasn't able to load the j query ...so for that i created a helper class which returns the absolute path for me 

    public static string ResolveUrl(this HtmlHelper html, string virtualUrl)
    {
        Control con = new Control();
        var RelativeUrl = con.ResolveUrl(virtualUrl);
        if (!virtualUrl.StartsWith("~/"))
            return RelativeUrl;

        virtualUrl = virtualUrl.Remove(0, 2);

        string applicationPath = html.ViewContext.HttpContext.Request.ApplicationPath;
        if (string.IsNullOrEmpty(applicationPath) || !applicationPath.EndsWith("/"))
        {
            applicationPath = applicationPath + "/";
        }

        return applicationPath + virtualUrl;
      }
  }

and in my view i called the page like this ...

<script src="<%= Html.ResolveUrl("~") %>Scripts/jquery-1.3.2.js" type="text/javascript"></script>

Upvotes: 1

David
David

Reputation: 15360

It's also a useful excercise to use a Helper method to get the correct location of your Script and css files.

<script src="<%= Html.Content("~/Scripts/jquery-1.3.2.js") %>
        type="text/javascript"></script>

Upvotes: 1

Nathan Ridley
Nathan Ridley

Reputation: 34396

In your master page file, create a content placeholder in the head area. You can use this whenever you need to insert scripts and styles into specific views, meaning you won't deviate from the guidelines stating that this is where such files should go.

In your Site.Master file:

<head>
<!-- head stuff here -->
<asp:ContentPlaceHolder ID="HeadContent" runat="server" />
</head>

In your view aspx file:

<asp:Content ContentPlaceHolderID="HeadContent" runat="server">
    <script src="/Scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.MetaData.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.rating.js" type="text/javascript"></script>
    <link href="/Scripts/jquery.rating.css" rel="stylesheet" type="text/css" />
</asp:ContentPlaceHolder>

<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <input name="rating" type="radio" class="star" value="1"/>
    <input name="rating" type="radio" class="star" value="2"/>
    <input name="rating" type="radio" class="star" value="3"/>
    <input name="rating" type="radio" class="star" value="4"/>
    <input name="rating" type="radio" class="star" value="5"/>
</asp:Content>

Upvotes: 2

Alex
Alex

Reputation: 36576

You will need to put the <link /> in the <head>...</head> section the script tags should be fine. You can put it in the head of a master page.

Upvotes: 1

Fermin
Fermin

Reputation: 36081

Are you using a master page for your site? If so you could put all your include tags in the master page, it would then be available to all views using the master page.

Upvotes: 0

Related Questions