Use of the vtemplate engine-entry

1. What is the vtemplate engine?

For details, click here.

2. How to Use the vtemplate template engine?

Step 2: download the latest library file of the vtemplate engine (download from here), and then introduce the library file to your project.

Step 2: design a VT template (such as an HTML page) for your purpose ).

Step 2: instantiate the template engine object in the code based on the VT template and process the related Logical Data.

Step 2: output the final presentation data of the template engine (directly display or store it to a file)

3. How to design a VT template?

Designing a VT template is just like designing HTML Tag elements when you design an HTML page. The design of the VT template is mainly to design those places that you think should change data from time to time as the VT template element. For example, for a single data change (such as the title and content of an article), designVariable ElementFor the areas where the list data changes (such as the document rankings and column lists), designLoop Element(For or foreach label element)

Note: For details about the VT template elements, refer to the content below 3rd in this article.

Let's take an example to design a VT template similar to the log page in the blog Garden (that is, the page you see now. The page effect is as follows:

The title area of the diary

Diary content

Posted @ 2008-06-19 kingthy reading (1) Comments (2)

Comment list

# 1st floor 2008-06-19 | Zhang San sofa # 2nd floor, | Lord Li siding # 3rd floor | Wang Wu bench

The HTML code of the page is as follows:

<Div class = "bloglog"> <strong> diary title area </strong> <HR class = "blogsplit"/>

Diary content

<Div style = "margin-bottom: 20px" align = "right"> posted @ 2008-06-19 kingthy reading (1) Comment (2) </div>

<Strong> comment list </strong> <HR class = "blogsplit"/> <Div class = "blogcomment"> # 1st floor 2008-06-19 | Zhang San </div> <Div Style = "padding-left: 20px "> sofa </div> <HR class =" blogsplit "/> <Div class =" blogcomment "> # 2nd floor 2008-07-19 | Li Si </div> <Div style = "padding-left: 20px "> top author </div> <HR class =" blogsplit "/>
<Div class = "blogcomment"> # 3rd floor 2008-08-19 11: 14 | Wang Wu </div> <Div style = "padding-left: 20px "> bench </div>

Observe the area where the background color has been added in the preceding HTML code. For the blog system, the page displaying the blog diary needs to be changed only when the background color has been added, therefore, you only need to design the changes above as the VT template element. For the yellow area, only where the single data changes, as long as it is designed as a variable element; for the green area, it is to display the comment data list, so it needs to be designed as a loop element, such as using the foreach label element. The final VT template is as follows (you can compare the differences between the yellow and green background areas ):

<div class=”bloglog”><strong>{$:blogarchive.title htmlencode=”true”}</strong>   
  {$:blogarchive.content}
<Div style = "margin-bottom: 20px" align = "right"> posted @ {$: blogarchive. time Format = "yyyy-mm-dd hh: mm"} {$: blogarchive. author htmlencode = "true"} read (1) Comments (2) </div>

<Strong> comment list </strong> <Vt: foreach from = "$ blogarchive. Comments" item = "#. Comment" Index = "#. Floor">


<HR class = "blogsplit"/>
<Div class = "blogcomment" >#{$ :#. floor} 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 the VT template?
Using the VT template we designed above, we instantiate the templatedocument object in the vtemplate template engine.
If our vttemplate is stored in the blogarchive.html file, the instantiation code is as follows:
Templatedocument document = new templatedocument (context. server. mappath ("template/blogarchive.html"), encoding. utf8 );
Or we can construct an instance from a cache template:
Templatedocument document = templatedocument. fromfilecache (context. server. mappath ("template/blogarchive.html"), encoding. utf8 );
At this point, we can use the document object to operate the element objects in the VT template variables. For example, assign the red blogarchive variable in the VT template to a blog diary data, as shown below:
// Assign values to the blogarchive variable in the VT Template

Document. variables. setvalue ("blogarchive", this. getblogarchive ());
NOTE: For the getblogarchive () method, it is only a function for getting data entities, such as the data entities obtained from the database.
 
After two simple steps, we have completed the VT template operation. The rest is to "tell" the template engine to present the data, and our blog diary page will be ready ;) is it easy?
// Output the final data

Document. Render (context. response. output );
 
Note: The sample code in this article is taken from the blogarchive. ashx file under the vtemplate. webtester project.
 
The vtemplate project is hosted on Google Code.
URL: http://net-vtemplate.googlecode.com/
SVN: http://net-vtemplate.googlecode.com/svn/src/VTemplate.Engine/
MoreFor example, refer to the vtemplate. webtester Project:
Http://net-vtemplate.googlecode.com/svn/src/VTemplate.WebTester/
Or watch the Online Demo example: (thanks to the netizen"Dolt","Madman"Provide)
Http: // 61.155.39.222: 8888/index. ashx
Note: A vtemplate engine technology exchange QQ group has been established. You are welcome to join the project development or technical discussion. QQ group:884468