Anzeigen von Daten aus JSON zu Tabelle in MVC3

Question

Ich habe eine Tabelle in meiner .aspx-Ansicht in MVC3-Projekt. Ich bin mit .aspx Ansichten in MVC3 anstelle von Razor-Engine oder .cshtml Ansichten. Ich habe die Underwritten-Funktion in meinem Jquery, die mir ein JSON-Objekt von Controller mit einigen Werten in es bekommt.

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

Jetzt habe ich eine Tabelle in meiner Ansicht

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

Dies ist, wie ich das JSON-Objekt erhalte. im Moment seine nur Dummy-Daten, aber wirdb e populaed von DB später

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

Ich muss die Daten aus obigem JSON-Objekt in meiner Tabelle anzeigen. Wie kann ich dies erreichen?

Ich bin völlig neu in MVC3, also lassen Sie mich bitte wissen, wenn ich etwas verpasst habe, die erforderlich ist, um diese Frage zu beantworten und bitte so detailliert wie möglich sein.

Answer 1

Es gibt 2 Ansätze, die Sie in Betracht ziehen können.

1. Lassen Sie Ihre Controller-Aktion direkt eine partielle Ansicht zurückgeben, die die Tabellendaten enthält, so dass Sie kein Javascript-Templating durchführen müssen
2. Verwenden Sie JSON und tun javascript templating

Schauen wir uns den ersten Ansatz an:

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

Danach haben Sie eine entsprechende Teilansicht, die den entsprechenden Abschnitt der Tabelle enthält:

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

und dann in der Hauptansicht die Tabelle:

<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>

und verwenden Sie schließlich AJAX, um den Tabellenkörper aufzufüllen:

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

Schauen wir uns nun den zweiten Ansatz an, der darin besteht, dass die Controller-Aktion JSON zurückgibt und die HTML-Vorlage der Tabelle manuell erstellt wird:

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

und dann:

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

Ich würde mit einem jQuery-Plugin, so etwas wie jqGrid (http://www.trirand.com/blog/) können Tabellen aus JSON erstellen aussehen

Alternativ könnten Sie eine partielle Ansicht erstellen und diese im Controller rendern und das generierte HTML zurückgeben, um es auf dieser Seite einzufügen. Ermöglicht eine stark typisierte Definition der Tabelle.

Answer 3

Ich bin nicht sicher, ob die Rückgabe von JSON hier die beste Option ist. Mit JSON, benötigen Sie einige Mittel zur Übersetzung der JSON-Objekt in Elemente, die auf dem DOM platziert werden können. Zahlreiche Strategien für das tun, einschließlich Templating und den Aufbau der Elemente bis durch Code.

In diesem Szenario ist es vielleicht besser, wenn Sie Ihre Controller-Methode auf HTML anstelle von JSON aus einer Teilansicht zurücksenden . Dazu müssen Sie folgende Schritte durchführen.

Veränderung:-

   contentType: 'application/json'

zu:-

   contentType: 'html'

Ändern Sie Ihre Controller-Methode so, dass sie ein ActionResult statt eines JsonResult zurückgibt.

Fügen Sie eine neue Teilansicht hinzu, die die gesamte Tabelle wiedergibt.

Behalten Sie das div #topGrid in Ihrem Markup.

Veränderung:-

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

An:-

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

Ein anderer Ansatz, der aber meiner Meinung nach viel besser zu Ihren Anforderungen passt.