Asp.Net MVC programming advice. Toodles, Evan Nagle.
Jun
16

The Big Boy MVC Series — Part 15: Creating an Asp.Net MVC Master Page

2 Comments
Posted by Evan in ASP.NET MVC,Big Boy MVC

New to The Big Boy MVC Series?
Read the series from its humble beginnings.

Yesterday, we wrote approximately twenty-two lines of C#. That was fun. Today, we’ll start fiddling around with the html in our Site.Master page. That will also be fun. Or maybe that will also be not fun. Who knows.

Step 1: Sleep an extra thirty minutes. Why? Because we already drew up a prototype for our Site.Master page a few days ago. That means more sleeping (and thus more bedwetting) than usual. Here, then, is our ticket to some extra z’s. You’re welcome:

BFD 960 frame e1276044898467 The Big Boy MVC Series — Part 15: Creating an Asp.Net MVC Master Page

Step 2: Include the 960gs stylesheets in your project. If you haven’t already, you can download 960gs here. You can read a Nettuts tutorial about 960gs here. When you’re ready, unzip the ninesixty folder and add 960.css, reset.css, and test.css to the Content folder in your VS project:

960 files e1276653692498 The Big Boy MVC Series — Part 15: Creating an Asp.Net MVC Master Page

Step 3: Remove all of the styling in Site.css. Also, let’s change “Site.css” to “site.css” (no caps; I’m anti-majuscules). Because capital letters make me look fat. And besides, I love the MVC team. I really do. I’d trust them to take care of my baby. But I wouldn’t trust them to dress my baby fashionably. Hence, we’ll relieve them of any unnecessary aesthetic obligations:

clean site e1276654026558 The Big Boy MVC Series — Part 15: Creating an Asp.Net MVC Master Page

Step 4: Remove almost all of the crap in the Site.Master file. That’s right. Pretty much all of it.


<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
</head>

<body>
    <asp:ContentPlaceHolder ID="MainContent" runat="server" />
</body>
</html>

Step 5: Add divs to represent each page section. Our prototype calls for five sections: header, navigation, content, top footer, and bottom footer. We’ll create a div for each. We’ll give each div a unique id and a class of page-section:


<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
</head>

<body>
    <div id="header" class="page-section">
    </div>

    <div id="navigation" class="page-section">
    </div>

    <div id="content" class="page-section">
        <asp:ContentPlaceHolder ID="MainContent" runat="server" />
    </div>

    <div id="footer-top" class="page-section">
    </div>

    <div id="footer-bottom" class="page-section">
    </div>
</body>
</html>

Step 6: Add all of the necessary style tags to your frame. We have four stylesheets in our project, and we’ll be referencing all of them:


<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>

    <link href="../../Content/text.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/reset.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/960.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/site.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="header" class="page-section">
    </div>

    <div id="navigation" class="page-section">
    </div>

    <div id="content" class="page-section">
        <asp:ContentPlaceHolder ID="MainContent" runat="server" />
    </div>

    <div id="footer-top" class="page-section">
    </div>

    <div id="footer-bottom" class="page-section">
    </div>
</body>
</html>

Step 7: Add grid containers inside each page section. Here’s where a basic understanding of 960gs comes into play. Our .page-section divs will stretch across the entire page (100% width). Inside each page section, we’ll create a centered, 960px-wide grid on top of which we can position all of our page elements. For now, we’re just adding the invisible grids. Notice that we don’t wrap the ContentPlaceHolder in a grid–this is because we don’t want to restrict the kind of styling we can do within each individual content page.


<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>

    <link href="../../Content/reset.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/960.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/text.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="header" class="page-section">
        <div class="container-16">
        </div>
    </div>

    <div id="navigation" class="page-section">
        <div class="container-16">
        </div>
    </div>

    <div id="content" class="page-section">
        <asp:ContentPlaceHolder ID="MainContent" runat="server" />
    </div>

    <div id="footer-top" class="page-section">
        <div class="container-16">
        </div>
    </div>

    <div id="footer-bottom" class="page-section">
        <div class="container-16">
        </div>
    </div>
</body>
</html>

Step 7: Create some elements in the frame. Even if they’re fake. For now, we’ll just create some tabs and a crappy text logo. If you’re super-astute (or super-bored), you’ll notice that I made my tabs a wee bit bigger than suggested in the prototype.


<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>

    <link href="../../Content/reset.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/960.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/text.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="header" class="page-section">
        <div class="container-16">
            <div class="grid-3">Logo</div>
        </div>
    </div>

    <div id="navigation" class="page-section">
        <div class="container-16">
            <div class="grid-3">Tab 1</div>
            <div class="grid-3">Tab 2</div>
            <div class="grid-3">Tab 3</div>
        </div>
    </div>

    <div id="content" class="page-section">
        <asp:ContentPlaceHolder ID="MainContent" runat="server" />
    </div>

    <div id="footer-top" class="page-section">
        <div class="container-16">Footer Top</div>
    </div>

    <div id="footer-bottom" class="page-section">
        <div class="container-16">Footer Bottom</div>
    </div>
</body>
</html>

Step 8: Add some simple styling to site.css. We want to ensure that our page sections have a width of 100%. We also want to make sure that each page section spans the height specified in our initial prototype. That’s pretty much it.


.page-section
{
	overflow:hidden;
	width:100%;
}

#header
{
	height:60px;
}

#navigation
{
	height:80px;
}

#footer-top
{
	height:200px;
}

#footer-bottom
{
	height:60px;
}

Step 9: Run your project. Don’t be afraid. I know; it’s ugly. You’re not going to win a Webby yet. But our elements are all happily aligned, and when we do start to really fine-tune our design, the framework we’ve established will become super-handy. Trust me on this one.

frame 11 e1276657559570 The Big Boy MVC Series — Part 15: Creating an Asp.Net MVC Master Page

Step 10: Resume sleeping. We’ll be doing some more design work tomorrow! For now, enjoy your life, your new ugly website, and unglue your sad lonesome eyes from that screen for awhile. Or, laugh at this hilarious picture:

651 e1276587939120 The Big Boy MVC Series — Part 15: Creating an Asp.Net MVC Master Page

Move on to Part 16: Creating Asp.Net MVC ActionLinks and ViewPages.

Read More

You can leave a response, or trackback from your own site.

2 Responses to “The Big Boy MVC Series — Part 15: Creating an Asp.Net MVC Master Page”

 
  1. The Big Boy MVC Series — Part 14: Creating Asp.Net MVC Controllers, Views, and Routes (Cont’d) « weirdlover says:
    June 16, 2010 at 3:22 am

    [...] Move on to Part 15: Creating an Asp.Net MVC Master Page. [...]

  2. The Big Boy MVC Series — Part 16: Creating Asp.Net MVC ActionLinks and ViewPages « weirdlover says:
    June 19, 2010 at 12:31 am

    [...] my last post, we created a really ugly MVC Master Page. I mean, really ugly. Like, the kind of ugly that melts [...]

 

Leave a Reply