如何在html中设置ajax数据的样式

Question

我已经成功地从ajax查询中检索了数据，但是，我发现很难按照我想要的数据外观来设计它的样式

我希望数据被表示为可点击的

标签。下面是我的代码和预期的输出。

$(document).ready(function () {

    $.ajax({
        type: "GET",
        dataType: "json",
        url: "/Message/GetMessages",
        traditional: true,
        contentType: "application/json;charset=utf-8",
        success: function (data)
        {
            $('#counter').html(data.length);
            $(data).each(function (index, notice)
            {
                var list = $('#messageList').append('<ul></ul>').find('ul');
                for (var i = 0; i < 10; i++) {
                    list.append('<li><h6>' + notice.subject + '</h6><p>' + notice.body + '<br/></p></li>');
                }
                   
              
                
            });
            
         
            
            
            console.log(data);
            },
        
        error: function (xhr, status, error) { }
    });

预期输出如下图

Answer 1

我的测试结果：

我的控制器：

public List<Message> message() {
    List<Message> mes = new List<Message> { 
        new Message{
            messageId = "04ebfda7-9aff-42d1-8ef7-4794193e4e8f",
            body = "New Member with Member by name  NSIAH  GLORIA-JWC026 has been created",
            isRead = 0,
            sender="Eklexia",
            subject="New Member",
            reciever="SuperAdmin",
            isDeleted=false
        },
        new Message
        {
            messageId = "asdf",
            body = "ddddddd",
            isRead = 1,
            sender="user1",
            subject="delete Member",
            reciever="Admin",
            isDeleted=true
        }
    };
    return mes;
}

我的看法：

<button id="showList">show message</button>
<div>
    <div>message list</div>
    <a href="/home" style="text-decoration:none; color:black;">asdf</a>
    <ul id="mesgList">
        <li>
            <a href="/home">
                <div class="itmHead" style="overflow:hidden" >
                    <div style="float:left;width:150px;" >comment</div>
                    <div style="float:left;width:150px;text-align: right;"> yesterday</div>
                </div>
                <div class="subject">
                    subject
                </div>
                <div class="content">
                    content
                </div>
            </a>
        </li>
    </ul>
</div>

@section Scripts{
    <script>
        $("#showList").click(function () {
            $.ajax({
                url: "/home/message",
                type:"get",
                contentType: "application/json;charset=utf-8",
                success: function (data) { 
                    console.info(data);
                    var html = '';
                    for (var i = 0; i < data.length; i++) { 
                        var item = '<li>'
                                    + '<a href="/home" style="text-decoration:none; color:black;">'
                                        + '<div class="itmHead" style="overflow:hidden" >'
                                            + '<div style="float:left;width:150px;" >comment</div>'
                                            + '<div style="float:left;width:150px;text-align: right;"> yesterday</div>'
                                        + '</div>'
                                        + '<div class="subject">'
                                            + data[i].subject
                                        + '</div>'
                                        + '<div class="content">'
                                            + data[i].body
                                        + '</div>'
                                    + '</a>'
                                + '</li>';
                        html += item;
                    }
                    console.info(html);
                    $("#mesgList").append(html);
                }
            });
        });

    </script>
}