MVC-AJAX iterate <div> for no of data in ajax success has

Question

我查看了许多网站，但没有得到答案。可能是我是 MVC 的新手，这就是为什么如果它是一个答案我无法识别它的原因。每个人都描述了唯一的警报消息，但是如果我想在$.each 中迭代整个<div> 怎么办？

情景是。我在 MVC 项目中有 APIController。我从 ajax 调用 API 方法并成功获取数据。但我使用了一个主题来为我的应用程序设置样式。该主题使用具有不同类的各种 div 标签在卡片上显示信息。

我尝试添加.html() 方法，并在ajax 成功方法中将所有div 元素添加为字符串格式。

另一个尝试是使用 $.each 并将模型值赋予 div id。

我还创建了一个局部视图，但不知道如何循环遍历所有 div 并在每次迭代时显示新值。

这是我的代码：

// HTML
<div class="col-xs-6 col-sm-3 col-md-10 background2" id="searchResult" style="margin-top:20px;">
</div>

// JQUERY
 $('#search').on('click', function () {
                $.ajax({
                    url: "/api/RegisterUsersAPI",
                    type: "GET",
                    dataType: "json",
                    success: function (data) {                        //$('#searchResultDoctors').html("/Home/_EmpList.cshtml"); // tried for partial view
                        $.each(data, function (index,item) {
                            $('#searchResult').html(
                                '<div class= "x_panel" >'+
                                ' <div class="x_content">'+
                                        '<div class="row">'+
                                         '<div class="clearfix"></div>' +
                                         ' <div class="col-md-6 col-sm-6 col-xs-12 profile_details">'+
                                                '<div class="well profile_view">'+
                                                     '<div class="col-sm-12">'+
                                                         '<h4 class="brief" id="divSpeciality"><i>'+item.Speciality+'</i></h4>'+
                                                        '<div class="left col-xs-7">'+
                                                            '<h2 id="divFullName">' + item.FullName +'</h2>'+
                                                            '<p id="divEducation">'+ item.Education +'</p>'+
                                                        '</div>'+
                                                        '<div class="right col-md-5">'+
                                                            '<img src="~/Images/img.jpg" alt="" class="img-circle img-responsive">'+
                                                        '</div>'+
                                                    '</div>'+
                                                  '</div>'+
                                            '</div>'+
                                         '</div>'+
                                      '</div>'+
                                 '</div>'
                                );
                        });

                    },
                    failure: function () {
                        alert("fail");
                    },
                    error: function () {
                        alert("error");
                    }
                });

            });

如何显示从 API 获得的细节到这种 div 排列？

请帮忙。谢谢

编辑

抱歉有点不清楚。上面的代码逐行生成卡片。在主题中，它使用col-md-* 类排列在一个类似表格的结构中。那么有没有办法使用这些类来实现表结构呢？

Answer 1

首先要清理html字符串拼接，看下面的javascript代码，使用instead of+`构建字符串

虽然我不知道你的 css 类，但用下面的代码替换你的 html

<div class="background2" id="searchResult" style="margin-top:20px;">
</div>

那么您的 javascript 可以如下所示，另请参阅关于在不使用 + 的情况下连接 html 字符串的更简洁方式的建议

var divContent = '';
 $.ajax({
     url: "/api/RegisterUsersAPI",
     type: "GET",
     dataType: "json",
     success: function (data) {  
         $.each(data, function (index, item) {
              divContent +=
            `<div class="col-md-4">
                <div class= "x_panel" >
                    <div class="x_content">
                        <div class="row">
                            <div class="clearfix"></div>
                                <div class="col-md-6 col-sm-6 col-xs-12 profile_details">
                                    <div class="well profile_view">
                                        <div class="col-sm-12">
                                            <h4 class="brief" id="divSpeciality"><i>${item.Speciality}</i></h4>
                                            <div class="left col-xs-7"><h2 id="divFullName">${item.FullName}</h2>
                                                <p id="divEducation">${item.Education}</p>
                                            </div>
                                            <div class="right col-md-5">
                                                <img src="~/Images/img.jpg" alt="" class="img-circle img-responsive">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>`;
            });
            $('#searchResult').html(
                divContent
            );
        },
        failure: function () {
            alert("fail");
        },
        error: function () {
            alert("error");
        }
    });

Answer 2

你的问题不清楚。据我了解，您希望将数据列表项一一添加到 html 标记中。

$('#search').on('click', function () {
                $.ajax({
                    url: "/api/RegisterUsersAPI",
                    type: "GET",
                    dataType: "json",
                    success: function (data) {                        //$('#searchResultDoctors').html("/Home/_EmpList.cshtml"); // tried for partial view
                        var items='';
                        $.each(data, function (index,item) {
                            
                            items += '<div class= "x_panel" >'+
                                ' <div class="x_content">'+
                                        '<div class="row">'+
                                         '<div class="clearfix"></div>' +
                                         ' <div class="col-md-6 col-sm-6 col-xs-12 profile_details">'+
                                                '<div class="well profile_view">'+
                                                     '<div class="col-sm-12">'+
                                                         '<h4 class="brief" id="divSpeciality"><i>'+item.Speciality+'</i></h4>'+
                                                        '<div class="left col-xs-7">'+
                                                            '<h2 id="divFullName">' + item.FullName +'</h2>'+
                                                            '<p id="divEducation">'+ item.Education +'</p>'+
                                                        '</div>'+
                                                        '<div class="right col-md-5">'+
                                                            '<img src="~/Images/img.jpg" alt="" class="img-circle img-responsive">'+
                                                        '</div>'+
                                                    '</div>'+
                                                  '</div>'+
                                            '</div>'+
                                         '</div>'+
                                      '</div>'+
                                 '</div>'
                                
                        });
                        $('#searchResult').html(items);
                    },
                    failure: function () {
                        alert("fail");
                    },
                    error: function () {
                        alert("error");
                    }
                });

            });