stringtemplate模板引擎使用Demo,
如下:假如美工提供給我們的靜態頁面是如下的效果.
以下為程序代碼:
我們把這段代碼存為template.html,
當我們拿到這個靜態頁面,以前我們首先要做的就是將頁面中的table用net中的服務器控件,datalist,Gridview等數據控件替換,但是現在卻不用,我們要做的僅僅是將顯示數據的地方替換成stringtemplate所要求的格式,再將該html另存為st格式(暫不知道是否支持其它格式的模板定義文件),如下:
以下為程序代碼:
存為template.st.
當然,還有最后一步就是讀取數據進行處理.
.cs
以下為程序代碼:
使用前提:下載stringtemplate的dll,并加入參考,
引入命名空間:
using Antlr.StringTemplate.Language;
using Antlr.StringTemplate;
因為自己也是開始學,理解不夠深刻,講起來可能也不是很準確,應該還有其它很多方式實現數據的綁定.再學吧.
如下:假如美工提供給我們的靜態頁面是如下的效果.
以下為程序代碼:
<!--Setting Strict DOCTYPE--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!--Setting Your/s NameSpace,All Page is Same--> <html xmlns="http://www.w3.org/1999/xhtml" lang="big5"> <HTML> <HEAD> <TITLE> New Document </TITLE> <!--Setting Text Encoding--> <meta http-equiv="Content-Type" content="text/html; charset=big5" /> <!--New Version Browser--> <meta http-equiv="Content-Language" content="big5" /> <!--Old Version Browser--> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <!--UI Code--> <table border="1"> <tr> <td>No.</td> <td>姓名</td> <td>工號</td> </tr> <tr οnmοuseοver="javascript:this.style.backgroundColor='Aqua';" οnmοuseοut="javascript:this.style.backgroundColor='white'"> <td>1</td> <td>jimmy</td> <td>fXXXXXX</td> </tr> <tr οnmοuseοver="javascript:this.style.backgroundColor='Aqua';" οnmοuseοut="javascript:this.style.backgroundColor='white'"> <td>2</td> <td>aa</td> <td>fasdsb</td> </tr> <tr οnmοuseοver="javascript:this.style.backgroundColor='Aqua';" οnmοuseοut="javascript:this.style.backgroundColor='white'"> <td>3</td> <td>bb</td> <td>sdfsdfsd</td> </tr> </BODY> </HTML> |
我們把這段代碼存為template.html,
當我們拿到這個靜態頁面,以前我們首先要做的就是將頁面中的table用net中的服務器控件,datalist,Gridview等數據控件替換,但是現在卻不用,我們要做的僅僅是將顯示數據的地方替換成stringtemplate所要求的格式,再將該html另存為st格式(暫不知道是否支持其它格式的模板定義文件),如下:
以下為程序代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="big5"> <head> <title> New Document </title> <!--Setting Text Encoding--> <meta http-equiv="Content-Type" content="text/html; charset=big5" /> <!--New Version Browser--> <meta http-equiv="Content-Language" content="big5" /> <!--Old Version Browser--> </head> <body> <!--UI Code--> <table border="1"> <tr> <td>No.</td> <td>姓名</td> <td>工號</td> </tr> $userInfo:{ <tr οnmοuseοver="javascript:this.style.backgroundColor='Aqua';" οnmοuseοut="javascript:this.style.backgroundColor='white'"> <td>$it.id$</td> <td>$it.name$</td> <td>$it.applicant$</td> </tr>}$ </table> </body> </html> |
存為template.st.
當然,還有最后一步就是讀取數據進行處理.
.cs
以下為程序代碼:
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { setTemplate(); // aa(); } } /// <summary> /// 你可以從數據庫里獲取數據,并返回DataTable /// </summary> /// <returns></returns> protected DataTable getData() { DataTable dt = new DataTable("TempData"); DataColumn[] columns = new DataColumn[] { new DataColumn("Name",typeof(string)), new DataColumn("applicant",typeof(string)) }; dt.Columns.AddRange(columns); for (int i = 0; i < 10; i++) { DataRow row = dt.NewRow(); row["Name"] = "姓名" + i.ToString(); row["applicant"] = "工號" + i.ToString(); dt.Rows.Add(row); } return dt; } protected void setTemplate() { DataTable dt = getData(); string path =Server.MapPath(PathHelper.GetApplicationPath(Request) + "/Template/html/"); if (dt == null) return; StringTemplateGroup group = new StringTemplateGroup("myGroup",path,typeof(DefaultTemplateLexer)); StringTemplate st = group.GetInstanceOf("template"); int i = 1; List<user> list = new List<user>(); foreach (DataRow row in dt.Rows) { user u = new user(i.ToString(),row["Name"] != null ? row["Name"].ToString() : "",row["applicant"] != null ? row["applicant"].ToString() : ""); list.Add(u); u=null; i++; } st.SetAttribute("userInfo", list); Response.Write(st.ToString()); } //class public class user { string _id; string _name; string _applicant; private user() { } public user(string id,string name,string applicant) { this._id = id; this.name = name; this._applicant = applicant; } private string id { get{return _id;} set{_id = value;} } private string name { get{return _name;} set{_name = value;} } private string applicant { get{return _applicant;} set{_applicant = value;} } } |
使用前提:下載stringtemplate的dll,并加入參考,
引入命名空間:
using Antlr.StringTemplate.Language;
using Antlr.StringTemplate;
因為自己也是開始學,理解不夠深刻,講起來可能也不是很準確,應該還有其它很多方式實現數據的綁定.再學吧.