使用VTemplate模板引擎動態生成訂單流程圖

時間 2019-11-12

原文原文鏈接

一、VTemplate模板引擎的簡介javascript

VTemplate模板引擎也簡稱爲VT，是基於.NET的模板引擎，它容許任何人使用簡單的相似HTML語法的模板語言來引用.NET裏定義的對象。當VTemplate應用於web開發時，界面設計人員能夠和程序開發人員同步開發一個遵循MVC架構的web站點，也就是說，頁面設計人員能夠只關注頁面的顯示效果，而由程序開發人員關注業務邏輯編碼。VTemplate將.NET程序代碼從web頁面中分離出來，這樣爲web站點的長期維護提供了便利，同時也爲咱們在ASP.NET WebForm開發以外又提供了一種可選的方案。 VTemplate也能夠做爲動態文本生成工具，生成HTML、XML、郵件、程序源代碼或其它文本等。css

二、使用 VTemplate 生成的訂單流程圖html

相似於一些購物網站，訂單提交後實時的查詢當前流轉的步驟java

1. 定VTemplateHelper類node

 1   public  class VTemplateHelper
 2     {
 3 
 4 
 5         public VTemplateHelper(string ConfigFile)
 6         {
 7             this.ConfigFile = ConfigFile;
 8             LoadTemplateFile();
 9         }
10 
11         public VTemplateHelper(string ConfigFile,Encoding Encoding)
12         {
13             this.ConfigFile = ConfigFile;
14             this.Encoding = Encoding;
15             LoadTemplateFile();
16         }
17 
18         /// <summary>
19         /// 當前頁面的模板文檔的配置參數
20         /// </summary>
21         protected virtual TemplateDocumentConfig DocumentConfig
22         {
23             get
24             {
25                 return TemplateDocumentConfig.Default;
26             }
27         }
28 
29         public  TemplateDocument Document
30         {
31             get;
32             private set;
33         }
34 
35         public string ConfigFile { get; set; }
36 
37         public Encoding Encoding { get; set; }
38 
39         /// <summary>
40         /// 是否讀取緩存模板
41         /// </summary>
42         protected virtual bool IsLoadCacheTemplate
43         {
44             get
45             {
46                 return true;
47             }
48         }
49 
50         /// <summary>
51         /// 裝載模板文件
52         /// </summary>
53         /// <param name="fileName"></param>
54         protected virtual void LoadTemplateFile()
55         {
56             if (Encoding == null)
57             {
58                 Encoding = System.Text.Encoding.UTF8;
59             }
60             this.Document = null;
61             if (this.IsLoadCacheTemplate)
62             {
63                 //測試緩存模板文檔
64                 this.Document = TemplateDocument.FromFileCache(ConfigFile, Encoding, this.DocumentConfig);
65             }
66             else
67             {
68                 //測試實例模板文檔
69                 this.Document = new TemplateDocument(ConfigFile, Encoding, this.DocumentConfig);
70             }
71         }
72 
73         /// <summary>
74         /// 請先調用LoadTemplateFile方法
75         /// </summary>
76         /// <returns></returns>
77         public string RenderText()
78         {
79             return this.Document.GetRenderText();
80         }
81 
82         public string RenderSimpleText(object obj,string Name)
83         {
84             this.LoadTemplateFile();
85             this.Document.Variables.SetValue(Name, obj);
86             return RenderText();
87         }
88     }

View Code

2. 調用代碼web

  VTemplateHelper vt = new VTemplateHelper(Server.MapPath("OrderProcessSteps.htm"));
  string html=vt.RenderSimpleText(order, "order");
  this.DivProcess.InnerHtml = html;

DivProcess 是頁面對應的DIV控件，用於顯示內容緩存

OrderProcessSteps.html 頁面使用，相似ASPX 頁面嵌套代碼使用架構

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4     <link href="../Style/css/common.css" rel="stylesheet" type="text/css" />
 5     <link href="../Style/css/user.orderinfo.css" rel="stylesheet" type="text/css" />
 6     <script type="text/javascript">
 7      function adddeliver() { 
 8                 window.open("appdeliver.aspx?orderno="+<%=orderno %>);
 9         }
10     </script>
11 </head>
12 <body>
13     <div id="process" class="section4">
14         <div class="node fore ready">
15             <ul>
16                 <li class="tx1">&nbsp;</li>
17                 <li class="tx2" style="padding-left: 20px">提交訂單</li>
18                 <li class="tx3" style="padding-left: 80px">
19                     {$:order.OrderTime} </li></ul>
20         </div>
21         <div class="proce  ready ">
22             <ul>
23                 <li class="tx1">&nbsp;</li></ul>
24         </div>
25   <vt:if var="order.OrderStatus" value="-1" > 
26         <div class="node  ready">
27             <ul>
28                 <li class="tx1">&nbsp;</li>
29                 <li class="tx2">訂單關閉</li>
30                 <li class="tx3"></li>
31             </ul>
32         </div>
33   <vt:else>
34     <vt:if var="order.PayStatus" value="0" > 
35         <div class="node  wait">
36             <ul>
37                 <li class="tx1">&nbsp;</li>
38                 <li class="tx2">暫未支付</li>
39                 <li class="tx3"></li>
40             </ul>
41         </div>
42         <div class=" proce  wait ">
43             <ul>
44                 <li class="tx1">&nbsp;</li></ul>
45         </div>
46     <vt:elseif value="1" > 
47         <div class="node ready">
48             <ul>
49                 <li class="tx1">&nbsp;</li>
50                 <li class="tx2">支付確認中</li>
51                 <li class="tx3"></li>
52             </ul>
53         </div>
54         <div class=" proce doing ">
55             <ul>
56                 <li class="tx1">&nbsp;</li></ul>
57         </div>
58     <vt:elseif  value="2" > 
59         <div class="node  ready">
60             <ul>
61                 <li class="tx1">&nbsp;</li>
62                 <li class="tx2">付款成功</li>
63                 <li class="tx3"></li>
64             </ul>
65         </div>
66         <div class=" proce  ready ">
67             <ul>
68                 <li class="tx1">&nbsp;</li></ul>
69         </div>
70      </vt:if>
71     </vt:if>
72     </div>
73 </body>
74 </html>