This project is read-only.

Template Based Render

Bugs in sources and releases <03 Dec. 2009

Index:

Template in MainPage

With the Quick Example project we are going to use nxAjax templates.

Open default.aspx and delete all html tags:
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<form id="form1" runat="server"></form>
<ajax:Container ID="container" runat="server"></ajax:Container>
Asp.Net needs a form with the attribute runat="server" in order to works...

Create a new "main.template" empty text file:
<!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">
<head runat="server">
    <title>My nxAjax Test</title>
</head>
<body>
    <div>
        <ajax:Container ID="container" runat="server"></ajax:Container>
    </div>
</body>
</html>

Replace the ajax control aspx code with a tag like "<$ControlID$>". And you must add 2 special tags in the MainPage: <$PreScript$> and <$PostScript$>. The first in the header section, and the second at the end of the document body:
<!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">
<head runat="server">
    <title>My nxAjax Test</title>
    <$PreScript$>
</head>
<body>
    <div>
        <$container$>
    </div>
    <$PostScript$>
</body>
</html>

Edit default.aspx.cs:
public partial class _Default : Framework.Ajax.UI.MainPage 
{
    protected void Page_Load(object sender, EventArgs e)
    {
         this.TemplateFile = "main.template";
         if (!IsPostBack)
            container.ContainedPage = "Contained1.aspx";
    }
}

Inside a MainPage template you can use 2 optional special tags if you need it: <$InitForm$> and <$EndForm$>, in order to submit one main form.
<!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">
<head runat="server">
    <title>My nxAjax Test</title>
    <$PreScript$>
</head>
<body>
    <$InitForm$>
    <div>
        <$container$>
    </div>
    <$EndForm$>
    <$PostScript$>
</body>
</html>
Go to Index

Template in ContainedPage

Open "Contained1.aspx" and delete all html tags (except server form):
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Contained1.aspx.cs" Inherits="Contained1" %>
<form id="form1" runat="server"></form>
<ajax:FileUpload ID="btnFile" runat="server" 
            UploadingMessage="Uploading..." 
            ExtensionNotAllowedMessage="Only image files!" 
            Text="Upload image" 
            LoadingImg="ajax-loader.gif" 
            OnServerComplete="btnFile_ServerComplete"></ajax:FileUpload>
<ajax:CheckBox ID="chkTest" Checked="true" runat="server"></ajax:CheckBox>
<ajax:Submit ID="btnSubmit" Value="Send" runat="server" 
            OnServerClick="btnSubmit_ServerClick"></ajax:Submit>

Create a new "container1.template" empty text file, with <$ControlID$> tags where you want show each control:
<div>
    <$btnFile$>
    <$chkTest$>
    <$btnSubmit$>
</div>
You can optionaly add <$PostBack$> tag if you want to put the postback controls in a specified postion into the document.

