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 ]

EF Code First change the default generated database name

I’m playing around with ASP.NET MVC 3 + EF Code First. At a testing stage my models change often. To always have some clean content when building and running the project I have overridden the Seed method in my custom database initializer class (inherit from DropCreateDatabaseIfModelChanges<T>).

using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using Test.Models;

namespace Test.DAL
{
public class TestInitializer : DropCreateDatabaseIfModelChanges<TestContext>
{
protected override void Seed(TestContext context)
{
var categories = new List<ProductCat>
{
new ProductCat { Name = "Wood" },
new ProductCat { Name = "Metal" },
new ProductCat { Name = "Plastic" }
};

var products = new List<Product>
{
new Product { Name = "Bench", ProductCat = categories.Single(c => c.Name == "Wood")},
new Product { Name = "Bottle", ProductCat = categories.Single(c => c.Name == "Plastic")},
new Product { Name = "Electric cable", ProductCat = categories.Single(c => c.Name == "Metal")}
};

products.ForEach(p => context.Products.Add(p));
context.SaveChanges();

base.Seed(context);
}
}
}

Now if you have SQL Server Management Studio (SSMS) open, you will see that your generated database is something like Project.Namespace.Class, which is actually not a good name. To change that EF Code First generated name you can do something like this in your DbContext class:

using System.Data.Entity;
using System.Data.Entity.ModelConfiguration.Conventions;

namespace Test.Models
{
public class TestContext : DbContext
{
public TestContext()
: base("MyNewDBName") // <-- database name
{ }

public DbSet<Product> Products { get; set; }
public DbSet<ProductCat> Categories { get; set; }

protected override void OnModelCreating(DbModelBuilder modelBuilder)
{
modelBuilder.Conventions.Remove<PluralizingTableNameConvention>();
}
}
}

Keep in mind that this is only one of the places where you can change the default database name.

Now your database will be called MyNewDBName in SSMS.
Have fun ;-)