使用jQuery和Ajax显示列表数据

Question

我有以下结构:

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表中显示人员列表.

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