Question

我在MVC3项目的.aspx视图中有一个表。我在MVC3中使用.aspx视图而不是Razor引擎或.cshtml视图。我在我的jquery中有一个underwritten函数，它从控制器中获取了一个带有一些值的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"); }
    });
}

现在我的视图中有一张表

<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对象的方式。现在它只是虚拟数据，但稍后将从DB中推广

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

您可以考虑两种方法。

让您的控制器操作直接返回包含表数据的部分视图，这样您就不必进行javascript模板化
使用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);
}

接下来，您将拥有一个相应的局部视图，其中包含表格的相应部分：

<%@ 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"); }
});

现在让我们看一下第二种方法，它包括让控制器操作返回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"); }
});

Answer 2

我会看一下使用jQuery插件，比如jqGrid（http://www.trirand.com/blog/）可以从JSON创建表

或者，您可以创建局部视图并在控制器中呈现它，并返回生成的HTML以填充此页面。允许表格的强类型定义。

Answer 3

不确定返回JSON是否是您的最佳选择。使用JSON，您需要一些方法将JSON对象转换为可以放在DOM上的元素。这样做的策略很多，包括通过代码模板化和构建元素。

在这种情况下，您可能最好将控制器方法设置为从部分视图发回HTML而不是JSON。为此，您需要执行以下操作。

变化： -

   contentType: 'application/json'

于： -

   contentType: 'html'

更改控制器方法以返回ActionResult而不是JsonResult。

添加一个渲染整个表格的新局部视图。

在标记中保留div #topGrid。

变化： -

var partnersTable = $('#PartnersTable');
partnersTable.html();

要： -

var tableContainer = $('#topGrid');
tableContainer.html(result);

不同的方法，但我觉得更适合你的要求。

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

3 个答案: