Dollar Shave Club – Our Blades Are F***ing Great

[ link ]

Advertisements

ASP.NET MVC: place JavaScript from a View inside the head-section by using sections

When working with ASP.NET MVC, you often need some JavaScript in your views.
The most obvious way of doing this is just adding the JavaScript inside the view:

@{
     ViewBag.Title = "About Us";
 }

<script type="text/javascript">
     // some code
   </script>

<h2>About</h2>
 <p>
      Put content here.
 </p>

Your html source code will end up with a mess:

<!DOCTYPE html>
<html>
 <head>
<meta charset="utf-8" />
<title>About Us</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
</head>
 <body>
     <div>
         <header>
             <div id="title">
                 <h1>Title</h1>
             </div>
            <div id="logindisplay">
                     [ <a href="/Account/LogOn">Log On</a> ]
            </div>
             <nav>
                 <ul id="menu">
                     <li><a href="/">Home</a></li>
                     <li><a href="/Product">Products</a></li>
                     <li><a href="/Home/About">About</a></li>
                 </ul>
             </nav>
         </header>
         <section id="main">
<script type="text/javascript">
            // some code
          </script>
          <h2>About</h2>
          <p>      Put content here. </p>
</section>
        <footer>
        </footer>
     </div>
 </body>
 </html>

As you can see in the code above, the JavaScript was added where the your view was rendered.
To keep your code clean, you can use and render sections!

Open your master View _Layout.cshtml and add a RenderSection:

<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8" />
     <title>@ViewBag.Title</title>
     <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
     <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
     <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
     @if (IsSectionDefined("MyOtherJavascript"))
     {
       @RenderSection("MyOtherJavascript");
     }
 </head>
 <body>

Now in your View (in my case /Home/About.cshtml) add the section:

@{
     ViewBag.Title = "About Us";
 }
@section MyOtherJavascript {
   <script type="text/javascript">
     // some code
   </script>
 }
<h2>About</h2>
 <p>
      Put content here.
 </p>

Now your JavaScript will be injected inside the header:

<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8" />
     <title>About Us</title>
     <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
     <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
     <script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
     // some code
   </script>
 </head>
 <body>
<!-- ... -->

That’s it! 🙂
You can add more logic to it, there is also an overload of the RenderSection in case you just want to say it is optional or not.

I demonstrated the RenderSection by injecting JavaScript into the header, but this can be used in other places (and you can also inject and render normal html code). 😉

FYI: I’m using ASP.NET MVC 3 with Razor engine.

msdn ]