New to The Big Boy MVC Series?
Read the series from its humble beginnings.
Let’s face it. Developers aren’t the most fashionable folk. We can’t dress ourselves, we don’t kiss well, we don’t understand human interaction with other humans, touching feels complicated to our fingers, etc. As such, when it comes to designing and laying out our webpages, we’re not the most graceful fellows. We make some boxes, we put some boxes inside the boxes, we write some code that throws some content inside the boxes (which are inside boxes), and, when we’re finished boxing all of our boxes, we box everything up inside another box, name it something like “Growlr,” and we ship it to the public.
I admit it. I myself am a boxer. And, yes. I know. My initial page mockups suffer from a slight case of boxy divitis. Don’t mock me. Don’t cry. It’s okay. Divs are easy to throw together in a hurry, which is what we were in (a hurry). But, since we’re ready to do some refining, we can go ahead and start refactoring our styling (along with our pages) a bit. Like delicate ninjas.
Luckily, 960gs can help us. We can use the framework to help us destroy the unnecessary divs and classes that so often clutter up our html. Hence, this post. WebDesignerDepot.com has a great article on the subject of using 960gs to quell divitis, so we’ll use a quote from that article as our mantra for the following task:
The .container_x and .grid_x classes aren’t restricted to div elements. The class attribute can be applied to any element except html, head, meta, param, script, title and style—so, practically anything in the body. If a pair of div tags enclose only one item, then they may be unnecessary.
Hopefully, by now, you’re starting to get a sense of how I intend to glue this project together: start by putting something kind of crappy together, refine it a little, add a few elements to it, read about why what I did might suck really badly, refine again, rinse, cry, repeat. Ultimately, these mini-iterations make the creation of the website much easier, as it alleviates any desire I might have to create something awesome in an instantaneous moment of Godlike creation–like a microwave heating up a hotpocket for a starving Sudanese child. Admittedly, in some sense, we might be metaphysically violating the DRY principle here, but we’re doing so for the benefit of our own sanity.
Let’s start by refining and adding a few elements to our Master Page.
<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">
<a href="<%= Url.Action("Index", "Home") %>">
<img src="x.png" alt="BigFatDish TODO:keywords" class="grid-3" />
</a>
</div>
<div id="navigation">
<ul class="container-16">
<li class="grid-3"><%= Html.ActionLink("Home", "Index", "Home") %></li>
<li class="grid-3"><%= Html.ActionLink("Add New Food", "Add", "Food") %></li>
</ul>
</div>
<div id="content">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
<div id="footer-top">
<div class="container-16">
</div>
</div>
<div id="footer-bottom">
<div class="container-16">
</div>
</div>
</body>
</html>
And our Index page. Notice that I removed some divs and added a foreach loop (which I commented out). We’ll uncomment this foreach loop when we’ve built the functionality necessary to use it:
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Big Fat Dish - Obesity Abides
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div class="container-16">
<h1>Welcome to Big Fat Dish</h1>
<p class="explanation">Explanation</p>
<div id="add-food" class="grid-16">
Add New Food
</div>
<%-- foreach(var food in Model.Foods) { --%>
<div class="food grid-16">
<img class="grid-4" alt="TODO:keywords" src="x.jpg" />
<ul class="details grid-11">
<li class="name">Name</li>
<li class="location">Location</li>
<li class="description">Description</li>
</ul>
</div>
<%-- } --%>
</div>
</asp:Content>
And our Food Details page.
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Food
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div class="container-16">
<img src="x.png" alt="TODO:keywords" class="grid-4" />
<ul id="details" class="grid-12">
<li id="name">Food Name</li>
<li id="location">Location</li>
<li id="description">Description</li>
</ul>
</div>
</asp:Content>
And our Food Added page.
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
{Encoded Food Name} Added
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div id="food-added-container" class="container-16">
<h1>Thanks for Submitting {Encoded Food Name}!</h1>
<h2><%= Html.ActionLink("View the page created for {Encoded Food Name}", "Details") %></h2>
<div id="add-food" class="grid-16">
Add Another Food
</div>
</div>
</asp:Content>
And, last but not least, our Add Food page. We’ll be working with this page extensively in my upcoming posts, so, as part of this cleanup process, let’s also start to flesh out the form with real input fields. In particular, we’ll make use of the Html.TextBox extension in MVC’s HtmlHelper class. Don’t worry too much about what these directives are for; just bask in the glory of the anti-divitis. Soon enough, like in Lost, it’ll all make an amazing amount of sense:
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Add a Food
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div class="container-16">
<h1>Add a Food</h1>
<% Html.BeginForm(); %>
<div id="add-image" class="grid-4 prefix-1">
Click to Add Image
</div>
<p class="grid-6 expanation">Explanation of Form</p>
<div id="fields" class="grid-11">
<label for="name" class="grid-4">Food Name:</label>
<%= Html.TextBox("name", null, new { @class = "grid-6" }) %>
<label for="restaurant" class="grid-4">Restaurant Name:</label>
<%= Html.TextBox("restaurant", null, new { @class = "grid-6" }) %>
<label for="address" class="grid-4">Restaurant Address:</label>
<%= Html.TextBox("address", null, new { @class = "grid-6" }) %>
<input type="submit" value="Add Food" />
</div>
<% Html.EndForm(); %>
</div>
</asp:Content>
So, we’ve cleaned up our pages. We’ve prepped our Add Food page for HttpPost handling. We’ve got our divitis under moderate control. As far as I can tell, our project is sucking less and less by the minue, and we’ve yet to write more than 30 lines of C#–half of which are lines in our unit tests! If this is your first MVC project, that’s really to be moderately proud of.
Move on to Part 18: Linq To SQL Tutorial, a Preamble.
Read More
You can leave a response, or trackback from your own site.
2 Responses to “The Big Boy MVC Series — Part 17: Curing a Moderately Bad Case of Divitis”
Leave a Reply
[...] Until then, happy coding. Move on to: Part 17: Curing a Moderately Bad Case of Divitis. [...]
[...] If you’ve been following along, we’ve already done a considerable amount of work on our FoodAdd page. Time now for another quick, painless [...]