数据显示,从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.
- 让您的控制器动作直接返回一个局部视图包含表的数据,这样你就不必做的JavaScript模板
- 使用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屋!