Simple CMS with Linq to SQL part II-a

Now it’s time to look at the presentation end…

Let’s start with the modified style.css file in the Content folder.

/* Common */
body
{
	font-family: "Segoe UI" , Tahoma, Sans-Serif;
	font-weight: normal;
	font-size: medium;
}

/* Screen */
@media screen
{
	/* Reset */
	body, div, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, select, ul, li, table, td, th, hr
	{
		margin: 0;
		padding: 0;
		border: 0;
	}
	body
	{
		font: normal 81% Sans-serif,tahoma,verdana;
		background: #E8EAEF;
		text-align: center;
		padding: 0 0 20px 0;
		color: #575757;
	}

	div.page
	{
		text-align: left;
		width: 90%;
		min-width: 800px;
		max-width: 1300px;
		background: #fff;
		margin: 20px auto 0 auto;
	}

	div.header
	{
		min-height: 100px;
		position: relative;
	}

	div.header, div.body, div.footer, div.columns, div.meta, hr
	{
		clear: both;
	}

	div.content
	{
		float: left;
		display: inline;
		width: 80%;
	}

	div.sidebar
	{
		float: right;
		display: inline;
		width: 20%;
	}
	div.extras
	{
		float: right;
		width: 28%;
	}
	
	div.posts
	{
		width: 70%;
		padding: 0 10px 0 0;
		color: #575757;
		float: left;
	}
	
	div.welcome
	{
		background:#eee;
		padding:0;
		margin:5px;
	}
	
	div.post
	{
	}
	div.palt
	{
		background: #efefef;
	}

	div.columns
	{
		margin: 20px 0 0 0;
		display: block;
		background: #444;
		color: #eef;
		font-size: 90%;
	}

	div.column
	{
		width: 24%;
		float: left;
		min-height: 40px;
	}
	hr
	{
		height: 1px;
	}
	div.columns hr
	{
		background: #444;
		color: #444;
	}
	div.content hr
	{
		background: #fff;
		color: #fff;
	}
	div.footer
	{
		background: #444;
		color: #ccc;
		font: normal 75% Verdana, Helvetica, Sans-serif;
		text-align: center;
		text-transform: uppercase;
	}

	h1, h2, h3, h4, h5, h6
	{
		padding: 5px 10px;
	}
	h1, h2, h3, h4
	{
		font-weight: normal;
	}
	h1
	{
		display: block;
		font-size: 210%;
		padding: 5px 10px 0 10px;
		border: 0;
	}
	h1 a
	{
		color: #575757;
		text-decoration: none;
	}
	h1 span
	{
		font: bold 110% Times;
		color: #99f;
	}
	h2
	{
		font-size: 180%;
		padding: 10px;
		color: #777;
	}
	h2.articletitle
	{
		padding: 10px 10px 0 10px;
	}
	h3
	{
		font-size: 150%;
		padding: 10px;
	}
	ul.forums li h3
	{
		font-size: 130%;
		padding: 5px 0 0 10px;
	}
	ul.forums li h3 a
	{
		color: #555;
		text-decoration: none;
	}
	div.sidebar h3, div.extras h3
	{
		padding: 6px 0 5px 6px;
		margin: 0 7px;
		border: 0;
		background: #eef;
	}
	div.extras h3
	{
		margin: 10px 0 5px 0;
	}
	div.posts h3
	{
		padding: 5px 0 0 10px;
		border: 0;
	}
	h4, div.segment h4
	{
		font-size: 140%;
		padding: 10px 10px 5px 10px;
		line-height: 90%;
	}
	div.post h4
	{
		padding: 10px 10px 0 10px;
	}
	h4.pages
	{
		word-spacing: 10px;
		padding: 20px 10px;
	}
	h4 a
	{
		color: #575757;
		word-spacing: normal;
		text-decoration: none;
	}
	h4.pages a:hover
	{
		color: #333;
	}
	
	p.meta, div.postmeta p
	{
		font-size: 85%;
	}
	div.postmeta p a
	{
		color:#444;
	}
	p.loginmeta
	{
		float: right;
		display: inline;
		color: #eee;
		font-size:83%;
		word-spacing:5px;
		padding: 8px 10px;
	}
	p.loginmeta span, p.loginmeta a
	{
		word-spacing:normal;
	}
	p.powered
	{
		color:#E8EAEF;
		word-spacing:normal;
		line-height:200%;
		padding:10px;
	}
	a, div.post h4 a:hover, ul.topics li h5 a, ul.list li a
	{
		color: #55f;
	}
	div.nav fieldset a, p.loginmeta a
	{
		color: #eee;
		font-size:110%;
		text-decoration: none;
		font-weight: bold;
	}
	p.powered a
	{
		color:#444;
	}
	strong.curr
	{
		font-size: 140%;
	}
	span.loginlabel
	{
		color: #ccc;
		font-weight: bold;
		font-size: 90%;
	}
	
	ul.options, ul.breadcrumbs
	{
		padding:10px 0;
		list-style:none;
	}
	
	ul.breadcrumbs
	{
		padding:0 10px 10px 10px;
		display:block;
		clear:both;
	}
	
	ul.breadcrumbs li
	{
		display: inline-block;
	}
	
	ul.breadcrumbs li a
	{
		text-decoration:none;
		font-size:90%;
		font-weight:bold;
	}
	
	ul.options li
	{
		padding:2px 10px;
	}
	
	ul.topics li h5, div.content h5, ul.list li
	{
		font-size: 100%;
	}
	ul.topics li h5 span
	{
		font-size: 85%;
		font-weight: normal;
		display: block;
	}
	ul.topics li h5 span a
	{
		font-weight: bold;
		color: #333;
		text-decoration: underline;
	}
	ul.posts li
	{
		clear:both;
		background:#eee;
	}
	ul.posts li h5
	{
		background: #555;
		color: #fff;
	}
	ul.posts li h5 a
	{
		color: #fff;
	}
	ul.posts li div.entry
	{
		padding:5px 10px;
		line-height:200%;
		margin:0 0 0 150px;
	}
	ul.posts li div.info
	{
		float:left;
		width:145px;
		padding:5px;
		clear:both;
		text-align:center;
		background:transparent;
	}
	ul.posts li div.info span
	{
		display:block;
	}
	ul.posts li div.info span.ct,
	ul.posts li div.info h6
	{
		font-size:85%;
		padding:5px;
	}
	ul.posts li div.info span a
	{
		font-weight:bold;
		text-decoration:none;
	}
	ul.posts li div.info span.ct a
	{
		color:#444;
	}
	ul.list a, h5 a
	{
		text-decoration: none;
	}
	ul.list li a, ul.list li span
	{
		font-weight: bold;
		padding: 2px 5px;
		display: block;
	}
	ul.list li span strong
	{
		color: #55f;
	}
	div.extras h5
	{
		font-size: 120%;
		padding: 3px 0;
	}
	div.extras h5 a
	{
		color: #eef;
		font-weight: normal;
	}
	div.post h4 a:hover
	{
		text-decoration: underline;
	}
	p
	{
		padding: 5px 10px 20px 10px;
		line-height: 200%;
	}
	div.post p.data, div.meta p.data, ul.posts li p.functions
	{
		padding: 0 10px 5px 10px;
		font-size: 80%;
		text-transform: uppercase;
		color: #555;
	}
	ul.posts li p.data
	{
		padding: 0 10px;
	}
	
	div.post p.data a, div.meta p.data a, li p.data a
	{
		text-transform: none;
		text-decoration: none;
		color: #55f;
		font-size: 110%;
		font-weight: bold;
	}
	li p.data a
	{
		font-size:81%;
	}
	
	div.post p.data span, div.meta p.data span
	{
		display: block;
	}
	div.postform p
	{
		line-height: 150%;
		padding: 5px 10px;
	}
	div.header p.info
	{
		font: normal 90% verdana,sans-serif;
		text-transform: uppercase;
		padding: 5px 10px;
	}
	a img
	{
		border:0;
	}
	div.nav
	{
		background: #444;
		min-height: 40px;
		border: 5px solid #fff;
		border-width: 0 0 5px 0;
	}
	div.content div.nav
	{
		float: right;
		min-height: 34px;
	}
	div.nav ul li
	{
		float: left;
		padding: 6px 0;
		position: relative;
	}
	div.content div.nav ul li
	{
		border: 3px solid #fff;
		border-width: 0 3px 0 0;
	}
	div.content div.nav ul li ul li
	{
		border: 0;
	}
	div.nav ul li a, div.nav ul li span
	{
		padding: 6px 10px;
		display: block;
		color: #999;
		text-decoration: none;
	}

	div.content div.nav ul li a, div.content div.nav ul li span
	{
		padding: 3px 10px;
	}
	div.nav ul li span
	{
		color: #ccc;
	}
	div.nav ul li a:hover, div.nav ul li span:hover, div.nav ul li.active a
	{
		color: #fff;
	}

	div.nav ul li ul
	{
		display: none;
	}

	div.nav ul li:hover ul, div.nav ul li ul:hover
	{
		display: block;
		width: 200px;
		position: absolute;
		top: 30px;
		left: 0;
		background: #222;
		border: 1px solid #222;
	}
	div.content div.nav ul li:hover ul, div.content div.nav ul li ul:hover
	{
		top: 30px;
		left: -124px;
	}
	div.nav ul li:hover ul li ul, div.nav ul li ul:hover li ul
	{
		display: none;
	}

	div.nav ul li ul li:hover ul, div.nav ul li ul:hover li ul
	{
		display: block;
		top: 5px;
		left: 190px;
	}
	div.nav ul li ul li
	{
		float: none;
		padding: 4px 0;
		display: block;
		position: relative;
	}
	div.nav ul li ul li a, div.nav ul li.active ul li a
	{
		display: block;
		padding: 4px 10px;
		color: #bbb;
		position: relative;
	}
	div.nav ul li ul li a:hover
	{
		color: #fff;
	}

	div.columns p
	{
		line-height: 150%;
		padding: 4px 10px 25px 4px;
	}
	div.columns fieldset ul
	{
		list-style:none;
	}
	
	div.entry p
	{
		padding:0 0 20px 0;
	}
	
	div.signature
	{
		padding:10px;
		margin:20px 10px 10px 10px;
		background:#eee;
		color:#555;
		font-size:80%;
		max-height:100px;
		overflow:hidden;
	}
	div.signature p
	{
		padding:0;
		line-height:normal;
	}
	
	ul.posts li.original div.signature
	{
		background:#feb;
	}
	ul.posts li.alt div.signature
	{
		background:#fff;
	}

	ul.topics, ul.posts, ul.forums
	{
		margin: 5px;
	}

	ul.forums li
	{
		float: left;
		width: 47%;
		margin: 0 3px 0 0;
	}

	ul.topics li, ul.posts li
	{
		margin: 0 0 3px 0;
		background: #eee;
		line-height: 150%;
	}
	ul.posts li
	{
		margin: 0 0 10px 0;
	}
	ul.posts li div.entry
	{
		background:#fff;
		min-height:150px;
	}
	ul.posts li.alt
	{
		background:#fff;
	}
	ul.posts li.alt div.entry
	{
		background: #efefef;
	}
	ul.posts li.original
	{
		background: #ed9;
	}
	ul.topics li.hot, ul.posts li.original div.entry
	{
		background: #fea;
		color: #444;
	}
	ul.topics li.sticky
	{
		background: #fc9;
	}
	ul.topics li.locked
	{
		background: #f44;
	}
	ul.topics li a
	{
		text-decoration: none;
	}
	ul.topics li.hot a:hover
	{
	}
	ul.topics li.sticky a, ul.topics li.hot a
	{
		color: #444;
	}
	div.columns p, div.columns h5
	{
		padding: 5px 10px;
	}
	div.nav ul, div.columns ul, ul.topics, ul.posts, ul.roll, ul.list
	{
		list-style: none;
	}
	ul.list
	{
		margin: 0 0 10px 0;
	}
	ul.roll li
	{
		padding: 5px;
		line-height: 160%;
		font-size: 90%;
		margin: 0 0 5px 0;
		background: #555;
		color: #ccc;
		min-height: 100px;
	}
	ul.list li
	{
		padding: 2px 0 2px 7px;
	}
	ul.roll li img, ul.forums li img
	{
		border: 3px solid #999;
		margin: 3px;
		float: left;
	}
	div.post img.icon
	{
		float: right;
		margin: 10px;
		border: 5px solid #aaa;
	}
	div.columns li
	{
		padding: 2px 0;
	}
	div.columns ul li ul
	{
		margin:0 0 0 30px;
	}
	div.columns li a
	{
		padding: 2px 10px;
		border-bottom: 1px solid #555;
		display: block;
		text-decoration: none;
		color: #ccc;
	}
	div.columns li a:hover
	{
		color: #eee;
	}

	div.columns h5, div.columns fieldset legend
	{
		
		margin:0 10px;
		padding:10px 0 30px 0;
		display:inline;
		clear:both;
		line-height:1.6em;
		font-size:140%; font-weight:normal;
	}

	form
	{
		display: block;
	}
	div.nav form
	{
		float: right;
		display: inline;
	}
	fieldset
	{
		padding: 5px;
		margin: 10px;
		display: block;
		border: 5px solid #eee;
	}
	div.nav form fieldset
	{
		border: 0;
		padding: 0;
		display: inline;
	}
	div.columns fieldset
	{
		padding: 0;
		margin: 0;
		border: 0;
	}

	legend
	{
		font-size: 130%;
		padding: 5px;
	}
	div.columns fieldset legend
	{
		padding:0;
		margin:0;
		border:0;
	}
	
	input, select, textarea
	{
		font: normal 100% sans-serif,tahoma,verdana;
		color: #444;
	}
	input[type^='text'], input[type^='password'], textarea
	{
		padding: 2px;
	}
	div.nav input
	{
		font-size: 90%;
	}
	div.nav input[type^='submit']
	{
		color:#eee;
		font-size:110%;
	}
	select
	{
		padding: 3px;
		margin: 0 4px;
		border: 1px solid #777;
	}
	div.postform select
	{
		margin: 0;
	}
	div.postform label
	{
		font-size: 110%;
		display: block;
	}
	div.postform label span
	{
		font-size: 80%;
	}
	div.columns input[type^='text'], div.columns input[type^='password'], div.columns textarea
	{
		border: 0;
		display: block;
	}
	div.postform input[type^='text'], div.postform input[type^='password'], div.postform select, div.postform textarea
	{
		width: 200px;
		border: 1px solid #777;
	}
	div.postform textarea 
	{
		line-height:150%;
	}
	div.postform textarea, div.postform input.tags
	{
		width: 99%;
		overflow: auto;
	}
	div.columns textarea
	{
		width: 100%;
	}
	div.nav ul li input[type^='text']
	{
		width: 30px;
	}

	input[type^='button'], input[type^='submit'], input[type^='reset']
	{
		padding: 3px 5px;
		cursor: pointer;
		color: #444;
		font-weight: bold;
		border: 1px solid #444;
		background: #eef url('img/back_0.png') center left repeat-x;
	}
	
	div.columns input[type^='button'], div.columns input[type^='submit'], div.columns input[type^='reset'] 
	{
		width:100px;
	}
	div.postform input[type^='button']:hover, div.postform input[type^='submit']:hover, div.postform input[type^='reset']:hover input[type^='button']:hover, input[type^='submit']:hover, input[type^='reset']:hover
	{
		color: #395e7e;
		border-color: #395e7e;
		background-image: url('img/back_1.png');
		
	}
	div.nav input[type^='button'], div.nav input[type^='submit'], div.nav input[type^='reset']
	{
		padding: 0;
		background: #444;
		color: #bbb;
	}
	div.nav input[type^='button']:hover, div.nav input[type^='submit']:hover, div.nav input[type^='reset']:hover
	{
		color: #fff;
		border-color: #555;
	}
	div.sidebar input[type^='text'], div.sidebar input[type^='password'], div.sidebar textarea
	{
		width: 80%;
		display: inline;
		border: 1px solid #aaa;
	}
	div.nav label
	{
		color: #eee;
		cursor: pointer;
	}
	
	label.error
	{
		color: #fff;
		background: #f33;
		padding: 2px;
	}
	div.postform label.error
	{
		max-width: 350px;
	}
	div.columns label.error
	{
		font-weight: bold;
	}
	input[type^='text'].error, input[type^='password'].error, textarea.error
	{
		color: #f33;
		background: #fea;
	}

	div.sidebar input[type^='text'].error, div.sidebar input[type^='password'].error, div.sidebar textarea.error, div.postform input[type^='text'].error, div.postform input[type^='password'].error, div.postform textarea.error
	{
		color: #000;
		border: 1px solid #f33;
	}
	div.sidebar input[type^='text'].error, div.sidebar input[type^='password'].error, div.sidebar textarea.error
	{
		display: block;
	}

	/* Tags */
	p.tags
	{
		line-height: 230%;
	}
	a.tag
	{
		color: #666;
		padding: 5px 3px;
		text-decoration: none;
	}
	a.tag:hover
	{
		color: #55f;
		background: #eef;
	}
	a.x1
	{
		font-size: 11px;
	}
	a.x2
	{
		font-size: 12px;
	}
	a.x3
	{
		font-size: 13px;
	}
	a.x4
	{
		font-size: 14px;
	}
	a.x5
	{
		font-size: 15px;
	}
	a.x6
	{
		font-size: 16px;
	}
	a.x7
	{
		font-size: 17px;
	}
	a.x7
	{
		font-size: 18px;
	}
	a.x8
	{
		font-size: 18px;
	}
	a.x9
	{
		font-size: 19px;
	}
	a.x10
	{
		font-size: 20px;
	}
	a.x11
	{
		font-size: 21px;
	}
	a.x12
	{
		font-size: 22px;
	}
	a.x13
	{
		font-size: 23px;
	}
	a.x14
	{
		font-size: 24px;
	}
	a.x15
	{
		font-size: 25px;
	}

	table.itemgrid
	{
		width: 100%;
		margin: 10px;
	}
	table.itemgrid th
	{
		background: #eef;
		padding: 3px 5px;
	}

	table.itemgrid td
	{
		padding: 3px;
	}
}

