Prototype Main Page

Apps are not just code--they require great CSS and lightweight but effective images to get the message across. These files typically live in a content folder in MVC apps separate from the views they support.  They are directly accessed by the browser and bypass the controller-based routing in MVC.

For the purposes of this walkthrough we'll assume that we've gone through a design process and now have access to images, css styles, and static HTML from which to build our app.

Our static prototype task board will end up looking something like this:


  1. Delete the content\themes folder created when adding the jQuery UI NuGet package.
  2. Copy required images and css to the content folder: content.zip
  3. Copy additional scripts to the scripts folder: scripts.zip
  4. Create a Shared folder under Views.
  5. Add a view called _Layout.cshtml to the Shared folder.
  6. Replace the contents of _Layout.cshtml with the following code snippet:
    <!doctype html> 
    <!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]--> 
    <!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]--> 
    <!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]--> 
    <!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]--> 
    <head> 
    	<meta charset="utf-8"> 
    	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    	<title>TodoApp</title>
    	<meta name="description" content="xAppify - your apps. your way."> 
    	<link rel="shortcut icon" href="/favicon.ico"> 
    	<link rel="stylesheet" href="@Url.Content("~/content/appDefaultSkin.css?v=2")">
    	<link rel="stylesheet" href="@Url.Content("~/content/jquery-ui/jquery-ui-1.8.19.custom.css")">
    	@RenderSection("stylesheet", required: false)
    	<script src="@Url.Content("~/scripts/modernizr-1.7.min.js")"></script>
    	<script src="@Url.Content("~/scripts/jquery-1.7.2.min.js")"></script>
    	<script src="@Url.Content("~/scripts/jquery-ui-1.8.19.min.js")"></script>
    	<script src="@Url.Content("~/scripts/MicrosoftAjax.debug.js")"></script>
    	<script src="@Url.Content("~/scripts/MicrosoftAjaxTemplates.debug.js")"></script>
    	<script src="@Url.Content("~/scripts/exoweb-msajax.js?cachehash=" + ExoWeb.CacheHash)"></script>
    	<script src="@Url.Content("~/scripts/exoweb-jquery.dialog.js")"></script>
    	<script src="@Url.Content("~/scripts/jquery.corner.js")"></script>
    	@RenderSection("scriptReferences", required: false)
    	
    
    </head> 
    
    <body xmlns:sys="javascript:Sys"
    	xmlns:dataview="javascript:Sys.UI.DataView"
    	xmlns:content="javascript:ExoWeb.UI.Content"
    	xmlns:template="javascript:ExoWeb.UI.Template"
    	xmlns:toggle="javascript:ExoWeb.UI.Toggle"
    	xmlns:html="javascript:ExoWeb.UI.Html"> 
    	<div id="main">
    		<div class="wrap">
    		@RenderBody()
    		</div>
    	</div>
    	<footer></footer>
    </body> 
    </html>
    				
  7. Add a controller called HomeController.cs to the Controllers folder.
  8. Replace the contents of HomeController.cs with the following code snippet:
    using System.Web.Mvc;
    using TodoApp.Models;
    
    namespace TodoApp.Controllers
    {
    	public class HomeController : Controller
    	{
            [Authorize]
    		public ActionResult Index()
    		{
                var user = (User) User.Identity;
    			return View(user);
    		}
    	}
    }
    				
  9. Create a Home folder under Views.
  10. Add a view called Index.cshtml to the Home folder.
  11. Replace the contents of Index.cshtml with the following code snippet:
    @model TodoApp.Models.User
    
    @{
    	Layout = "~/Views/Shared/_Layout.cshtml";
    	ViewBag.Title = "Index";
    }
    
    @section stylesheet {
    	<link rel="stylesheet" href="@Url.Content("~/content/board.css")">
    }
    
    @section scriptReferences {
    <script src="@Url.Content("~/scripts/board-styles.js")"></script>
    <script src="@Url.Content("~/scripts/board-resize.js")"></script>
    }
    
    @*
    Main board interface
    *@
    
    <div class="board">
    	<div class="board-title">
    		<span class="board-user">User Name</span>
    		<a class="board-addlist" href="#" onclick="return false;">Add a list..</a>
    	</div>
    	<div class="board-background">
    		<div class="board-list">
    			<div class="board-list-title">
    				<strong>List Name</strong>
    				<span class="board-deletelist"></span>
    			</div>
    			<div class="board-list-content sortable">
    				<div sys:class="High">
    					<div class="board-list-item">
    						<div class="board-list-item-text">
    							<span>Item Description</span>
    						</div>
    						<div class="board-list-item-age-description">Item Age Description (eg, one minute ago)</div>
    						<span class="board-list-item-priority"></span>
    						<a class="board-list-deleteitem" href="#" onclick="return false;"></a>
    					</div></div></div>
    			<div class="board-list-additem">
    				<input type="text" style="display:none;" value="" />
    				<a href="#" onclick="return false;">Add an item...</a></div>
    		</div>
    	</div>
    </div>