Creating ASP.Net MVC websites using the Foundation Framework, part 2
In my previous article we looked at some of the different types of CSS UI Kits, frameworks, bootstraps and boilerplates available to you as developer to start designing and creating a website quickly. We’ve also started to build an ASP.Net MVC website using the Foundation framework.
In this article we’ll build upon the last article and extend the website we started building, by implementing a new layout and adding a number of enhancements. Let’s get cracking!
- Opening the Visual Studio project
- Changing the master layout of the web-site
- Activating the slider
- Adding a Contact Us page
Opening the Visual Studio project
Start by opening the sample project from the last article. If you do not have it already you can download it here. The project layout should resemble the following in the Visual Studio Solution Explorer:
Changing the master layout of the web-site
At the moment the master layout is not ideal for the website we have in mind, so we need to change it. Luckily, the Foundation framework comes with a collection of 13 ready-made templates that are ideal to start off your website. Head over to https://foundation.zurb.com/templates.php
Let’s assume we want to build a marketing site that shows off some of our products and skills. In this scenario the Orbit Home template would be ideal. It contains a placeholder for our logo and a slider in the middle.
Next, open the _Layout.cshtml file located inside the Views folder. Since this file already contains all the links to the Foundation CSS and JavaScript files we only need to change the mark-up inside the <body> tag.
On the Foundation templates page, click on the HTML link underneath the Orbit Home template.
This will show a pop-up window with the HTML mark-up necessary to create the desired layout. We won’t copy all the mark-up for the _Layout.cshtml file, but only use certain parts of it. The first part of the markup is used to create the top navigation menu:
<div class="row"> <div class="large-3 columns"> <h1> <img src="https://placehold.it/400x100&text=Logo" /></h1> </div> <div class="large-9 columns"> <ul class="right button-group"> <li><a href="#" class="button">Link 1</a></li> <li><a href="#" class="button">Link 2</a></li> <li><a href="#" class="button">Link 3</a></li> <li><a href="#" class="button">Link 4</a></li> </ul> </div> </div>
The last part of the markup makes up the footer of the page:
<footer class="row"> <div class="large-12 columns"> <hr /> <div class="row"> <div class="large-6 columns"> <p>© Copyright no one at all. Go to town.</p> </div> <div class="large-6 columns"> <ul class="inline-list right"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </div> </div> </div> </footer>
Since we want all the pages on our site to share the same logo, navigation menu and footer, we’ll include their mark-up in the _Layout.cshtml page. The final result should look like the following:
<!DOCTYPE html> <!--[if IE 8]> <html class="no-js lt-ie9" lang="en" > <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>@ViewBag.Title</title> <link rel="stylesheet" href="@Url.Content("~/css/foundation.css")"> <script src="@Url.Content("~/js/vendor/custom.modernizr.js")"></script> </head> <body> <div class="row"> <div class="large-3 columns"> <h1> <img src="https://placehold.it/400x100&text=Logo" /></h1> </div> <div class="large-9 columns"> <ul class="right button-group"> <li><a href="@Url.Action("Index", "Home")" class="button">Home</a></li> <li><a href="#" class="button">About Us</a></li> <li><a href="#" class="button">Products</a></li> <li><a href="@Url.Action("Index", "Contact")" class="button">Contact Us</a></li> </ul> </div> </div> @RenderBody() <footer class="row"> <div class="large-12 columns"> <hr /> <div class="row"> <div class="large-6 columns"> <p>© Copyright no one at all. Go to town.</p> </div> <div class="large-6 columns"> <ul class="inline-list right"> <li><a href="@Url.Action("Index", "Home")">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Products</a></li> <li><a href="@Url.Action("Index", "Contact")">Contact Us</a></li> </ul> </div> </div> </div> </footer> <script> document.write('<script src=' + ('__proto__' in {} ? '@Url.Content("~/js/vendor/zepto")' : '@Url.Content("~/js/vendor/jquery")') + '.js><\/script>') </script> <script src="@Url.Content("~/js/foundation.min.js")"></script> <script> $(document).foundation(); </script> @RenderSection("scripts", false) </body> </html>
You will notice that we still kept the @RenderBody() method between the menu and footer sections. I’ve also changed the top and bottom navigation menus to link to the Home and Contact controller. We’ll add the contact controller a little bit later on.
With the master layout in place, we need to change the Home view. Open the Index.cshtml file inside the Home folder, which is a child of the Views folder.
Remember that the _Layout page already contains all the necessary mark-up for the navigation menu and footer, so we only need to add the mark-up between those two sections to the Home Index view.
Paste the markup from <!– First Band (Slider) –> up to just before <!– Footer –> in the Index.cshtml file. The final result should look like follows:
@{
ViewBag.Title = "Index";
Layout = "~/Views/_Layout.cshtml";
}
<!-- First Band (Slider) -->
<div class="row">
<div class="large-12 columns">
<div id="slider">
<img src="https://placehold.it/1000x400&text=[ img 1 ]" />
</div>
<hr />
</div>
</div>
<!-- Three-up Content Blocks -->
<div class="row">
<div class="large-4 columns">
<img src="https://placehold.it/400x300&text=[img]" />
<h4>This is a content section.</h4>
<p>Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Eiusmod swine spare ribs reprehenderit culpa. Boudin aliqua adipisicing rump corned beef.</p>
</div>
<div class="large-4 columns">
<img src="https://placehold.it/400x300&text=[img]" />
<h4>This is a content section.</h4>
<p>Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Eiusmod swine spare ribs reprehenderit culpa. Boudin aliqua adipisicing rump corned beef.</p>
</div>
<div class="large-4 columns">
<img src="https://placehold.it/400x300&text=[img]" />
<h4>This is a content section.</h4>
<p>Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Eiusmod swine spare ribs reprehenderit culpa. Boudin aliqua adipisicing rump corned beef.</p>
</div>
</div>
<!-- Call to Action Panel -->
<div class="row">
<div class="large-12 columns">
<div class="panel">
<h4>Get in touch!</h4>
<div class="row">
<div class="large-9 columns">
<p>We'd love to hear from you, you attractive person you.</p>
</div>
<div class="large-3 columns">
<a href="#" class="radius button right">Contact Us</a>
</div>
</div>
</div>
</div>
</div>
Build and run your project. You should see the layout as expected… But wait! The slider in the middle is not sliding its images… let’s look at the reason why.
Activating the slider
To activate the slider we only need to change a small part of the HTML mark-up in the Index.cshtml file in the Home folder. Look for a <div> tag whose id attribute is set to slider. Add the following inside the div element:
<ul data-orbit> <li> <img src="https://placehold.it/1000x400&text=[ img 1 ]" /></li> <li> <img src="https://placehold.it/1000x400&text=[ img 2 ]" /></li> <li> <img src="https://placehold.it/1000x400&text=[ img 3 ]" /></li> <li> <img src="https://placehold.it/1000x400&text=[ img 4 ]" /></li> </ul>
Adding a Contact Us page
With the layout and front page of our website ready to go, let’s add one more page for users to get in touch with us. Right-click on the Controllers folder inside the Solution Explorer and select Add Controller. In the Add Controller dialog, change the Controller name field to ContactController and set the Template dropdown list to “Empty MVC Controller”.
This will add a new ContactController class to the Controllers folder. Right-click inside the Index method of the ContactController and select Add View from the context-menu.
In the Add View dialog window, check the “Use layout or master page” check box and select the _Layout.cshtml file we’ve worked on earlier.
This will create a Contact folder inside the View folder and create an Index.cshtml. Open the Index.cshtml file. By using Foundations’ grid system you can build pretty amazing forms in a short amount of time. Add the following mark-up to the Index.cshtml file:
@{
ViewBag.Title = "Index";
Layout = "~/Views/_Layout.cshtml";
}
<div class="row">
<div class="large-12 columns">
<h2>Contact Us</h2>
@using (Html.BeginForm())
{
<div class="row">
<div class="small-8">
<div class="row">
<div class="small-3 columns">
<label for="right-label" class="right inline">Your Name</label>
</div>
<div class="small-9 columns">
<input type="text" id="fullname" placeholder="Your full name">
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label for="right-label" class="right inline">E-mail Address</label>
</div>
<div class="small-9 columns">
<input type="text" id="email" placeholder="A valid email address">
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label for="right-label" class="right inline">Comment</label>
</div>
<div class="small-9 columns">
<textarea placeholder="Your comments or questions"></textarea>
</div>
</div>
<div class="row">
<div class="small-3 columns">
</div>
<div class="small-9 columns">
<input type="submit" class="button" value="Send">
</div>
</div>
</div>
</div>
}
</div>
</div>
Save, build and run your project. When the website starts, click on the Contact Us page. You should see the following form – notice the navigation menu and footer is shared amongst the pages:
That is a good starting point for any website project, feel free to read more about the Foundation framework and be sure to come back next time where we’ll look at another HTML/CSS Framework that can help you create great looking websites quickly and easily.
Thank you for reading. Until next time, keep coding!
Available downloads:
Sample ASP.Net MVC web-site project (created with Foundation)