CODEWITHSUNDEEP
asp.netjavascriptasp.net-mvcasp.net-mvc-views
Maxim Zaslavsky
Maxim Zaslavsky

Reputation: 18075

How to Put Javascript into an ASP.NET MVC View

I'm really new to ASP.NET MVC, and I'm trying to integrate some Javascript into a website I'm making as a test of this technology.

My question is this: how can I insert Javascript code into a View?

Let's say that I start out with the default ASP.NET MVC template. In terms of Views, this creates a Master page, a "Home" View, and an "About" view. The "Home" View, called Index.aspx, looks like this:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
    <h2><%= Html.Encode(ViewData["Message"]) %></h2>
    <p>
        To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
    </p>
    <p>Welcome to this testing site!</p>
</asp:Content>

Adding a <script> tag here didn't work. Where and how should I do it?

P.S.: I have a feeling I'm missing something very basic... Thanks in advance!

Upvotes: 4

Views: 8743

Answers (4)

Kirill Gribunin
Kirill Gribunin

Reputation: 191

Just stumbled on this question and would like add a comment that in Visual Studio 2013 it can be done in more elegant way.

In your master page just put the following code at the bottom of the page (in the default generated master page this code is already there):

<body>
    ...
    @RenderSection("scripts", required: false)
</body>
</html>

Then in your view just at the bottom the following code:

@section scripts
{
    <script src="...script url..."></script>
}

or if you use bundles

@section scripts {
    @Scripts.Render("~/bundles/<script id>")
}

or you can put a <script>...</script> section with your Javascript code into the @section scripts block in the view.

Upvotes: 2

tvanfosson
tvanfosson

Reputation: 532745

One thing you may want to consider is adding a "scripts" content place holder to your master page, that loads scripts at the end of the body. This way you load your scripts at the end of the page so that it doesn't slow down loading the DOM elements (once a script starts loading it only does one request at a time, because the code can affect the DOM). This gets a little tricky with PartialView -- if you include code in them you need to figure out a way to delay executing anything that relies on later scripts after those scripts have loaded. A compromise might be to load things like jQuery in the header and the rest of your common scripts at the end of the body.

Site.Master

   <body>

   ...
   <asp:ContentPlaceHolder runat="server" id="MainContent"></asp:ContentPlaceHolder>

   ...

   <script type="text/javascript" src="<%= Url.Content( "~/scripts/jquery-1.4.1.min.js" ) %>"></script>
   <asp:ContentPlaceHolder runat="server" id="ScriptContent"></asp:ContentPlaceHolder>
   </body>
   </html>

View

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

     ... HTML ...
  </asp:Content>

  <asp:Content runat="server" ID="scriptContent" ContentPlaceHolderID="ScriptContent">

  <script type="text/javascript">
     $(function() {
       $('.selector').click( function() {
            ...
       });
     });
  </script>

  </asp:Content>

Upvotes: 2

SLaks
SLaks

Reputation: 888243

The <script> tag needs to go inside an <asp:Content> block. (Otherwise, where would it end up?)

Upvotes: 1

Jaxidian
Jaxidian

Reputation: 13509

Go create an additional <asp:ContentPlaceHolder> inside of the <head> of your masterpage and then your views will have a third <asp:Content> section for you to register external .js files, custom <script> blocks, external .css files, and custom <style> blocks.

Upvotes: 1

Related Questions