Asp.net网页应用程序中的网页模板

Question

我的公司已经将UI设计外包给了另一家company.That公司，给了我们html模板。目前，我们显示数据的方式是从jquery ajax调用web服务，然后web服务请求数据访问层的对象集合(例如，.Customer对象集合)。之后，集合被转换为json字符串，并作为结果返回给Jquery Ajax。然后，Jquery将json string replace中的值相应地放入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

关于使用jquery templates，This看起来像是一篇不错的文章。虽然不确定它是如何工作的，因为我从来没有用过它。我使用类似的方法，但模板实际上是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的长字符串。