Introduction
This is to demonstrate how to create a simple Content Management System using three major components: Master Page, Default ASPX page, and a Web User Control.
Using the code
There are three major components that we need to tackle:
- Master Page - which will hold our design
- Default.aspx - which will call the Web User Controls
- User Control (ASCX) - the module for the content
We start with the Master Page which is very, very simple. We don't even have to put any code-behind at this point.
<%@ Master Language="C#" AutoEventWireup="true"
CodeFile="MasterPage.master.cs" Inherits="CMMforStarters.MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head id="Head1" runat="server">
<title>Master Page</title>
<link href="Main.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<form id="Form1" runat="server">
<asp:table id ="MainTbl" width = "100%" cellpadding = "0"
cellspacing ="0" runat="server">
<asp:tablerow>
<asp:tablecell ColumnSpan = "3">
<table id="HeaderContainerTbl" border="0" width = "100%"
cellpadding = "0" cellspacing ="0">
<tr>
<td>
<table id="HeaderContainerInnerTbl" width="100%"
height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width = "100%">
<img src="images/spacer.gif" width="1" height="1" alt="">
</td>
</tr>
<tr>
<td width = "100%">
<img src="images/spacer.gif" width="1" height="1" alt="">
</td>
</tr>
<tr>
<td bgcolor="99ccff" width = "100%">
<img src="images/spacer.gif" width="1" height="1" alt="">
</td>
</tr>
</table>
</td>
</tr>
</table>
</asp:tablecell>
</asp:tablerow>
<asp:tablerow>
<asp:tablecell VerticalAlign = "top" ColumnSpan = 3>
<table id="TopContainerTbl" border="0" width = "100%"
cellpadding = "0" cellspacing ="0">
<tr>
<td class="Normal">
<asp:contentplaceholder id="TopContainer" runat="Server">
</asp:contentplaceholder>
</td>
</tr>
</table>
</asp:tablecell>
</asp:tablerow>
<asp:tablerow>
<asp:tablecell VerticalAlign = "top">
<table id="LeftContainerTbl" border="0" width = "100%"
cellpadding = "0" cellspacing ="0">
<tr>
<td class="Normal">
<asp:contentplaceholder id="LeftContainer" runat="Server">
</asp:contentplaceholder>
</td>
</tr>
</table>
</asp:tablecell>
<asp:tablecell VerticalAlign = "top">
<table id="CenterContainerTbl" border="0" width = "100%"
cellpadding = "0" cellspacing ="0">
<tr>
<td class="Normal">
<asp:contentplaceholder id="CenterContainer" runat="Server">
</asp:contentplaceholder>
</td>
</tr>
</table>
</asp:tablecell>
<asp:tablecell VerticalAlign = "top">
<table id="RightContainerTbl" border="0" width = "100%"
cellpadding = "0" cellspacing ="0">
<tr>
<td>
<asp:contentplaceholder id="RightContainer" runat="Server">
</asp:contentplaceholder>
</td>
</tr>
</table>
</asp:tablecell>
</asp:tablerow>
<asp:tablerow>
<asp:tablecell VerticalAlign = "top" ColumnSpan = 3>
<table id="BottomContainerTbl" border="0" width = "100%"
cellpadding = "0" cellspacing ="0">
<tr>
<td class="Normal">
<asp:contentplaceholder id="BottomContainer" runat="Server">
</asp:contentplaceholder>
</td>
</tr>
</table>
</asp:tablecell>
</asp:tablerow>
<asp:TableRow>
<asp:TableCell ColumnSpan = "3" >
<table id="FooterTbl" border="0" width = "100%"
cellpadding = "0" cellspacing ="0">
<tr>
<td>
<table id="FooterTblInner" width="100%" height="29"
border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="99ccff" width = "100%">
<img src="images/spacer.gif" width="1" height="1" alt="">
</td>
</tr>
<tr>
<td bgcolor="99ccff" width = "100%">
<img src="images/spacer.gif" width="1" height="1" alt="">
</td>
</tr>
</table>
</td>
</tr>
</table>
</asp:TableCell>
</asp:TableRow>
</asp:table>
</form>
</body>
</html>
The master page is like a normal HTML page with some of the design stuff that we need; just take note of <asp:contentplaceholder> since this is the part where we will render the controls for the CMS.
Next is default.aspx, which will render the control. Let's go to the ASPX part, which is a very plain simple code.
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="CMMforStarters.ControlLoader" Title="Untitled Page" %>
<asp:content id="ContentTop" contentplaceholderid="TopContainer" runat="server">
<asp:PlaceHolder ID="PlaceHolderTop" runat="server"></asp:PlaceHolder>
</asp:content>
<asp:content id="ContentLeft" contentplaceholderid="LeftContainer" runat="server">
<asp:PlaceHolder ID="PlaceHolderLeft" runat="server"></asp:PlaceHolder>
</asp:content>
<asp:content id="ContentCenter" contentplaceholderid="CenterContainer" runat="server">
<asp:PlaceHolder ID="PlaceHolderCenter" runat="server"></asp:PlaceHolder>
</asp:content>
<asp:content id="ContentRight" contentplaceholderid="RightContainer" runat="server">
<asp:PlaceHolder ID="PlaceHolderRight" runat="server"></asp:PlaceHolder>
</asp:content>
<asp:content id="ContentBottom" contentplaceholderid="BottomContainer" runat="server">
<asp:PlaceHolder ID="PlaceHolderBottom" runat="server"></asp:PlaceHolder>
</asp:content>
Just notice that it has the MasterPageFile="~/MasterPage.master" and that's how we reference the Master page to be utilized by default.aspx; other than that are <asp:PlaceHolder>s which we will be placing our controls in later on.
Next is default.aspx.cs:
SqlConnection conn = null;
SqlDataReader rdr = null;
string sWhereCondition = "PortalID = 1 and PageID = " + iPageID.ToString();
string sOrderByExpression = "SortOrder";
try
{
conn = new SqlConnection(ConnStr);
conn.Open();
SqlCommand cmd = new SqlCommand("SelectPageContentsDynamic", conn);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.Add(new SqlParameter("@WhereCondition", sWhereCondition));
cmd.Parameters.Add(new SqlParameter("@OrderByExpression", sOrderByExpression));
rdr = cmd.ExecuteReader();
while (rdr.Read())
{
string ControlPath =
GetControlLocation(int.Parse(rdr["ControlID"].ToString()));
UserControl ucControl = (UserControl)Page.LoadControl(ControlPath);
Type ucType = ucControl.GetType();
PropertyInfo ucProperty_PropertyID = ucType.GetProperty("PropertyID");
ucProperty_PropertyID.SetValue(ucControl,
int.Parse(rdr["ContentID"].ToString()), null);
switch (rdr["ControlLocation"].ToString())
{
case "Top":
PlaceHolderTop.Controls.Add(ucControl);
break;
case "Left":
PlaceHolderLeft.Controls.Add(ucControl);
break;
case "Center":
PlaceHolderCenter.Controls.Add(ucControl);
break;
case "Right":
PlaceHolderRight.Controls.Add(ucControl);
break;
case "Bottom":
PlaceHolderBottom.Controls.Add(ucControl);
break;
}
}
conn.Close();
conn.Dispose();
As you can see, we are rendering the controls dynamically and assigning property values along the way; you can do this by referencing to System.Reflection;. Last is a sample web User Control which, in this instance, renders HTML to a Literal control:
public partial class Controls_HTML : System.Web.UI.UserControl
{
private int _PrimaryID = 0;
public int PropertyID
{
get { return _PrimaryID; }
set { _PrimaryID = value; }
}
string ConnStr =
System.Configuration.ConfigurationManager.AppSettings.Get("GlobalConn").ToString();
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection conn = null;
SqlDataReader rdr = null;
conn = new SqlConnection(ConnStr);
conn.Open();
SqlCommand cmd = new SqlCommand("SelectHTML", conn);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.Add(new SqlParameter("@ID", _PrimaryID));
rdr = cmd.ExecuteReader();
while (rdr.Read())
{
HTMLLiteral.Text = rdr["HTMLContent"].ToString();
}
conn.Close();
conn.Dispose();
}
}
