Creating dynamic pages using custom control

G_arora
Posted by in ASP.NET category on for Intermediate level | Views : 4702 red flag

In a simple creating an aspx page dynamically is a very tedious job. Whenever we think for dynamically creation scenarios stuck in mind about the overload to server etc. But with the help of this article one can attain the same as easily as creating another simple aspx page.


 Download source code for Creating dynamic pages using custom control

Introduction
In a simple creating an aspx page dynamically is a very tedious job. Whenever we think for dynamically creation scenarios stuck in mind about the overload to server etc. But with the help of this article one can attain the same as easily as creating another simple aspx page.
Need and Requirement
Now next words came to mind that what is the need to create an aspx page dynamically? Let me explain it:
  1. You need to create a page, based on selected requirement at the moment.
  2. Need to create a page from static html contents.
  3. Having huge data, need to represent in an individual page and its tough to store in database.

Article Scenario
As stated above, I choose a scenario where you are running a technical community and need to the template where member of your site will able to write some static html contents.
 
Explanation
For the same we need following pages:

1.PageHeader.ascx

This contains the header information of your page like LOGO etc.
 

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PageHeader.ascx.cs" Inherits="myTemplates_PageHeader" %>

<link href="../style.css" temp_href="../style.css" rel="stylesheet" type="text/css" />

<div>

<asp:PlaceHolder ID ="plhImage" runat="server" />

<ul class="menu">

<li><a href="./default.aspx" temp_href="./default.aspx">HOME</a></li>

<li><a href="./default.aspx" temp_href="./default.aspx">About US</a></li>

<li><a href="./default.aspx" temp_href="./default.aspx">Recent Posts</a></li>

<li><a href="./default.aspx" temp_href="./default.aspx">Site Map</a></li>

<li><a href="./default.aspx" temp_href="./default.aspx">Contact US</a></li>

<li><a href="./default.aspx" temp_href="./default.aspx">Tags</a></li>

<li><a href="./default.aspx" temp_href="./default.aspx">Meta</a></li>

<li><a href="./default.aspx" temp_href="./default.aspx">Most Emailed</a></li>

</ul>

</div>

 
2.PageFooter.ascx
Obvious it contains the Footer information.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PageFooter.ascx.cs" Inherits="myTemplates_PageFooter" %>

<link href="../style.css" temp_href="../style.css" rel="stylesheet" type="text/css" />

<div id="footer">

<div>

<a href="http://www.webdesign.org" temp_href="http://www.webdesign.org">Web Design</a> by <a href="http://www.freetemplatesonline.com" temp_href="http://www.freetemplatesonline.com">Free Templates</a> Online<br />

<a href="#" temp_href="#">Terms of Use</a> / <a href="#" temp_href="#">Privacy Policy</a>

</div>

<div class="centeral-block">

<strong>New-York, USA</strong>

11 Some Street Second Floor<br /> New York WA 02020

</div>

<div>

Tel/Fax : 1(800)123-4567<br />

1(800)123-1234<br />

E-mail : <a href="#" temp_href="#" id="mail">info@yourcompany.com</a>

</div>

</div>

3.createPage.ascx
Definitely this is the main page, it just create a skeleton as per the above requirement and then segregate the contents and make the title.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="createPage.ascx.cs" Inherits="myTemplates_createPage" %>

<div>

<table>

<tr>

<td style="width: 100px">

Page Title

</td>

<td style="width: 100px">

<asp:TextBox ID="txtTitle" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<td style="width: 100px">

Tags

</td>

<td style="width: 100px">

<asp:TextBox ID="txtTags" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<td style="width: 100px">

Description

</td>

<td style="width: 100px">

<asp:TextBox ID="txtContent" runat="server" Height="292px" TextMode="MultiLine" Width="510px"></asp:TextBox>

</td>

</tr>

<tr>

<td style="width: 100px">

</td>

<td style="width: 100%">

<ul>

<li><font color="red">You may use basic html tags like <H1> <H2> <B>

<I> <FONT> etc. </font></li>

<li><font color="red">Tags like <BODY> <HEAD> <TABLE> are NOT allowed.</font></li>

<li><font color="red">Please check spelling before posting articles.</font></li>

</ul>

</td>

</tr>

<tr>

<td style="width: 100px">

</td>

<td style="width: 100px">

<asp:Label ID="lblMessage" runat="server"></asp:Label>

</td>

</tr>

<tr>

<td style="width: 100px">

</td>

<td style="width: 100%">

<asp:LinkButton ID="lnkNewPage" OnClick="lnkNewPage_Click" runat="server"></asp:LinkButton>

</td>

</tr>

<tr>

<td style="width: 100px">

</td>

<td style="width: 100px">

<asp:Button ID="btnGenerate" runat="server" OnClick="btnGenerate_Click" Text="Generate" />

</td>

</tr>

</table>

</div>

4.Default.aspx
This is the page or container which contains above all 3-controls.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" ValidateRequest="false" %>

<%@ Register TagPrefix="myPage" TagName="aspxPage" src="~/myTemplates/createPage.ascx" temp_src="~/myTemplates/createPage.ascx" %>

<%@ Register TagPrefix="myPageHeader" TagName="PgHeader" src="~/myTemplates/PageHeader.ascx" temp_src="~/myTemplates/PageHeader.ascx" %>

