Assume I have the following _Layout.cshtml file:
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta charset="utf-8" />
5: <title>@ViewBag.Title</title>
6: <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
7: <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
8: <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
9: </head>
10:
11: <body>
12: @RenderBody()
13: </body>
14: </html>
ok great I have all my jquery libraries defined and now I am ready to create MVC views that will utilize this layout. Here's a partial excerpt from a simple view ~/Home/Sample.cshtml that utilizes the above layout page:
1: @{
2: ViewBag.Title = "Sample";
3: }
4:
5: <h2>Sample</h2>
6:
7: <script type="text/javascript">
8: $(document).
9: </script>
10:
11:
12: @using(Html.BeginForm())
13: {
14: @:Enter your name: @Html.TextBox("name")
15: <input type="submit" value='Submit Name'/>
16: }
A bit of googling pointed out what I had suspected all along. Visual studio does not have a notion of all the scripts that will be loaded client side for this view (account for the existence of mvc partial views as well). Turns out, if you want to use javascript intellisense feature for any third party scripts, then you need to manually reference the jquery Visual studio 2010 intellisense documentation script file into every view that you work like so:
1: @{
2: ViewBag.Title = "Sample";
3: }
4:
5: <h2>Sample</h2>
6:
7: @if (false)
8: {
9: <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.7.1-vsdoc.js")"></script>
10: }
11:
12: <script type="text/javascript">
13: $(document).
14: </script>
15:
16:
17: @using (Html.BeginForm())
18: {
19: @:Enter your name: @Html.TextBox("name")
20: <input type="submit" value='Submit Name'/>
21: }
Couple of things to note here. Lines 7-10 show a javascript node referencing the the jquery-1.7.1-vsdoc.js encapsulated inside a razor if statement. This contains VS2010 specific vsdoc that aides visual studio’s intellisense. Since we are already referencing the core jquery libraries in our _Layout.cshtml file, having clients download this script every time this view is rendered as part of a request is unnecessary. Hence having the if block always evaluate to false ensures that this script element never gets rendered as part of a HTTP response. However even though we now have our reference, visual studio still does not render any JS intellisense for my jquery selector (line 13). As part of my orientation with the MVC framework, I have become accustomed to using the plethora of awesome MVC helper functions within my views to generate url’s, action-links, forms etc. We use the Url.Content helper to generate our jquery script reference in line 9. An unfortunate trade –off with this is that visual studio cannot seem to work out the script reference path during design time. The only remedy to this is to hard code a relative path to the script in line-9 of the Sample.cshtml view like so:
<script type="text/javascript" src="../../Scripts/jquery-1.7.1-vsdoc.js"></script>
This does the trick and enables jquery intellisense. I hate having to hardcode the script reference but I guess as long as we ensure that this reference is never included as part of the response, its a small price to pay for having intellisense enabled. I hope the ASP.Net team sort this out soon
No comments:
Post a Comment
Feel free to provide any feedback