Asp.net Web应用程序中的Html页面模板

My company has outsourced the UI design to another company.That company gave us the html templates. Currently, the way we are doing to display the data is that we call the web service from jquery ajax and web service request the collection of objects from Data Acess Layer(Eg. Collection of Customer Objects). After that, the collection is converted to json string, and return as result to Jquery Ajax. Then, Jquery took the values from json string replace accordingly in html string and append to div. That html string is the template provided by outsource company. Below is the exmaple of Jquery.

我的公司已将UI设计外包给另一家公司。该公司向我们提供了html模板。目前，我们显示数据的方式是我们从jquery ajax调用Web服务，Web服务请求从Data Acess Layer（例如，Customer Objects集合）中收集对象。之后，集合将转换为json字符串，并作为结果返回给Jquery Ajax。然后，Jquery在html字符串中相应地从json字符串替换值并附加到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);
}

Normally, html strings are very long and difficult to maintain and troubleshoot. Is there any better way to solve this? We are using Entity Framework for DAL. Thanks.

通常，html字符串很长，很难维护和排除故障。有没有更好的方法来解决这个问题？我们正在使用实体框架进行DAL。谢谢。

1 个解决方案

#1

This looks like a nice article about using jquery templates. Not sure how it works though, because I never used it. I use a similar approach, but the templates are actually a mixture of HTML and Javascript. The templates look similar with T4 templates.

这看起来像是一篇关于使用jquery模板的好文章。不知道它是如何工作的，因为我从未使用它。我使用类似的方法，但模板实际上是HTML和Javascript的混合。模板看起来与T4模板类似。

This is a bit of code that parses the template:

这是解析模板的一些代码：

$.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();
}

This is an example of a template (the script is ignored by the browser because of the type):

这是模板的示例（由于类型，浏览器会忽略该脚本）：

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

This is how I use the template:

这是我使用模板的方式：

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

The divContainer can be any html element (div, span, etc.). I usually store the templates in separate files and load them on the server:

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>

This way is very easy to edit the templates. It's not perfect, but I never have to worry about debugging long strings of HTML.

这种方式很容易编辑模板。它并不完美，但我从不担心调试长串的HTML。

#1