Asp.net Web應用程序中的Html頁面模板

Question

我的公司已將UI設計外包給另一家公司。該公司給了我們html模板。目前，我們所做的顯示數據的方式是我們從jQuery Ajax調用Web服務，Web服務請求數據訪問層（例如客戶對象集合）中的對象集合。之後，集合被轉換爲json字符串，並作爲結果返回給Jquery Ajax。然後，jquery從json字符串中取值，並在HTML字符串中進行相應的替換，並附加到div。該html字符串是外包公司提供的模板。下面是Jquery的例子。

function ShowAllTransactions() { 
try 
{ 

    var isBest = "false"; 

    $.ajax({ 
     type: "POST", 
     url: "Transaction.asmx/GetTransactionRecords", 
     data: "{'categoryID':'" + categores +"' }", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (msg) { 
      GetTransactions(msg); 
     } 
    }).done(initProductInfo); 
    } 
catch (ex) { 
    alert(ex); 
} 
} 

var GetTransactions = function (msg) { 
    var p = $.parseJSON(msg.d); 
    var str = ''; 
for (var i = 0; i < p.length; i++) { 
     var OrderCreateDateTime = p[i].OrderCreateDateTime; 
     str += "<ul class=\"transitem\">"; 
     str += "<li class=\"itemdate\">" + OrderCreateDateTime + " </li> "; 
     str += "</ul> <div class=\"clear\"></div>"; 
     } 
    str += "<div class=\"clear\"></div> <div class=\"endline\"></div>"; 

    $("#records").empty().append(str); 
} 

通常情況下，HTML字符串很長，難以維護和故障排除。有沒有更好的方法來解決這個問題？我們正在使用DAL的實體框架。謝謝。

Answer 1

This看起來像是一篇很好的文章，關於使用jquery templates。不知道它是如何工作的，因爲我從來沒有使用它。 我使用類似的方法，但模板實際上是HTML和Javascript的混合。模板看起來與T4 templates相似。

這有點的代碼解析模板：

$.fn.parseTemplate = function (data) { 
    //alert(JSON.stringify(data)); 
    var str = (this).html(); 
    //alert(str); 
    var _tmplCache = {} 
    var err = ""; 
    try { 
     var func = _tmplCache[str]; 
     if (!func) { 
      var strFunc = 
      "var p=[],print=function(){p.push.apply(p,arguments);};" + 
         "with(obj){p.push('" + 
      str.replace(/[\r\t\n]/g, " ") 
       .replace(/'(?=[^\$]*\$>)/g, "\t") 
       .split("'").join("\\'") 
       .split("\t").join("'") 
       .replace(/<\$=(.+?)\$>/g, "',$1,'") 
       .split("<$").join("');") 
       .split("$>").join("p.push('") 
       + "');}return p.join('');"; 

      //alert(strFunc); 
      //console.log(strFunc); 
      func = new Function("obj", strFunc); 
      _tmplCache[str] = func; 
     } 
     return func(data); 
    } catch (e) { err = e.message; } 
    return "ERROR: " + err.toString(); 
} 

這是一個模板的一個例子（該腳本是由瀏覽器因爲類型的忽略）：

<script id="MyTemplate" type="text/template"> 
<$ 
for(var i = 0; i < obj.length; i++) { 
$> 
<div><$= obj[i] $></div> 
<$ 
} 
$> 
</script> 

這是我如何使用模板：

<script type="text/javascript"> 
function loadDataIntoHtml() { 
    var data = ["Javascript", "HTML", "Templates"]; 
    var html = $("#MyTemplate").parseTemplate(data); 
    $("#divContainer").html(html); 
} 
</script> 

的divContainer可以是任意的HTML元素（DIV，跨度等）。我通常存儲在單獨的文件模板和加載它們的服務器上：

<script runat="server" type="text/C#"> 
var templateContent = System.IO.File.ReadAllText(Server.MapPath("~/Templates/MyTemplate.htm")); 
</script> 
... 

<script id="MyTemplate" type="text/template"> 
<%= templateContent %> 
</script> 

這種方式是非常容易編輯模板。這並不完美，但我從不擔心調試長長的HTML字符串。