使用JQuery解析asp.net MVC控制器返回的json数据并用动态生成的表格显示解析的数据

最新推荐文章于 2021-08-05 13:56:27 发布

HurricanGod

最新推荐文章于 2021-08-05 13:56:27 发布

阅读量1.3k

点赞数

分类专栏：前端Js asp.net MVC 文章标签： json 数据 mvc jquery asp.net

本文链接：https://blog.csdn.net/qq_34332010/article/details/53041852

版权

MVC 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

前端Js

4 篇文章 0 订阅

订阅专栏

asp.net

3 篇文章 0 订阅

订阅专栏

ShowClassInfo.cshtml

<!DOCTYPE html>
<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>班级ID</td>
            <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<ClassTable> ClassesInfo = new List<ClassTable>();

                //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是从服务器端返回的查询结果，也就是list<ClassTable>ClassesInfo，
//return Json()方法会把ClassesInfo序列化为json格式的数据发送到前端
//用于ClassesInfo是一个对象集合，所以前端解析json数据时需要两重循环遍历

function(data) {

   for (var i = 0, length = data.length; i < length; i++) 
   {
       var r = "row" + i;
       var row = $("<tr></tr>").attr("id", r).attr("class","NewAdd");
       $("#tab").append(row);
       var k = 0;
       for (var j in data[i]) {
          var col = r + k;
          var td = $("<td></td>").text(data[i][j]).attr("id",col);
          td.appendTo(row);
          k=k+1;
        }

       var edit = $("<td></td>");
       edit.appendTo(row);
       var alter = $("<button></button>")
                   .attr("class", "btn btn-primary")
                   .attr("type", "button").attr("id", r + k++)
                   .click(function() {
                   alert("update");
                   var id = $(this).parent().parent().children("td:eq(0)").text();
                   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();
                    });
       $("<span></span>").attr("class", "glyphicon glyphicon-edit").appendTo(alter);
       alter.appendTo(edit);
                }
            }

其中attr(“class”,”NewAdd”)等是用于设置元素的属性，本例中给每一个tr元素设置了class和id
给动态添加的元素最好设置上id，方便后面对动态添加的元素进行操作。

appendTo()用于把元素添加到另一个元素上去
例：

A.appendTo(B)
//A元素会被添加到B元素下方，即A将作为B的子节点

下面这段代码主要用于动态添加按钮并为按钮注册事件

var edit = $("<td></td>");
       edit.appendTo(row);
       var alter = $("<button></button>")
                   .attr("class", "btn btn-primary")
                   .attr("type", "button").attr("id", r + k++)
                   .click(function() {
                   alert("update");
                   var id = $(this).parent().parent().children("td:eq(0)").text();
//$(this)在这里指的是alter
//$(this).parent()在这里指的是<td>元素
//$(this).parent().parent()在这里指的是<tr>元素
                   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();
                    });
       $("<span></span>").attr("class", "glyphicon glyphicon-edit").appendTo(alter);
       alter.appendTo(edit);