/* Portable device */
@media handheld
{
	body
	{
		background: #fff;
		color: #444;
	}
	div.sidebar, div.extras
	{
		display: none;
	}
}

/* Printer specific */
@media print
{
	body
	{
		background: #fff;
		color: #444;
	}
	div.sidebar, div.extras
	{
		display: none;
	}
}

Since we have the capability to display alternating rows, we might as well use them. In the earlier installment, I had the PageList.ascx in the Views/Pages folder. But I decided to move that to the Shared view instead since the index page will also make use of it…

<%@ Control Language="C#" 
Inherits="System.Web.Mvc.ViewUserControl<PagedList<SimpleCMS.Models.ContentPage>>" %>
    <% 
    	// Zebra rows
		int row = 0; 
    	foreach (var item in Model)
		{ row++; %>

    <div class="post <%= (row % 2== 0)? "palt" : "" %>">
           <h4><%: Html.ActionLink(item.Title, "Read", "Pages", new { id = item.PageId }, 
                	new { title = Html.AltTitle(item.Title, item.Description) }) %></h4>

			<p class="data"><span><%: Html.FormalDate(item.PubDate) %> | 
			by <%: Html.AuthorLink(item.Author, item.AuthorId) %>.</span> </p>

			<%= Html.ImageInPost(75, 75, item.BodyText) %>
			<% 
				// If we have an abstract, then show that. If not show the body.
				if (!String.IsNullOrEmpty(item.AbstractHtml)) { %>
					<%= item.AbstractHtml %>
			<%  } else { %>
					<%= item.BodyHtml %>
			<% } %>	
			<hr />
			<p class="data"><span>
			<%: Html.PageLink("List", "Pages", "Index", item.PageId) %> | 
			<%: Html.PageLink("Edit", "Pages", "Edit", item.PageId) %> | 
			<%: Html.PageLink("Delete", "Pages", "Delete", item.PageId) %> | 
			<%: Html.EditedDate(item.PubDate, item.LastModified) %> | 
			Viewed <%: item.ViewCount %> times | 
			<%: Html.CommentsLink(item.PageId, item.CommentCount) %></span></p>		
    </div>
    <% } %>

