2

我在 MVC3 项目的 .aspx 视图中有一个表格。我在 MVC3 中使用 .aspx 视图而不是 Razor 引擎或 .cshtml 视图。我的 jquery 中有一个承保函数，它从控制器中获取一个 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 完全陌生，所以如果我错过了回答这个问题所需的任何内容，请告诉我，请尽可能详细。

4

3 回答 3

6

您可以考虑两种方法。

  1. 让您的控制器操作直接返回包含表数据的部分视图，这样您就不必执行 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);
}

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

<%@ 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"); }
});
于 2012-10-09T10:06:24.183 回答
0

我会考虑使用 jQuery 插件，比如 jqGrid (http://www.trirand.com/blog/) 可以从 JSON 创建表

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

于 2012-10-09T09:58:34.590 回答
0

不确定返回 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);

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

于 2012-10-09T10:03:00.540 回答