Use VTemplate template engine - Beginners

1. What is VTemplate template engine?

2, how to use VTemplate template engine ?

Step 1: Download the latest VTemplate template engine library file ( download from here ), download back into the library after your project.

Step 2: Your goal for VT good design templates (such as an HTML page).

Step 3: The VT template code to instantiate a template engine objects, and data processing associated logic.

Step 4: The final presentation template engine output data (display or storage directly to a file)

3, VT how to design templates?

VT template design is how it is when VT template design elements, like how to design HTML tags those elements as you design your HTML page. The design VT templates, mainly those where you think it should always be designed to change the data of VT template element . For example, for a place (such as the title of the article, content) single data changes, the design variable elements ; places (such as articles ranking, column lists data) for the list of data changes, the design cycle elements (for or foreach tag element)

Note: For VT template elements please refer to this article the content of point 3 below.

Let's do an example of a design similar to the blog in the garden of log pages (that is, you're seeing this page) of the VT template. Page effect is as follows:

Diary of district title

The contents of the diary

posted @ 2008-06-19 10:31 Kingthy reading (1) Comments (2)

comment list

# 1F 2008-06-19 11:14 | Joe Smith

sofa

# 2 House 2008-07-19 11:14 | John Doe

Top Landlord

# 3 House 2008-08-19 11:14 | Wangwu

Bench ah

HTML page code is as follows:

< Div class = "bloglog" > < strong > journal header area </ strong > < HR class = "blogsplit" />

 The contents of the diary

  < Div style = "margin-bottom: 20px" align = left = "right" >. Posted @ 2008-06-19 10:31 Kingthy reading (1) Comments (2) </ div >

  < Strong > Comments list </ strong > < HR class = "blogsplit" /> < div class = "blogcomment" > # 1 floor 2008-06-19 11:14 | Joe Smith </ div > < div style = "padding -left: 20px " > sofa </ div > < HR class =" blogsplit " /> < div class =" blogcomment " > # 2 House 2008-07-19 11:14 | John Doe </ div > < div style = "padding-left: 20px" > top landlord </ div > <hr = class "blogsplit" /> 
 < div class = "blogcomment" > # 3 House 2008-08-19 11:14 | Wang Wu </ div > < div style = "padding-left: 20px" > bench ah </ div > </ div >

Observe the above HTML code has been added to the background color of the area, for blog systems, display local blog diary pages about change where it is needed only above the background color has been added, so long as the local variation of the above design template VT elements can be. For the yellow area, only a single data change places, as long as the design variable elements; for green areas, the data is a list of comments, we need to design cycle elements, such as with foreach tag element. VT good final design template as follows (you can compare different upper and lower yellow and green background area):

<div class=”bloglog”><strong>{$:blogarchive.title htmlencode=”true”}</strong> <hr class=”blogsplit”/>

  {$:blogarchive.content}

  <div style="margin-bottom: 20px" align="right">posted @ {$:blogarchive.time format=”yyyy-MM-dd HH:mm”} {$:blogarchive.author htmlencode=”true”} 阅读(1) 评论(2)</div>

  <strong>评论列表</strong> <vt:foreach from=”$blogarchive.comments” item=”#.comment” index=”#.floor”>


 <hr class=”blogsplit”/> 
 <div class=”blogcomment”>#{$:#.floor}楼 {$:#.comment.time format=”yyyy-MM-dd HH:mm”} | {$:#.comment.author htmlencode=”true”} </div> <div style="padding-left: 20px">{$:#.comment.content htmlencode=”true”}</div> </vt:foreach> </div>

4, how to use VT template?

We designed using the VT template above, we instantiate VTemplate template engine in the template document object TemplateDocument.

If our VT template stored in blogarchive.html file, the instance of the code is as follows:

TemplateDocument document = new TemplateDocument(context.Server.MapPath("template/blogarchive.html"), Encoding.UTF8);

Or we construct an example from the cache template:

TemplateDocument document = TemplateDocument .FromFileCache(context.Server.MapPath("template/blogarchive.html"), Encoding.UTF8);

This, we can use the document object to manipulate VT template variables in the elements of an object, such as the VT template red blogarchive confers an article blog diary data variables, as follows:

// the VT template of blogarchive variable assignment
document.Variables.SetValue ( "blogarchive", this.GetBlogArchive ( ));

NOTE: For GetBlogArchive () method is simply a function of acquiring data entity, such as entity data acquired from the database.

After this simple two-step operation, we had completed the operation on the VT template, and the rest is "tell" template engine will present data out our blog diary pages to do the work;) is not very simple?

// output the final presentation of data
document.Render (context.Response.Output);

blogarchive.ashx file in the code examples taken from VTemplate.WebTester project Benpian Note:

VTemplate code project hosted on Google .
The URL of: http://net-vtemplate.googlecode.com/
SVN: http://net-vtemplate.googlecode.com/svn/src/VTemplate.Engine/

For more examples, please refer VTemplate.WebTester project :

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

Watch the demo or example online :( Thanks friends " DOLT ", " crazy " offer )

http://61.155.39.222:8888/index.ashx

Note: The template engine technology have been established VTemplate exchange QQ group, to welcome you all to participate in project development or technology to explore added. QQ group: 884 468

Use VTemplate template engine - Beginners

Guess you like