1

我有以下结构：

  1. WebService - 从数据库中获取数据并返回人员列表
  2. 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 表中显示人员列表。

4

3 回答 3

8

为什么要设置div3with的内容.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>中

于 2013-07-23T09:02:21.627 回答
2

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

success: function (data) {
    $.each(data, function (index, value) {
        $("#div3").append(value.Id + '|' + value.FirstName + '|' + value.LastName);
    });
}
于 2013-07-23T08:59:51.597 回答
0

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

对于从数据呈现 HTML，我建议您还考虑模板和/或数据绑定库，例如，允许您在 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>
于 2013-07-23T09:05:11.513 回答