Question

我有以下结构：

WebService - 从数据库中获取数据并返回列表人
ASP.NET MVC应用程序 - 使用1）中的Web服务。

HomeControler中有一个方法：

public JsonResult GetDbData()
{
    WebService1SoapClient client = new WebService1SoapClient();
    List<Person> lstPersons = client.GetPersons();

    return Json(lstPersons, JsonRequestBehavior.AllowGet);
}

我想以这种方式使用jQuery Ajax调用显示Index.cshtml视图中的人员列表：

<div>
    <div id="div3">Database data.</div>
</div>

<input id="btnGetDBData" type="button" value="GetDBData" />

$('#btnGetDBData').click(function () {
    $.ajax({
        url: "/Home/GetDbData",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            $("#div3").html(data);
        },
        error: function (xhr, status) {
            alert(status);
        }
    });
});

但是，它没有用。

我是jQuery的新手，需要某种表或模板或类似转发器的东西，可以显示列表或表结构。

Person类看起来如下：

public class Person
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

我需要在Html表中显示人员列表。

Answer 1

为什么要将div3的内容设为.html？

success: function (data) {
    $("#div3").html('');
    var div3Content = '';
    for(var i = 0; i < data.length; i++)
    {
       div3Content += '<p>' + data[i].Name + '</p>'; // if Name is property of your Person object
    }
    $("#div3").append(div3Content);
},

这样，Person名称将添加到div3作为<p>代码

Answer 2

在data方法的success变量中，您有一个数据数组，您必须手动绘制

success: function (data) {
    $.each(data, function (index, value) {
        $("#div3").append(value.Id + '|' + value.FirstName + '|' + value.LastName);
    });
}

Answer 3

$('#div3').html(data)将HTML设置为数据中的内容。但是，在jQuery调用data包含一组对象而不是HTML之后。首先需要定义HTML应该是什么样子。 - 你想要它作为无序列表，表格，一系列漂亮的瓷砖，......？

为了从数据中呈现HTML，我建议您还考虑模板和/或数据绑定库，例如， knockout，允许您在HTML中定义模板：

<ul data-bind="foreach: persons">
    <li data-bind="text: LastName"></li>
</ul>

和你的jQuery ajax成功回调：

success: function (data) {
    ko.applyBindings({ persons: data });
}

如上所述的淘汰赛foreach绑定是你要求的转发器。

更新：如果你想要一张表，淘汰赛模板只会改为：

<table>
    <thead><tr><th>First Name</th><th>Last Name</th><th>Full Name</th></tr></thead>
    <tbody data-bind="foreach: persons">
        <tr>
            <td data-bind="text: FirstName"></td>
            <td data-bind="text: LastName"></td>
            <td data-bind="text: FirstName() + ' ' + LastName()"></td>
        </tr>
    </tbody>
</table>

使用jQuery和Ajax显示列表数据

3 个答案: