In working with a test project for ASP.NET Web API, I noticed an interesting script reference in the _Layout.cshtml.

<script
    src="System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl(“~/Scripts/js”)”>
</script>

Because this url is apparently pointing to the directory and the file extension, I wanted to know if indeed the scripts were being pre-loaded from this one script call. So I ran the application and clicked on “View Source” in the browser where I found the following source code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title></title>
<link href="/Content/css?v=oI5uNwN5NWmYrn8E1" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/css?v=UM4Ob0i8OdW81" rel="stylesheet" type="text/css" />
<script src="/Scripts/js?v=4h5lPNUsLiFoa0vqrItjS2JpFtAe35Q6o_sY03tBK_Q1"></script>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ASP.NET Web API</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/modernizr-2.0.6-development-only.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<header>
<div class="content-wrapper"> 
<div class="float-left">
<p class="site-title"><a href="/">ASP.NET Web API</a></p>
</div>
</div>
</header>
<div id="body">
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>Welcome to ASP.NET Web API!</h1>
<h2>Modify the code in this template to jump-start your ASP.NET Web API development.</h2>
</hgroup>
<p>… CONTENT DELETED FOR BREVITY… </p>
</section>
</section>
</section>
</div>
</body>
</html>
</body>
</html>

I’ve removed some of the markup for brevity, but left the main sections to illustrate my point. As you can see in the markup there are two DOCTYPE elements, two <head> sections as well as two <body> sections. In essence, we have a web page wrapped in a web page and interestingly enough, the browser rendered it.

So I took a look at the template file as well as the index view for the home controller and indeed found that both pages contained full page declarations. As a result, the RenderBody() call from _Layout.cshtml caused all of the content in Views/Home/Index.cshtml to render including the doctype, head, and body tags.

I presume that this would not present an issue unless you attempt to traverse the DOM using jQuery or some other script library. This is where you may experience some unexpected results. In any case, if you are at all familiar with ASP.NET MVC then you are already familiar with how to clean this up, in fact, the instructions on the page itself are to replace the contents with your own. My recommendation is simply to ensure that you remove the repeating page declarations in the Index.cshtml page as well.

On another note, I didn’t actually resolve my question by going through this which is, are the scripts being pre-loaded. The Scripts folder does contain a _references.js file which we know the “_<filename>” convention in ASP.NET MVC generally means a special/reserved file. The file contains a few commented lines referencing other script files contained in the directory. I presume that if you uncomment these lines, then the files will be loaded together resulting in one HTTP request instead of one for each file.

Updated:

After further reading over on Phil Haack’s blog post about the little things in MVC 4 and then another link through to the GuruStop.Net I found that the _references.js file is a helper file that provides JavaScript intellisense for Visual Studio. So there we have it, question answered.

Comments


Comments are closed