Simple CMS with Linq to SQL part II-a

No CMS would be complete without a way to search for content. Although, we didn’t actually create a mechanism for searching yet, let’s create the form for it anyway in the Views/Shared folder as SearchControl.ascx.

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<form>
<p>
	<input type="text" accesskey="s" id="search" name="search" title="Search" /> 
	<input type="image" src="/content/img/magnifier.png" alt="Search" />
</p>
</form>

Since we have these new user controls, let’s bring them into our pages…

We can start by editing the Site.Master also in the same folder

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head runat="server">
	<title>
		<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
	</title>
	<link href="../../Content/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div class="page">
		<div class="header">
			<h1><a href="/">Simple<span>CMS</span></a></h1>
			<p class="info">“A basic demonstration project”</p>
			<div class="nav">
				<% Html.RenderPartial("LogOnUserControl", new SimpleCMS.Models.LogOnModel()); %>
				<ul>
					<li><%: Html.ActionLink("Home", "Index", "Home")%></li>
					<li><%: Html.ActionLink("About", "About", "Home")%></li>
					<li><%: Html.ActionLink("News", "Index", "Pages", null, null)%></li>
				</ul>
			</div>
		</div>
		<div class="body">
			<div class="content">
				<asp:ContentPlaceHolder ID="MainContent" runat="server" />
			</div>
			<div class="sidebar">
				<% Html.RenderPartial("SearchControl"); %>
				<asp:ContentPlaceHolder ID="Sidebar" runat="server" />
			</div>
			<div class="columns">
				<div class="column">
					<asp:ContentPlaceHolder ID="Column1" runat="server" />
				</div>
				<div class="column">
					<asp:ContentPlaceHolder ID="Column2" runat="server" />
				</div>
				<div class="column">
					<asp:ContentPlaceHolder ID="Column3" runat="server" />
				</div>
				<div class="column">
					<asp:ContentPlaceHolder ID="Column4" runat="server" />
				</div>
				<hr />
			</div>
			<div class="footer">
				<p>Copyright © 2010</p>
			</div>
		</div>
	</div>
</body>
</html>

And last, but not least, let’s modify the Index.aspx view in the Views/Home folder. This is the first page displayed when you first run your project, hence the most important view, so I added some extra content to make it fuller.

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<SimpleCMS.Models.PageView>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Home Page
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
	<div class="posts">
		<div class="welcome">
			<h2><%: ViewData["Message"] %></h2>
			<p>
				This is a demonstration project to displaying the basics of a Content Management
				System.
			</p>
		</div>
		<% Html.RenderPartial("PageList", ViewData.Model.Pages); %>
	</div>

	<div class="extras">
		<ul class="roll">
			<li><img src="/content/icons/abstract10.gif" alt="abstract10.gif" /> Proin placerat nunc quis turpis. Proin risus lectus, commodo nec, dignissim vel, cursus non, est. Maecenas rhoncus consectetuer neque.</li>
			<li><img src="/content/icons/arrow.gif" alt="arrow.gif" /> Morbi eros lorem, eleifend eu, aliquam pretium, egestas sed, felis. In hac habitasse platea dictumst. Mauris augue. </li>
			<li><img src="/content/icons/basketball2.gif" alt="basketball2.gif" /> Nam vitae diam tristique arcu rutrum congue. Pellentesque congue diam sit amet lacus. Quisque eget est sed augue pulvinar pellentesque.</li>
			<li><img src="/content/icons/bigheadsm.gif" alt="bigheadsm.gif" /> Maecenas risus dui, iaculis eget, dapibus eu, pulvinar ac, pede. Suspendisse tempor. Proin pretium sem sed leo. </li>
			<li><img src="/content/icons/bluebrown.gif" alt="bluebrown.gif" /> Nullam ligula eros, vehicula quis, egestas sed, venenatis sit amet, nisl. Mauris pede odio, ornare vitae, ultricies a, tempor quis, sapien. </li>
			<li><img src="/content/icons/bright.gif" alt="bright.gif" /> Quisque in ante nec dolor condimentum scelerisque. Fusce eleifend ligula id lectus. Curabitur quis mauris. Sed nibh. Sed vel mi. </li>
			<li><img src="/content/icons/brokenglasssm.gif" alt="brokenglasssm.gif" /> Fusce lacinia laoreet turpis. Sed sit amet dolor eu libero convallis dictum. Cras venenatis pretium ante. Integer ante. </li>
			<li><img src="/content/icons/dark1.gif" alt="dark1.gif" /> Nulla eleifend ornare odio. Sed ac urna eget ante venenatis porta. Curabitur pellentesque. Cras pulvinar luctus lacus. </li>
			<li><img src="/content/icons/cartoony.gif" alt="cartoony.gif" /> Etiam auctor faucibus sapien. Suspendisse libero quam, cursus non, viverra bibendum, ultricies eu, magna. Fusce ut massa. Integer purus. </li>
		</ul>
	</div>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="Sidebar" runat="server">
	<%
		if (ViewData.Model.CommentSummary != null)
		{%><h3>Latest comments</h3>
	<%
		Html.RenderPartial("CommentSummary", ViewData.Model.CommentSummary);
		}%>
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="Column1" runat="server">
	<h5>
			About
	</h5>
	<p>
		Donec malesuada augue ac nunc. Sed eu diam commodo lacus auctor imperdiet. 
		Duis ipsum. Praesent luctus gravida nisl. Nam pretium, urna nec imperdiet molestie, 
		augue neque egestas odio, et tempus nisl diam nec sapien.
	</p>
	<p>
		Ut justo arcu, porta congue, accumsan id, auctor at, mauris. 
		Nullam volutpat arcu at elit. Suspendisse lorem nibh, vehicula ut, 
		bibendum et, feugiat nec, arcu. Sed sit amet tortor eu nibh gravida 
		condimentum. Nullam mattis vehicula lorem. Pellentesque vitae libero 
		sed nisl hendrerit sollicitudin.
	</p>