And while we’re listing these pages, we also need to be able to read them. The following is the modified Read.aspx view in our Views/Pages folder…

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

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	<%: Model.Page.Title %> - SimpleCMS
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
	<h2><%: Model.Page.Title %></h2>
	<div class="postmeta">
		<% if(!string.IsNullOrEmpty(Model.Page.Description)) { %>
		<h4><%: Model.Page.Description  %></h4>
		<% } %>
		<p>By <%:Html.AuthorLink(Model.Page.Author, Model.Page.AuthorId) %> on <%:Html.FormalDate(Model.Page.PubDate) %></p>
	</div>
	<div class="post">
		<%= Model.Page.BodyHtml %>

		<p class="data"><%: Html.PageLink("Edit", "Pages", "Edit", Model.Page.PageId) %> | 
				<%: Html.PageLink("Delete", "Pages", "Delete", Model.Page.PageId) %></p>
	</div>

	<%= Html.Pager(Model.Comments as IPagedList, "/Pages/Read/" + 
		Model.Page.PageId +"/###") %>

	<%
		// Show the comments
		Html.RenderPartial("CommentList", Model.Comments);
		
		// If comments are enabled, render the comment form.
		var comment = new SimpleCMS.Models.ContentComment();
		comment.ContentPage = Model.Page;
		
		if ((bool)Model.Page.EnableComments)
		{
			Html.RenderPartial("CreateComment", comment);
		} %>
