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、span 等）。我通常将模板存储在单独的文件中并将它们加载到服务器上：

<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 字符串。