</asp:Content>

<asp:Content ID="Content5" ContentPlaceHolderID="Column2" runat="server">
	<h5>
			Links
	</h5>
	<ul>
		<li><a href="">Some site</a></li>
		<li><a href="">Sed sit amet dolor</a></li>
		<li><a href="">Praesent luctus gravida</a></li>
		<li><a href="">Donec tempor sagittis dui</a></li>
		<li><a href="">Duis adipiscing</a></li>
		<li><a href="">Etiam ultrices aliquet mi</a></li>
		<li><a href="">Ut justo arcu, porta congue</a></li>
		<li><a href="">Nullam volutpat arcu at elit</a></li>
		<li><a href="">Sed eu diam commodo lacus auctor</a></li>
	</ul>
</asp:Content>

<asp:Content ID="Content6" ContentPlaceHolderID="Column3" runat="server">
<h5>
		Other stuff
</h5>
<p>
		Sed magna magna, vestibulum sit amet, interdum id, tempus in, felis.
</p>
</asp:Content>

<asp:Content ID="Content7" ContentPlaceHolderID="Column4" runat="server">
	<h5>Contact Us</h5>
	<form action="/" method="post">
		<fieldset>
			<p><label>Name <input type="text" id="name" name="name" /></label></p>
			<p><label>Email <input type="text" id="email" name="email" /></label></p>
			<p><label>Subject <input type="text" id="subject" name="subject" /></label></p>
			<p><label>Message <textarea id="message" name="message" rows="3" cols="10"></textarea></label></p>
		</fieldset>
		<p><input type="submit" value="Send" /></p>
	</form>
</asp:Content>

Before compiling this again, let’s just make sure that our view controls and pages are in the appropriate folders…

View pages and controls sorted

If all went well, once you’ve compiled and run your project, you should now be greeted with the following…

Your front page layout

And what reading one of those pages looks like…

Reading a test page with a comment. Both have images courtesy of Markdown

And what editing the same page looks like…

The edit view for a page. Note the Markdown syntax used to embed an image.

And finally, what editing a comment looks like.

It's the same comment as on the demo post. Note the Markdown syntaxt for the Google image.

In our next installmennt, we’ll go into breadcrumb navigation (after all, you can create pages within pages to an ulimited depth, but what’s the point if you can’t find your way back) as well as Membership and Role management. We’ll also go into selective content creation/modification privileges based on those roles.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s