</asp:Content>

Note how we’re using that new ImageInPost function in the MvcHelpers class. This eliminates the hassle of including an image URL in a input seperate field and copy > pasting an image URL there. As long as your content has at least one identifiable image, this function will display it along with the article text in the page list.

And while we’re modifying appearances, let’s also modify the LogOnUserControl. In this mod portal theme, there’s no need to have a seperate login page, but I left that intact. However this login control needs to be modified as it’s going right in the navigation bar.

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<SimpleCMS.Models.LogOnModel>" %>
<% using (Html.BeginForm("LogOn", "Account", FormMethod.Post))
   { %>
<fieldset>
	<% if (Request.IsAuthenticated) {%>
	<label> Welcome <strong><%: Page.User.Identity.Name%></strong>! 
	[<%: Html.ActionLink("Log Off", "LogOff", "Account")%>]</label>

	<% } else {
		
	// We need to create the login form %>
	<%: Html.TextBoxFor((model => model.UserName), new { value = "username", title="Username" })%>
	<%: Html.PasswordFor((model => model.Password), new { value = "password", title = "Password" })%>

	<label><%: Html.CheckBoxFor(m => m.RememberMe)%> Rememer me</label>
	<input type="submit" value="[Login]" />

	<%   } // End If %>
</fieldset>
<% } // End form %>

