.Net servlet tag library
Illustrates the use of SharpTiles without a tiles.xml
If you just want to use the SharpTiles without the additional tiles.xml, you should read this tutorial. Without the tiles.xml you will lose the power of dependency injection. This means each view will have an explicit relation to it's parent tile. You can compare this the masterpage construction used in aspx pages.
So let's start.
Register the SharpTiles Nstl view engine in the global.asax.cs
protected void Application_Start()
{
RegisterRoutes(RouteTable.Routes);
ViewEngines.Engines.Clear();
ViewEngines.Engines.Add(new NstlViewEngine().Init());
}
Convert the master page to a tile
.asxp
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
Converted to SharpTiles
<!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" />1
</title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
<% Html.RenderPartial("LogOnUserControl"); %>2
</div>
<div id="menucontainer">
<ul id="menu">
<li><%= Html.ActionLink("Home", "Index", "Home")%></li>
<li><%= Html.ActionLink("About", "About", "Home")%></li>
</ul>3
</div>
</div>
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />4
<div id="footer"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Extracted menu
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title><tiles:insert name="title"/>1</title>
<link href="<c:url value='~/Content/Site.css'/>"
rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>SharpTiles Plain Tiles tutorial</h1>
</div>
<div id="logindisplay">
<tiles:insertTemplate template="Logon.htm"/>2
</div>
<div id="menucontainer">
<tiles:insertTemplate template="Menu.htm"/>3
</div>
</div>
<div id="main">
<div id="content">
<tiles:insert name="body"/>4
</div>
<div id="footer">
<p>
My Sample MVC Application WITH TILES © Copyright 2008
</p>
</div>
</div>
</div>
</body>
</html>
<ul id="menu">
<li>
<a id="menu_to_index"
href="<c:url value='~/Home/Index'/>">Index</a>
</li>
<li>
<a id="menu_to_about"
href="<c:url value='~/Home/About'/>">About</a>
</li>
</ul>3
- Changed the content place holder, <asp:ContentPlaceHolder/>, with tiles insert tag, <tiles:insert />.
- Changed the content place holder, <% Html.RenderPartial %>, with tiles insert template tag, <tiles:insertTemplate />. We can do this because the Logon part is the same in all views.
- Extract the menu <ul id="menu"> into a tile. It is always the same so we can import is as a template. with the <tiles:insertTemplate />
- Changed the content place holder, <asp:ContentPlaceHolder/>, with tiles insert tag, <tiles:insert />.
The master page is now translated to a tile with tile definition. Now we will translate the View/Home/Index.aspx to a tile.
View/Home/Index.aspx
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="indexTitle"1
ContentPlaceHolderID="TitleContent"
runat="server">
Home Page
</asp:Content>
<asp:Content ID="indexContent"2
ContentPlaceHolderID="MainContent"
runat="server">
<h2><%= Html.Encode(ViewData["Message"]) %></h2>
<p>
To learn more about ASP.NET MVC visit ...
</p>
</asp:Content>
Converted to View/Home/Index.tile
<tiles:insertTemplate template="../Shared/Layout.htm">
<tiles:putAttribute name="title">1
Home Page
</tiles:putAttribute>
<tiles:putAttribute name="body">2
<div id="main">
<h2>
${Message}
</h2>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
</div>
</tiles:putAttribute>
</tiles:insertTemplate>
- Defined the content for the tile place holder title.
- Defined the content for the tile place holder body.
The structure of the tile looks very much like the aspx. It's very easy to nest the views more than one level. Now we have defined a view named Home.Index This view is the default view of the Index() method in the HomeController().
The rest is more of the same. See the project for end result.