VTemplate模板引擎的使用 - MasterPage篇

在做WebForm编程开发时用过MasterPage的同学，可能都对这东东情有独钟。今日在QQ群上，“家有萧萧”同学也提出了这样一个问题：VT支持MasterPage吗？

答案肯定是“不支持”，因为VTemplate模板引擎不是用于WebForm上的（当然如果非要用也是可以的），所以不支持Asp.net中的MasterPage技术。但“不支持”并不等于“没有”这功能！

 

方法一：

换个角度思考一下，VT其实也是可以用<vt:output>标签来达到MasterPage功能效果的。

 

回顾一下

5.15、<vt:output>数据输出标签元素

此标签可输出某个标签或文件的数据。标签样例：

<vt:output tagid="user" />
<vt:output file="output.html" charset="gb2312" />

  
标签中已定义的属性列表：

名称 说明
id 标签元素的Id，建议唯一但不强制。(可不定义)
name 标签元素的名称。(可不定义)
tagid 需要输出数据的其它标签元素Id。(可不定义)
注：如果未定义此属性则需要定义file属性
file

需要输出数据的文件，可以为绝对路径或相对路径。(可不定义)

注：如果未定义此属性则需要定义tagid属性

charset 读取文件时使用的编码。(可不定义)

 

从上表可看出<vt:output>标签可以通过设置tagid属性输出其它标签的数据，所以我们可以用其来代替MasterPage中的ContentPlaceHolder控件。

比如我们定义一个这样的“MasterPage”页面（masterpage_content.html）：

<vt:set var="MasterPage" value="1" remark="设置一个变量,用于标示是处于MasterPage页中" />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> MasterPage 内容 </title>
</head>
<body>
<a class="menu" href="http://www.cnblogs.com/%22>博客园</a> &nbsp;&nbsp;
<a  class="menu" href="http://www.cnblogs.com/kingthy%22>我的博客</a>
<hr />
<!--vt[以下是输入子页面的数据内容]-->
<vt:output tagid="PageContent" />
<hr />
<div align="center">&copy;版权所有 Kingthy</div>
</body>
</html>

其中定义的MasterPage变量，可起开关作用！<vt:output>标签中的tagid就是子页面定义的内容标签。如果需要，可在MasterPage中定义多个<vt:output>标签，但注意tagid的定义。

 

以下是一个调用“MasterPage”的示例页面代码：

<vt:include file="masterpage_content.html" remark="导入MasterPage页面" />
<vt:set var="MasterPage" value="0" remark="设置一个变量,用于标示当前不处于MasterPage页中" />
<!--vt[根据MasterPage变量值来判断子页面的内容是否需要输出.这就限制了子页面的内容只在MasterPage页面中的output标签输出.]-->
<vt:if id="PageContent" var="MasterPage" value="1">
<!--vt[子页面的内容必须放在此if标签内]-->
<vt:for from="1" to="9" index="i">
<vt:for from="1" to="$i" index="j">
<vt:expression var="r" args="i" args="j" expression="{0}*{1}" />{$:i}*{$:j}={$:r}&nbsp;&nbsp;&nbsp;&nbsp;
</vt:for>
<br />
</vt:for>
</vt:if>

在上面模板中，先使用<vt:include>标签导入“MasterPage”页面内容，再调用<vt:set>标签设置MasterPage变量为“0“，这两个标签的顺序不能调反。这样做的原因是因为“VTemplate模版引擎”解析模版数据时是先上而下，当解析<vt:include>“MasterPage”页面中的<vt:output>标签，输出tagid=”PageContent”的标签（也就是那个<vt:if>标签）数据时，因为此时MasterPage变量是等于“1”，所以能执行

<vt:if id="PageContent" var="MasterPage" value="1">

这个条件标签里的内容。当执行完

<vt:set var="MasterPage" value="0" />

标签再执行

<vt:if id="PageContent" var="MasterPage" value="1">

这个条件标签时，因为条件已不符合，因此不会再次执行输出里面的数据。

至此，VTemplate中的“MasterPage“功能就“模仿”出来了。

（注：如果“MasterPage“页面中有多个<vt:output>标签，则子页面中也只是拷贝多少个同样判断条件但不同id的<vt:if>标签）。

 

注：具体示例代码请参考VTemplate.WebTester项目中的masterpage_test.ashx文件与模板

 

 

方法二： Panel标签

注：此标签是3.7版本里增加的标签

定义模板页，如masterpage.html， 代码如下：

<html>
<head>
<title> <vt:panel id="title" /> </title>
<vt:panel id="head" />
</head>
<body>

<vt:panel id="body" />

</body>
</html>

 

 在上面模板代码中定义了3个panel，也就是3个容器面板标签。

 

其它页面调用此masterPage.html，示例如下：

<vt:include file="masterpage.html" />

<vt:panel container="title">测试页面</vt:panel>

<vt:panel container="head">
<meta name="Keywords" content="关键字">
<meta name="Description" content="描述内容">
</vt:panel>

<vt:panel container="body">
<h1>这是主体内容</h1>
</vt:panel>

 

上面模板里，第一步先使用include标签导入模板页面，后跟着3个数据面板标签。解析此模板内容后，将输出以下数据:

 

<html>
<head>
<title>测试页面</title>
<meta name="Keywords" content="关键字">
<meta name="Description" content="描述内容">
</head>
<body>

<h1>这是主体内容</h1>

</body>
</html>

 

也即是数据面板标签里的内容会代替容器面板里的数据输出。并且数据面板标签可以根据需要增加或减少，并不限制要和MaterPage里的容器面板标签的数量一致！

 

 

VTemplate项目托管在Google code上。
URL: http://net-vtemplate.googlecode.com/
SVN: http://net-vtemplate.googlecode.com/svn/src/VTemplate.Engine/

更多例子请参考VTemplate.WebTester项目：

http://net-vtemplate.googlecode.com/svn/src/VTemplate.WebTester/

 

 

 

 

注：已建立VTemplate模板引擎技术交流QQ群，欢迎各位加入参与项目开发或技术探讨。QQ群：884468

posted @ 2009-12-10 13:19  Kingthy  阅读(3905)  评论(8)  编辑  收藏  举报