在MVC中动态读取JSON数据创建表格

时间:2023-03-09 02:22:00
在MVC中动态读取JSON数据创建表格
//使用getJSON 

// ("@Url.Action("GetAllUsers","User")" ,json文件的路径.也可以是 /Member/User/GetAllUsers或者是GetAllUsers.json

$.getJSON("@Url.Action("GetAllUsers","User")", function (json) {

//初始化表格(可以是其它内容)
var htmls = ['<table class="table">']; //向表格添加标题行开始(横向)
htmls.push('<tr>'); //遍历Json中k部分(json表示格式 k:v ,如 UserName:admin)
for (var title in json[]) htmls.push('<td>' + title + '</td>'); //向表格添加标题行结束
htmls.push('</tr><tbody>'); //循环读取Json数据,获取 V 部分
for (var i = ; i < json.length; i++) { //添加行开始
htmls.push('<tr>'); //遍历每一个Json数据组,获取其中每一个value部分并添加.
for (var v in json[i]) htmls.push('<td>' + json[i][v] + '</td>'); //添加行结束
htmls.push('</tr>');
} //添加结束标记
htmls.push('</tbody></table>'); //添加整个表格
$('#userTable').html(htmls.join(''));
}); //要添加表格的位置 <div id="userTable"></div>

JSON数据格式

[
{
"UserID":,
"UserName":"admin",
"DisplayName":"管理员",
"Email":"aaaaaaa@126.com" },{
"UserID":,
"UserName":"test",
"DisplayName":"测试",
"Email":"ccccccc@126.com"
}
]