数据显示，从JSON到表中MVC3 [英] showing data from JSON to table in MVC3

问题描述

我有一个表在MVC3项目我的.aspx视图。
我使用的.aspx在MVC3而不是剃刀引擎或.cshtml的意见看法。
我在我的jQuery的包销功能，获取我一个JSON对象从控制器的一些值了。

I have a table in my .aspx view in MVC3 project. I am using .aspx views in MVC3 instead of Razor engine or .cshtml views. I have the underwritten function in my jquery that gets me a JSON object from controller with some values in it.

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

现在我有一个表在我看来

Now I have a table in my 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对象。现在它只是虚拟的数据，但来自DB populaed willbë后

This is how I am getting the JSON object. right now its just dummy data but willb e populaed from DB later

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对象中的数据。
我怎样才能做到这一点？

I need to show the data from above JSON object in my table. how can I achieve this?

我完全新MVC3所以请让我知道如果我错过了所需要回答这个问题，并请尽可能详细东西，你可以。

I am utterly new to MVC3 so please let me know if I have missed anything that is required to answer this question and please be as detailed as you can.

推荐答案

有2接近，你可能会考虑。

There are 2 approaches you might consider.

1. 让您的控制器动作直接返回一个局部视图包含表的数据，这样你就不必做的JavaScript模板


2. 使用JSON和JavaScript的做模板

让我们来看看第一种方式：

Let's see the first approach:

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);
}

接下来，您将有将包含表的相应部分相应的局部视图：

Next you will have a corresponding partial view that will contain the respective section of the table:

<%@ 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>
<% } %>

然后你的主视图内，您将有表：

and then inside your main view you will have the table:

<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来填充表体：

and finally use AJAX to populate the body of the table:

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模板：

Now let's take a look at the second approach which consists into having the controller action return JSON and build the HTML template of the table manually:

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

这篇关于数据显示，从JSON到表中MVC3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！