Let’s also revamp our CreatePage.ascx control to take advantage of nested content posting

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<SimpleCMS.Models.ContentPage>" %>
<div class="postform">
	<%
		// If this model has a title, then we're editing an existing page
		var mode = (string.IsNullOrEmpty(ViewData.Model.Title)) ? "Create" : "Edit";

		using (Html.BeginForm(mode, "Pages", new { 
			id = Html.CurrentParent(ViewData.Model.PageId, ViewData.Model.ParentId) },
			FormMethod.Post))
		{%>

	<%: Html.ValidationSummary(true) %>

	<fieldset>
		<% if(mode == "Create")  { %>
			<legend>Create new Page</legend>
		<% } else { %>
			<legend>Editing Page</legend>
		<% } %>
		
		<p>
			<label for="Title">Title <span>(required)</span></label>
			<%: Html.TextBoxFor(model => model.Title)%>
			<%: Html.ValidationMessageFor(model => model.Title, "*")%>
		</p>
		<p>
			<label for="Description">Description</label>
			<%: Html.TextBoxFor(model => model.Description)%>
		</p>
		<p>
			<label for="Author">Author <span>(required)</span></label>
			<%: Html.TextBoxFor(model => model.Author)%>
			<%: Html.ValidationMessageFor(model => model.Title, "*")%>
		</p>
		<p>
			<label for="BodyText">Content</label>
			<%: Html.TextAreaFor(model => model.BodyText, 10, 60, null)%>
			<%: Html.ValidationMessageFor(model => model.BodyText)%>
		</p>
		<p>
			<label for="Abstract">Abstract</label>
			<%: Html.TextAreaFor(model => model.AbstractText, 4, 60, null)%>
		</p>
		<p>
			<label for="PubDate">Publish Date <span>(leave blank to publish immediately)</span></label>
			<%: Html.TextBoxFor(model => model.PubDate)%>
		</p>
		<ul class="feedback options">
			<li><label><input type="checkbox" value="true" name="EnableComments" 
			<%= Html.CheckBoxChecked(ViewData.Model.EnableComments, true) %>/> Enable Comments</label></li>
			<li><label><input type="checkbox" value="true" name="AnonComments" 
			<%= Html.CheckBoxChecked(ViewData.Model.AnonComments, true) %>/> Anonymous Comments</label></li>
			<li><label><input type="checkbox" value="true" name="ModeratedComments" 
			<%= Html.CheckBoxChecked(ViewData.Model.Moderated, false) %>/> Moderated</label></li>
			<li><label><input type="checkbox" value="true" name="Approved" 
			<%= Html.CheckBoxChecked(ViewData.Model.Approved, true) %>/> Approved</label></li>
		</ul>

		<p>
		<% if(mode == "Create")  { %>
			<input type="submit" value="Create new page" />
		<% } else { %>
			<input type="submit" value="Save changes" />
		<% } %>
		</p>
	</fieldset>
</div>
<% } %>

And now that we have the ability to get comment summaries thanks to the CommentSummary class, let’s create a UserControl that has the ability to display them. Remember that we’re already getting a list of summaries in the Homepage index.

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<SimpleCMS.Models.CommentSummary>>" %>

<h3>Feedback...</h3>
<ul class="list">
	<% 
		// Zebra rows
		int row = 0;
		foreach (var item in Model)
		{ row++;%>

	<li class="<%= (row % 2 == 0)? "alt" : "" %>">
		<h5><%: Html.PageLink(item.Author + " Wrote "+ Html.FriendlyDate(item.CreatedDate), 
			"Pages", "Read", item.PageId) %></h5>
			<%= item.BodyText %>
	</li>

	<% } %>
</ul>

Onward to page 4…

Advertisement

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