Home | Software | WebLog | Contact | Wish List

Asp.NET HTML Template Engine

Overview

I searched long and hard all over the net for an HTML templating engine with little luck. Most of the HTML templating engines I found required too much coding, limited the functionality of ASP.NET by requiring you set properties to update the template (ie: header = "this is my header"), or required you stuff code into your Page_Load event. I wanted something anyone could implement and understand. So I gave up searching and decided to create my own.

I have a lot more confidence in this build.  I have been using the ASP.NET HTML Templating Engine on Joel.Net for some time now. The current version is 1.1.0. There are still some features I'd like to include before I wish to release the source code.

This control will work in both VB.NET and C# environments.

If you have suggestions or comments, please feel free to contact me and let me know about them!

This software is released under the JPL.

If you found this or any other code on this site usefull and want to show your appreciation, now you can. Thanks!

Change log

What's New in 1.1.0 (7.9.2004)
  • Moved to .Net Framework 1.1 instead of 1.0.
  • Added ability to use UserControls (.ascx's) in the template.

    What's New in 1.0.3 (5.7.2003)
  • Added functionality to pull Dynamic templates (ascx) 
  • Added functionality to pull remote templates (http://...) 
  • Added functionality to change the template title
  • Added functionality to add to the body tag
  • Added functionality to insert into the header
  • Minor Bug Fixes

    How To Use in Visual Studio.Net

    Step 1: Installation
    Add the control to your toolbox.  Start going to Tools > Customize Toolbox.  Click the tab .Net Framework Components.  Click on Browse, locate Joel.Net.Template.dll and click ok.  You should now see "Template" in the toolbox.

    Step 2: Create Your Template
    Your template will resemble a typical html file with a few template tags thrown in. In your template you can create optional areas which either may or may not be overwritten.

    For example: The footer section below is not over-written by any template panels so the HTML inside the template is rendered.

    Step 3: Consume the Template
    Simply drag the template control to the top of any page, right click and select properties to modify the controls properties.  The following properties will be listed under the "Data" section: Application Template, Session Template, Path, Prefix.

    How To Use (Non Visual Studio.net)

    Step 1: Installation
    Copy the template.dll into your /bin directory and you're ready to start using it.

    Step 2: Create Your Template
    Same as Step 2 above.
     
    Step 3: Consume the Template
    Any areas you want to overwrite in the template must have a panel with a matching name. ie: panel tem_main would replace tem:main.

    Example Code

    <!-- template.html --> <HTML> <HEAD><TITLE>No Title</TITLE></HEAD> <BODY bgcolor="#FFFFFF"> <TABLE border="0"> <TR> <TD><tem:navigation>navigation</tem:navigation></TD> <TD><tem:main /></TD> </TR> <TR><TD colspan="2"> <tem:footer>Copyright joel.net 2003.</tem:footer> </TD></TR> </TABLE> <BR><BR> </BODY> </HTML>


    <!-- page.aspx --> <%@ Register TagPrefix="cc1" NameSpace="template" Assembly="template" %> <cc1:template id="Template1" runat="server" path="./template.html" /> <asp:Panel id="tem_main" runat="server"> <B>This should go in the main section!</B> </asp:Panel>

    Properties

    These properties will be seen in the properties window in Visual Studio.NET. If you do not have VS.NET you can just type them in, like the example above.

    ID (optional): Required by ASP.NET to identify the component.
    Path (optional): Path to your HTML Template file. ie: template.html, template.ascx, http://.../template.html.  Setting the path on the control will over-ride both the Application and Session settings.
    Application_Template (optional): Name of Application object that keeps path to HTML Template file. Set the name once in your global.asax file and change it in an instant on every page.
    Session_Template (optional): Name of Session object that keeps path to HTML Template file.  Session will over-ride the Application setting.  This is useful when you are customizing each template for users.
    prefix (optional): Prefix template will use. Default is 'tem'.
    title (optional): changes the title of the template
    body (optional): inserts additional data into the <body ...> tag.
    head (optional): inserts additional data into the head of the document.

    Summary

    Thats it! The .Net HTML Templating Engine was designed to be as simplistic as possible for non-code oriented people (graphic artists, html people, other non-coders).

    Send me an E-Mail... let me know if you use this or want to request any additions / changes you'd like me to make. If you have problems using this code, I may or may not help you depending upon what mood I'm in.


    Links