Add into Contained1.aspx.cs this line:
...
public partial class Contained1 : Framework.Ajax.UI.ContainedPage
{
    protected void Page_Load(object sender, EventArgs e)
    {
        this.TemplateFile = "container1.template";
        if (!IsPostBack)
        {
...

Inside ContainedPage template you do not need declare a HTML form. It is beacuse of a ContainedPage is a form, and the render will ever write the begin and end form tags.
Go to Index

Template with XML source

In oder hand you can create Xml aspx structures. It is not compatible with the previous way.

Open "container1.template" file and modify it to something like:
<div>
    <$File$>
    <$Submit$>
</div>

To fill this template we need modify "Contained1.aspx":
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Contained1.aspx.cs" Inherits="Contained1" %>
<form id="form1" runat="server"></form>
<file>
     <ajax:FileUpload ID="btnFile" runat="server" 
            UploadingMessage="Uploading..." 
            ExtensionNotAllowedMessage="Only image files!" 
            Text="Upload image" 
            LoadingImg="ajax-loader.gif" 
            OnServerComplete="btnFile_ServerComplete"></ajax:FileUpload>
</file>
<submit>
     <ajax:CheckBox ID="chkTest" Checked="true" runat="server"></ajax:CheckBox>
     <ajax:Submit ID="btnSubmit" Value="Send" runat="server" OnServerClick="btnSubmit_ServerClick"></ajax:Submit>
</submit>

Note you can nest 2 or more AjaxControls inside a Xml element.

If you run the project the result is like the previous example.

When the tmplate system processes an aspx document, It checks document begin with "<?xml ..." and the root tag name is "page". If these tags are not found, the system adds. So you can also write something like this:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Contained1.aspx.cs" Inherits="Contained1" %>
<?xml version="1.0" encoding="utf-8"?>
<page>
     <form id="form1" runat="server"></form>
     <file>
          <ajax:FileUpload ID="btnFile" runat="server" 
                 UploadingMessage="Uploading..." 
                 ExtensionNotAllowedMessage="Only image files!" 
                 Text="Upload image" 
                 LoadingImg="ajax-loader.gif" 
                 OnServerComplete="btnFile_ServerComplete"></ajax:FileUpload>
     </file>
     <submit>
          <ajax:CheckBox ID="chkTest" Checked="true" runat="server"></ajax:CheckBox>
          <ajax:Submit ID="btnSubmit" Value="Send" runat="server" OnServerClick="btnSubmit_ServerClick"></ajax:Submit>
     </submit>
</page>
And it works too.
Go to Index

Template Areas

Going into the modeling templates, we found a series of special commands to create template parts. These template parts are named "areas". Defining an area you must use 2 special tags: <!$Begin AreaName> and <!$End AreaName>.

<!$Begin divArea>
  <div>
    <$object$>
  </div>
<!$End divArea>
<$divs$>
Or also:
<!$Begin divArea>
  <div>
    <$file$>
    <$submit$>
  </div>
<!$End divArea>
<$divs$>

Inside the aspx xml code, you must define an area tag with the attributes:
  • Id: Area Name
  • Place: Template tag where the area will be rendered
  • Method: "Add" || "Allocate". Optional. By default "Add".
    • Add for more than one area in the same position.
    • Allocate for only one area in this position

To fill this new template we need modify "Contained1.aspx":
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Contained1.aspx.cs" Inherits="Contained1" %>
<form id="form1" runat="server"></form>
<area id="divArea" place="divs" method="allocate">
     <object>
          <ajax:FileUpload ID="btnFile" runat="server" 
                 UploadingMessage="Uploading..." 
                 ExtensionNotAllowedMessage="Only image files!" 
                 Text="Upload image" 
                 LoadingImg="ajax-loader.gif" 
                 OnServerComplete="btnFile_ServerComplete"></ajax:FileUpload>
          <ajax:CheckBox ID="chkTest" Checked="true" runat="server"></ajax:CheckBox>
          <ajax:Submit ID="btnSubmit" Value="Send" runat="server" OnServerClick="btnSubmit_ServerClick"></ajax:Submit>
     </object>
</area>
Or also:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Contained1.aspx.cs" Inherits="Contained1" %>
<form id="form1" runat="server"></form>
<area id="divArea" place="divs">
     <file>
          <ajax:FileUpload ID="btnFile" runat="server" 
                 UploadingMessage="Uploading..." 
                 ExtensionNotAllowedMessage="Only image files!" 
                 Text="Upload image" 
                 LoadingImg="ajax-loader.gif" 
                 OnServerComplete="btnFile_ServerComplete"></ajax:FileUpload>
     </file>
     <submit>
          <ajax:CheckBox ID="chkTest" Checked="true" runat="server"></ajax:CheckBox>
          <ajax:Submit ID="btnSubmit" Value="Send" runat="server" OnServerClick="btnSubmit_ServerClick"></ajax:Submit>
     </submit>
</area>

And if we want create 2 div blocks instead one (with the first example):
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Contained1.aspx.cs" Inherits="Contained1" %>
<form id="form1" runat="server"></form>
<area id="divArea" place="divs">
     <object>
          <ajax:FileUpload ID="btnFile" runat="server" 
                 UploadingMessage="Uploading..." 
                 ExtensionNotAllowedMessage="Only image files!" 
                 Text="Upload image" 
                 LoadingImg="ajax-loader.gif" 
                 OnServerComplete="btnFile_ServerComplete"></ajax:FileUpload>
     </object>
</area>
<area id="divArea" place="divs">
     <object>
          <ajax:CheckBox ID="chkTest" Checked="true" runat="server"></ajax:CheckBox>
          <ajax:Submit ID="btnSubmit" Value="Send" runat="server" OnServerClick="btnSubmit_ServerClick"></ajax:Submit>
     </object>
</area>
Go to Index

Template Includes

Another special command is "<!$Include TemplatePartFileName>". It will be replaced by the template file referenced. The template file name is the relative path from the current document to the document we want include.

Create a new empty text file named "divpart.template":
<!$Begin divArea>
  <div>
    <$object$>
  </div>
<!$End divArea>

And modify "container1.template" file:
<!$Include divpart.template>
<$divs$>
And it works like the others.
Go to Index

Template with language

The template based render system can auto replace strings using the language file. You have to write another special tag with the language key: <&LanguageKey&>

If you have create a language file you can try to add the page title to "english.language":
...
[DICTIONARY]
...
Title=My nxAjax Test


And replace in the "main.template" file, the page title by the language tag:
<!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">
<head runat="server">
-> <title><&Title&></title>
    <$PreScript$>
</head>
<body>
    <div>
        <$container$>
    </div>
    <$PostScript$>
</body>
</html>
Go to Index

Template in GridView

The nxAjax GridView control contains the attribute ContentTemplateFileName. It allows set a template file name and the grid will render based in this template file.
<ajax:GridView ID="gridImages" runat="server" ContentTemplateFileName="grid.template">
  <ajax:GridImageColumn DataColumn="img" />
  <ajax:GridLabelColumn DataColumn="name" />
</ajax:GridView>

The template file have to contain 3 areas: "header", "content", "footer".
  • Header: The first (no repeat) code you want render.
  • Content: Repetitive code, for each row it will render a content area by replace each <$Column{N}$>.
  • Footer: The last (no repeat) code you want render.

<!$Begin header>
<div class="imageListDiv">
<!$End header>

<!$Begin content>
   <div class="imageDiv">
      <$Column{0}$><br />
      <span><$Column{1}$></span>
   </div>
<!$End content>

<!$Begin footer>
</div>
<!$End footer>
Go to Index

Last edited Feb 9, 2010 at 9:09 AM by fescolar, version 14

Comments

No comments yet.