Question

我正在使用C＃MVC和Razor视图开展项目。以下ajax请求检索价目表并将html注入div priceLists ：

$.ajax({
            url: '/priceList/GetPriceList',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: { deliveryDate: deliverydate },
            success: function (data) {
                $.each(data.Lines, function (index) {       
                    // ugly code to generate html!
                    $("#priceLists").append(html);
                });
            },
            error: function () {
                $("#priceLists").empty(html);
            }
        });

这种方法有效。然而，它非常混乱，因为我在ajax响应中连接了html字符串。

有没有巧妙的方法将我的json对象映射到html模板？

单独使用AngularJS来解决这个问题似乎对我来说太过分了。我想到的另一种方法是使用部分视图结合json结果，但我不确定这是如何工作的。非常感谢任何帮助。

修改我想饶恕你，但我的丑陋＆＃39; html代码目前看起来像这样：

var line = data.Lines[index];
var html = '<div class="col-lg-12" id="' + line.HashCode + '">';
    html += '<h3> Article No.' + line.ArticleNo + '</h3>';
    html += '<div class="input-group">';
    html += '<input type="number" class="form-control" name="amount" min="0" value="0" />';
    html += '<span class="input-group-btn">';
    html += '<button onclick="AddLineToBasket(\'' + line.HashCode + '\')" class="btn btn-default" type="button"><span class="glyphicon glyphicon-shopping-cart"></span></button>';
    html += '</span>';
    html += '</div>';
    html += '</div>';

Answer 1

您可以使用template string来制作html内容。

这很有用，因为您可以使用${}来显示javascript变量，以便于multiline内容阅读。

let line = {
  HashCode: 'adfsf',
  ArticleNo: '123'
};

var html = `
  <div class="col-lg-12" id="${line.HashCode}">
    <h3> Article No. ${line.ArticleNo}</h3>
    <div class="input-group">
    <input type="number" class="form-control" name="amount" min="0" value="0" />
    <span class="input-group-btn">
      <button class="btn btn-default" type="button">
        <span class="glyphicon glyphicon-shopping-cart"></span>
        button
      </button>
    </span>
   </div>
  </div>
`;

$('#test').append(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="test">
</div>

More information about template string

Answer 2

嘿@Fabian如果你再次需要类似的东西，为了保持一致性我建议你使用Handlebars模板所以根据http://handlebarsjs.com/例子/ 您案例中的模板将如下所示。

<script id="entry-template" type="text/x-handlebars-template">
    {{#each lines}}
    <div class="col-lg-12" id="' + HashCode + '">
        <h3> Article No.{{ArticleNo}}</h3>
        <div class="input-group">
            <input type="number" class="form-control" name="amount" min="0" value="0" />
            <span class="input-group-btn">
                <button onclick="AddLineToBasket({{HashCode}})" class="btn btn-default" type="button"><span class="glyphicon glyphicon-shopping-cart"></span></button>
            </span>
        </div>
    </div>
    {{/each}}
</script>

使用Handlebars.compile

在JavaScript中编译模板

success: function (data) {
    var source   = $("#entry-template").html();
    var template = Handlebars.compile(source);
},

通过使用上下文执行模板来获取评估Handlebars模板的HTML结果。

success: function (data) {
    var source   = $("#entry-template").html();
    var template = Handlebars.compile(source);
    var context = {lines: data.Lines};
    var html    = template(context);
},

请务必遵循http://handlebarsjs.com/installation.html

Ajax响应：将JSON映射到HTML

2 个答案: