2

MVC3 プロジェクトの .aspx ビューにテーブルがあります。Razor エンジンまたは .cshtml ビューの代わりに、MVC3 で .aspx ビューを使用しています。私の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

考えられるアプローチは 2 つあります。

  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 テンプレートを手動で作成する 2 番目のアプローチを見てみましょう。

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

jqGrid (http://www.trirand.com/blog/) のようなもので、JSON からテーブルを作成できます。

または、部分ビューを作成してコントローラーでレンダリングし、生成された HTML を返してこのページに入力することもできます。テーブルの厳密に型指定された定義を可能にします。

于 2012-10-09T09:58:34.590 に答える
0

ここで JSON を返すことが最善の選択肢かどうかはわかりません。JSON では、JSON オブジェクトを DOM に配置できる要素に変換する手段が必要になります。コードによる要素のテンプレート化や構築など、それを行うための多数の戦略。

このシナリオでは、部分的なビューからの JSON ではなく、コントローラー メソッドで HTML を返す方がよい場合があります。これを行うには、次のことを行う必要があります。

変化する：-

   contentType: 'application/json'

に：-

   contentType: 'html'

コントローラ メソッドを変更して、JsonResult ではなく ActionResult を返します。

テーブル全体をレンダリングする新しい部分ビューを追加します。

マークアップで div #topGrid を保持します。

変化する：-

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

に：-

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

アプローチは異なりますが、要件にはるかに適していると思います。

于 2012-10-09T10:03:00.540 に答える