showing data from JSON to table in MVC3

问题:

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>

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

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

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.

回答1:

There are 2 approaches you might consider.

1. Have your controller action directly return a partial view containing the table data so that you don't have to do javascript templating
2. Use JSON and do javascript templating

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>

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

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

and then:

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

回答2:

I'd look at using a jQuery plugin, something like jqGrid (http://www.trirand.com/blog/) can create tables from JSON

Alternatively you could create a partial view and render this in the controller and return the generated HTML to populate on this page. Allows for strongly typed definition of the table.

回答3:

Not sure if returning JSON is your best option here. With JSON, you'll need some means of translating the JSON object into elements that can be placed on the DOM. Numerous strategies for doing that, including templating and building the elements up by code.

In this scenario, you may be better off getting your controller method to send back HTML instead of JSON from a partial view. To do this, you'll need to do the following.

Change:-

   contentType: 'application/json'

to:-

   contentType: 'html'

Change your controller method to return an ActionResult instead of a JsonResult.

Add a new partial view which renders the whole table.

Retain the div #topGrid in your markup.

Change:-

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

To:-

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

Different approach, but suits your requirement much better, I feel.