使用JQuery解析asp.net MVC控制器返回的json数据并用动态生成的表格显示解析的数据
ShowClassInfo.cshtml
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>班级信息title>
<link rel="stylesheet" href="~/Content/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="~/Content/MyWorkPlace/ShowClassInfo.css"/>
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript">script>
<script src="~/Scripts/MyAdd/show-classes-message.js" type="text/javascript">script>
head>
<body>
<h2>班级信息h2>
<div id="div">
<div>
<button id="query" name="btn" class="btn btn-primary">
<span class="glyphicon glyphicon-search">span>查询
button>
<input id="inputText" type="text"/>
<button type="button" class="btn btn-primary" id="addBtn">
<span class="glyphicon glyphicon-plus">span>添加
button>
<button type="button" class="btn btn-primary" id="alter">
<span class="glyphicon glyphicon-edit">span>修改
button>
<button type="button" class="btn btn-primary" id="del" >
<span class="glyphicon glyphicon-trash">span>删除
button>
div>
<table id="tab">
<tr >
<td>班级IDtd>
<td>专业号td>
<td>班级人数td>
<td>班级名td>
<td>毕业年份td>
<td>td>
tr>
table>
div>
body>
html>
现在要做的是往table标签里添加数据库查询出来的数据，
要动态生成表格的原因：对数据库的增删改是不可避免的，
所以静态表格是无法显示多变数据库里的数据的。
public ActionResult ShowClassInfo()
{
//当客户端来的Ajax请求时将执行if语句里的内容
if (Request.IsAjaxRequest())
{
#region 初始化sql语句并用于临时接收实体属性的变量
List ClassesInfo = new List();
//ClassesInfo用于存放ClassTable对象即从数据库查询出来的结果，并用于返回到前端
string sqlContent = "select ClassID,ClassName,MajorID,HumanNumber, GraduateYear from classes";
DataTable dt = SqlHelper.ExecuteDataTable(sqlContent);
//SqlHelper.ExecuteDataTable()是自己写的一个静态类里的方法
//用于执行sql语句中的查询语句，执行后并返回一个DataTable
int id;
int majorid;
int number;
int? year;
string name;
int col = dt.Columns.Count;
#endregion
#region 把查询结果添加到集合里
foreach (DataRow row in dt.Rows)
{
int i = 0;
id =(int) row[i++];
name = (string) row[i++];
majorid = (int) row[i++];
number = (int) row[i++];
year = (int?) row[i];
ClassesInfo.Add(new ClassTable(id,name,number,majorid,year));
}
#endregion
return Json(ClassesInfo, JsonRequestBehavior.AllowGet);
}
return View();
} <script src="~/Scripts/MyAdd/show-classes-message.js" type="text/javascript">script>show-classes-message.js代码如下：
//data是从服务器端返回的查询结果，也就是listClassesInfo，
//return Json()方法会把ClassesInfo序列化为json格式的数据发送到前端
//用于ClassesInfo是一个对象集合，所以前端解析json数据时需要两重循环遍历
function(data) {
for (var i = 0, length = data.length; i < length; i++)
{
var r = "row" + i;
var row = $("其中attr(“class”,”NewAdd”)等是用于设置元素的属性，本例中给每一个tr元素设置了class和id
给动态添加的元素最好设置上id，方便后面对动态添加的元素进行操作。
appendTo()用于把元素添加到另一个元素上去
例：
A.appendTo(B)
//A元素会被添加到B元素下方，即A将作为B的子节点下面这段代码主要用于动态添加按钮并为按钮注册事件
var edit = $("元素
//$(this).parent().parent()在这里指的是元素
var num = $(this).parent().parent().children("td:eq(2)").text();
var name = $(this).parent().parent().children("td:eq(3)").text();
var year = $(this).parent().parent().children("td:eq(4)").text();
});
$("").attr("class", "glyphicon glyphicon-edit").appendTo(alter);
alter.appendTo(edit);
需要注意的是：
1.一般来说动态生成的按钮需要动态绑定事件，因为htm元素l加载完成后才会注册javascript的事件，
然而动态生成的按钮一般都是由事件触发的，如果动态生成的按钮注册的事件不是生成按钮元素时绑定的话，
基本上在其它地方注册的事件是不会执行的，因为那时根本不存在按钮。
你可能感兴趣的:(前端Js,asp.net,MVC,json,数据,mvc,jquery,asp.net)