Javascript Ajax响应：将JSON映射到HTML

我正在做一个带有C#MVC和Razor视图的项目。 下面的ajax请求检索价格表并将html注入到div价格表中：

$.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结果，但我不确定这是如何工作的。非常感谢您的帮助

编辑： 我想饶了你，但我的“丑陋”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>';

var line=data.line[index]；
var html=''；
html+=“文章编号”+line.ArticleNo+”；
html+=''；
html+=''；
html+=''；
html+=''；
html+=''；
html+=''；
html+=''；

您可以使用

模板字符串创建
html
内容

这很有帮助，因为您可以使用
${}
来显示javascript变量，这对于
多行
内容很容易阅读


let line={
HashCode:'adfsf'，
第123条
};
变量html=`
第${line.ArticleNo}条
按钮
`;
$（'#test'）.append（html）
您可以使用
模板字符串创建
html
内容

这很有帮助，因为您可以使用
${}
来显示javascript变量，这对于
多行
内容很容易阅读


let line={
HashCode:'adfsf'，
第123条
};
变量html=`
第${line.ArticleNo}条
按钮
`;
$（'#test'）.append（html）
Hey@Fabian如果您还需要类似的东西，为了保持一致性，我建议您使用把手模板
所以根据例子/
您的示例中的模板如下所示

<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>

通过使用上下文执行模板，获取评估把手模板的HTML结果

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

如果您还需要类似的东西，请确保遵循
Hey@Fabian，为保持一致性，我建议您使用把手模板
所以根据例子/
您的示例中的模板如下所示

<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>

通过使用上下文执行模板，获取评估把手模板的HTML结果

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

确保遵循
您想要创建的html是什么？。你为什么要用html重新编写一个
JsonResult
。我正在寻找一种方法，将我的json对象（即行）注入到现有的HTML模板（或另一个整洁的（er）解决方案）中。我最近没有使用它，但我似乎记得在视图中创建一个包含所有HTML的模板（放入一个隐藏的
中，然后在成功回调中，
.clone（）
JsonResult
只包含这两个属性的集合，或者你可以使用jquery模板。记录你想要创建的html是什么？为什么你要用html重新创建一个
JsonResult
将我的json对象（即行）注入现有HTML模板（或另一个整洁的（er）解决方案）的方法我最近没有使用它，但我似乎记得在您的视图中创建一个包含所有HTML的模板（放入隐藏的
中，然后在成功回调中，
.clone（）
JsonResult应该只是一个包含这两个属性的集合，或者你可以使用jquery模板。Docs这个方法肯定比我当前的解决方案整洁得多，谢谢你的回答！这个方法肯定比我当前的解决方案整洁得多，比谢谢你的回答！