json - 在 MVC3 中显示从 JSON 到表的数据

Question

我在 MVC3 项目的 .aspx View 中有一个表。我在 MVC3 中使用 .aspx View 而不是 Razor 引擎或 .cshtml View 。我的 jquery 中有 underwritten 函数，它从 Controller 中获取一个 JSON 对象，其中包含一些值。

function GetUsers() {
    $.ajax({
        url: ('/Home/GetUsers'),
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(),

        success: function (result) {
            alert(result.length);
            var partnersTable = $('#PartnersTable');
            partnersTable.html();

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

现在我的 View 中有一个表

<div id = "topGrid">
    <table id="PartnersTable" style="float: left; width: 49%">
        <th style="width: 75%">Partner</th>
        <th style="width:25%">Users</th>
    </table>

这就是我获取 JSON 对象的方式。现在它只是虚拟数据，但稍后会从数据库中填充

public JsonResult GetUsers()
        {
            var model = new List<UsersModel>();
            var item = new UsersModel();
            for (int i = 1; i <= 10; i++)
            {
                item.Partner = "Partner" + Convert.ToString(i);
                item.Count = i;
                model.Add(item);
            }
            return Json(model, JsonRequestBehavior.AllowGet);
        }

我需要在我的表中显示来自上述 JSON 对象的数据。我怎样才能做到这一点？

我是 MVC3 的新手，所以如果我遗漏了回答这个问题所需的任何内容，请告诉我，请尽可能详细。

Answer 1

您可以考虑两种方法。

1. 让您的 Controller 操作直接返回包含表数据的部分 View ，这样您就不必执行 javascript 模板
2. 使用 JSON 和做 javascript 模板

让我们看看第一种方法:

public ActionResult GetUsers()
{
    var model = new List<UsersModel>();
    for (int i = 1; i <= 10; i++)
    {
        var item = new UsersModel();
        item.Partner = "Partner" + Convert.ToString(i);
        item.Count = i;
        model.Add(item);
    }
    return PartialView(model);
}

接下来您将有一个相应的局部 View ，其中将包含表格的相应部分:

<%@ Control 
    Language="C#" 
    Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<MvcApplication1.Models.UsersModel>>" %>
<% foreach (var user in Model) { %>
    <tr>
        <td><%: user.Partner %></td>
        <td><%: user.Count %></td>
    </tr>
<% } %>

然后在您的主视图中您将拥有表格:

<table id="PartnersTable" style="float: left; width: 49%" data-url="<%= Url.Action("GetUsers", "Home") %>">
    <thead>
        <tr>
            <th style="width: 75%">Partner</th>
            <th style="width:25%">Users</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

最后使用 AJAX 填充表体:

var table = $('#PartnersTable');
$.ajax({
    url: table.data('url'),
    type: 'GET',
    cache: false,
    context: table,
    success: function (result) {
        this.html(result);
    },
    error: function () { alert("error"); }
});

现在让我们来看看第二种方法，它包括让 Controller 操作返回 JSON 并手动构建表的 HTML 模板:

public ActionResult GetUsers()
{
    var model = new List<UsersModel>();
    for (int i = 1; i <= 10; i++)
    {
        var item = new UsersModel();
        item.Partner = "Partner" + Convert.ToString(i);
        item.Count = i;
        model.Add(item);
    }
    return Json(users, JsonRequestBehavior.AllowGet);
}

然后:

var table = $('#PartnersTable');
$.ajax({
    url: datble.data('url'),
    type: 'GET',
    cache: false,
    context: table,
    success: function (users) {
        var tableBody = this.find('tbody');
        tableBody.empty();
        $.each(users, function(index, user) {
            $('<tr/>', {
                html: $('<td/>', {
                    html: user.Partner
                }).after($('<td/>', {
                    html: user.Count
                }))
            }).appendTo(tableBody);
        });
    },
    error: function () { alert("error"); }
});