<%@ Register TagPrefix="myPageFooter" TagName="PgFooter" src="~/myTemplates/PageFooter.ascx" temp_src="~/myTemplates/PageFooter.ascx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title></title>

<link href="style.css" temp_href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<form id="form1" runat="server">

<div>

<table width="100%">

<tr>

<td colspan="2">

<myPageHeader:PgHeader ID="PgHeader1" runat="server" />

</td>

</tr>

<tr>

<td>

<h2>

Create Dynamic Page(S)</h2>

</td>

</tr>

<tr>

<td colspan="2">

<myPage:aspxPage ID="asxPage1" runat="server" />

</td>

</tr>

<tr>

<td colspan="2">

<myPageFooter:PgFooter ID="PgFooter1" runat="server" />

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

5. myPageTemplate.tmp
This is the template page for all pages

<%@ Page Language="C#" CodeFileBaseClass="PageBase" AutoEventWireup="true" CodeFile ="myPageCode.cs"

Inherits= "myPageCode" PageID="[ID]" MetaTitle="[MetaTitle]" MetaKeywords="[MetaKeywords]" %>

<%@ Register TagPrefix="myPageHeader" TagName="PgHeader" src="~/myTemplates/PageHeader.ascx" temp_src="~/myTemplates/PageHeader.ascx" %>

<%@ Register TagPrefix="myPageFooter" TagName="PgFooter" src="~/myTemplates/PageFooter.ascx" temp_src="~/myTemplates/PageFooter.ascx" %>

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title></title>

<link href="style.css" temp_href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<form id="form1" runat="server">

<div>

<table width="100%">

<tr>

<td colspan="2">

<myPageHeader:PgHeader ID="PgHeader1" runat="server" />

</td>

</tr>

<tr>

<td>

<h2>

<%=MetaTitle%></h2>

</td>

</tr>

<tr class=content>

<td colspan="2">

[PageContent]

</td>

</tr>

<tr>

<td colspan="2">

<myPageFooter:PgFooter ID="PgFooter1" runat="server" />

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

6.myPageCode.cs
A common code-behind page for all dynamic pages

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

public partial class myPageCode : PageBase

{

public String newPageID

{

get

{

if (ViewState["newPageID"] != null)

return Convert.ToString(ViewState["newPageID"]);

else

return "0";

}

set

{

ViewState["newPageID"] = value;

}

}

protected void Page_Load(object sender, EventArgs e)

{

base.PageID = this.newPageID;

}

}

7.PageBase.cs
A pagebase which inherits System.Web.UI.Page.

using System;

using System.Collections.Generic;

using System.Web;

using System.Data;

using System.Configuration;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

///

/// Summary description for PageBase

///

public class PageBase : System.Web.UI.Page

{

public PageBase()

{

//

// TODO: Add constructor logic here

//

}

#region Properties

public String PageID

{

get

{

if (ViewState["PageID"] != null)

return Convert.ToString(ViewState["PageID"]);

else

return "0";

}

set

{

ViewState["PageID"] = value;

}

}

public String MetaTitle

{

get

{

if (ViewState["MetaTitle"] != null)

return Convert.ToString(ViewState["MetaTitle"]);

else

return "No Title";

}

set

{

ViewState["MetaTitle"] = value;

}

}

public String MetaKeywords

{

get

{

if (ViewState["MetaKeywords"] != null)

return Convert.ToString(ViewState["MetaKeywords"]);

else

return "No Keywords";

}

set

{

ViewState["MetaKeywords"] = value;

}

}

#endregion

protected override void OnLoad(EventArgs e)

{

if (!String.IsNullOrEmpty(MetaTitle))

{

HtmlMeta Title = new HtmlMeta();

Title.Name = "Title";

Title.Content = this.MetaTitle;

this.Header.Controls.Add(Title);

}

if (!String.IsNullOrEmpty(MetaKeywords))

{

HtmlMeta Keyword = new HtmlMeta();

Keyword.Name = "Keywords";

Keyword.Content = this.MetaKeywords;

this.Header.Controls.Add(Keyword);

}

//overide base

base.OnLoad(e);

}

void Page_Error(object sender, EventArgs e)

{

//Write Some logic here

}

}

Important
  1. Please note that I don’t check for any validation
  2. Instead of the use of Custom Control you can use Master Pages too.
  3. The same will create a good facility while you need to create dynamic pages.
How to run attached code:

  1. Download the zip file
  2. Open your Visual Studio2008
  3. Open WebProject select the specific folder
  4. Press F5 and enjoy

Conclusion:

There are simple steps to follow this tutorial, you can try the same with any available versions of .Net:
  1. Please note that I don’t check for any validation
  2. Instead of the use of Custom Control you can use Master Pages too.
  3. The same will create a good facility while you need to create dynamic pages

Try following steps to use the tutorial:
  1. Download the zip file
  2. Open your Visual Studio2008
  3. Open WebProject select the specific folder
  4. Press F5 and enjoy
Your suggestions are invited to improve this

Page copy protected against web site content infringement by Copyscape

About the Author

G_arora
Full Name: Gaurav Kumar Arora
Member Level: Starter
Member Status: Member,Microsoft_MVP
Member Since: 9/7/2009 2:53:47 AM
Country: India
Gaurav Kumar Arora
http://www.gaurav-arora.com
MCA, M.Phill(Comp.Sc.),MCP, MCTS, Certified Scrum Master. Life time member of CSI (Computer Society of India)

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)