Extend your Master Pages
This is an idea that I?ve been throwing around for a while now, and I have implemented in a couple of project. The basic idea is to extend the basic master page, by adding more ContentPlaceholders, to give your developers a heads up as to where things should go.
Lets start things out by outlining the various parts of a web page:
- Title
- Header
- Content
- Footer
- CSS includes
- Script includes
- JavaScript
Typically, without eliciting some tricks, there will be some JavaScript in your page, as there will be some part of the script that is dynamic. But best case, all of the JavaScript that you need can be put into a separate file. But even then, if we are talking 5 lines of JavaScript I will probably give you a pass if you keep it in the file.
But what I want to do is encourage best better practices. CSS is declared at the top, JavaScript at the bottom, html in the middle, code you want to run right after the page loads here.
So here is a typical MasterPage after I?ve made a few modifications:
1: <%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
2:
3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4:
5: <html xmlns="http://www.w3.org/1999/xhtml" >
6: <head runat="server">
7: <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
8: </head>
9: <body>
10: <asp:ContentPlaceHolder ID="MainContent" runat="server">
11:
12: </asp:ContentPlaceHolder>
13:
14: <%1: = Html.IncludeScript("~/Scripts/jquery-1.3.2.min.js")%>
15: <asp:ContentPlaceHolder ID="ScriptIncludesContent" runat="server">16:17: </asp:ContentPlaceHolder>18:19: <script type="text/javascript">1:2: $(document).ready(MasterLoadPage);3:4: function MasterLoadPage(){5: <asp:ContentPlaceHolder ID="DocumentReadyContent" runat="server">6:7: </asp:ContentPlaceHolder>8: }9:10:</script>
20: </body>21: </html>
You can see that I?ve added some extra placeholders in the code there.
But does any of this suck? Yes. When you add a page that implements this master page, you will get all of the appropriate content areas, but they will all assume that you are going to add html/text to them. The consequence is that the DocumentReadyContent Content area that is generated cannot help you with any JavaScript/Css intellesense.
To some extent, that is still ok, as I am looking to minimize the amount of JavaScript and css in my pages?you could say the pain is disserved. :) But what would be nice is if we could add a language indicator to the Content element. (hint: Microsoft VS team, I?m looking at you).
If you also think adding language indicators would be cool, vote here: http://aspnet.uservoice.com/forums/41199-general/suggestions/487773-make-language-specific-contentplaceholders-
Happy hacking.
I like where you’re going with this Chris. Maybe to get around the limitations of VS and Intellisense you could use something like to wrap the placeholder rather than putting it inside the javascript method itself? Doing this will also give you the flexibility to write out the jQuery load event as well, and remove the tag. Haven’t tried it, but it seems like it would work.
grr…comment got demolished. Here’s what I was going for (without appropriate delimiters)
% = using (new LoadScript()) { %
[placeholder here]
% } %
you misspelled ‘content’…….
Lets start things out by outlining the various parts of a web page:
•Title
•Header
•Conent <——————–
•Footer
•CSS includes
•Script includes
•JavaScript
@denaem: oops. Fixed.