综合练习 html代码 异步CRUD
一直以来对异步不是很熟悉，今天一天都用来练习异步的增删改查，熟悉并巩固基础知识，期间遇到一些问题，很烦，不过都解决了。这个东西用时几个小时，终极目标是在半个小时之内把这套弄完。以下是代码仅供自己记录，以便在后面继续练习的时候，作参考。顺便提一句！基础真的他妈的很重要！所以，下周把产品弄上线后，再把cs代码贴上来，然后捣鼓捣鼓数据库。
先上最终效果图
a、经过正确分页的主页面
b、增加模态框（编辑模态框也差不多，只不过里面是嵌套的iframe）
c、增加、编辑、删除成功后弹出的模态框（之前一直对添加成功后先弹个框框出来然后再慢慢消失感兴趣，现在自己终于搞定咯！嘿嘿嘿，(●'◡'●)）
1、整个单页文件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link href="../Content/tablecloth.css" rel="stylesheet" />
<script src="../Scripts/jquery-3.1.1.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
<script src="../Scripts/tablecloth.js"></script>
<script type="text/javascript">
$(function () {
InitTable();
//绑定添加事件按钮
bindAddClickEvent();
});
function InitTable(postData) {
$.ajax({
url: "/Handler/StudentList.ashx",
data: postData,
dataType:"json",
type: "POST",
success: function (data) {
$("#tbBody").html("");
for (var key in data.StudentList) {
var str = "<tr>";
str += "<td>" + data.StudentList[key].id + "</td>";
str += "<td>" + data.StudentList[key].name + "</td>";
str += "<td>" + data.StudentList[key].year + "</td>";
str += "<td>" + data.StudentList[key].classid + "</td>";
str += "<td><a class='btn btn-info detailLink' href='#' sid='" + data.StudentList[key].id + "'>详情</a>";
str += "<a class='btn btn-success editLink' href='#' sid='" + data.StudentList[key].id + "'>编辑</a>";
str += "<a class='btn btn-danger deleteLink' href='#' sid='" + data.StudentList[key].id + "'>删除</a></td>";
str += "</th>";
$("#tbBody").append(str);
}
//以下点击事件一定是异步加载完数据后才能绑定的，毫无疑问，知道吗傻逼
//分页标签加入页脚
$("#navHtml").html(data.NavHtml);
//绑定分页标签点击事件(这个必须要这样，如果不这个样，永远只显示第一页，很伤！)
bindNavClickEvent();
//绑定详情点击事件
bindDetailLinkClickEvent();
//绑定编辑点击事件
bindEditLinkClickEvent();
//绑定删除点击事件
bindDeleteLinkClickEvent();
}
});
}
//绑定分页标签点击事件
function bindNavClickEvent() {
$(".pageLink").click(function () {
var href = $(this).attr("href");
var postData = href.substr(href.lastIndexOf("?") + 1);
InitTable(postData);
return false;
})
}
//绑定详情点击事件
function bindDetailLinkClickEvent() {
}
//绑定编辑点击事件
function bindEditLinkClickEvent() {
$(".editLink").click(function () {
var txtId = $(this).attr("sid");
$("#EditFrame").attr("src", "/Handler/EditStudent.aspx?txtId=" + txtId);
$("#EditModal").modal('show');
//点击提交子页面中的内容
$("#edit").click(function () {
var domFrame = $("#EditFrame")[0];
//调用子页面中的submitFrame方法
domFrame.contentWindow.submitFrame();
})
});
}
//子页面中修改成功后来调用父页面中的方法
function afterEditSuccess() {
$("#EditModal").modal('hide');
var str = "<p class='label label-success'>修改成功</p>"
$("#successModal11").html("").append(str);
$("#successModal").modal('show');
setTimeout(function () {
$("#successModal").modal('hide');
}, 1000);
setTimeout(function () {
InitTable();
}, 1000);
}
//绑定删除点击事件
function bindDeleteLinkClickEvent() {
$(".deleteLink").click(function () {
var id=$(this).attr("sid");
$.get("/Handler/DeleteStudent.ashx", { txtId: id }, function (data) {
if (data == "ok") {
var str = "<p class='label label-success'>删除成功！</p>";
$("#successModal11").html("").append(str);
$("#successModal").modal('show');
setTimeout(function () {
$("#successModal").modal('hide');
}, 1000);
setTimeout(function () {
InitTable();
}, 1000);
} else {
alert("删除失败。");
}
});
});
}
//绑定添加事件
function bindAddClickEvent() {
$("#add").click(function () {
$.ajax({
url: "/Handler/AddStudent.ashx",
data: {
txtName: $("#txtName").val(),
txtYear: $("#txtYear").val(),
txtClassId:$("#txtClassId").val()
},
type: "POST",
success: function (data) {
if (data == "ok") {
//添加成功，将框里的内容改变为成功，然后再消失
var str = "<h1 class='label label-success label-lg'>添加成功</h1>"
//模态框自动关闭
$("#AddModal").modal('toggle');
$("#successModal11").html("").append(str);
$("#successModal").modal('show');
setTimeout(function () {
$("#successModal").modal('hide');
}, 1000);
setTimeout(function () {
InitTable();
}, 1000);
} else {
alert("添加失败！");
}
}
})
})
}
</script>
</head>
<body>
<!-- 增加学生Button -->
<button type="button" class="btn btn-primary pull-right" data-toggle="modal" data-target="#AddModal">
点击增加学生
</button>
<table>
<thead>
<tr>
<th>学生编号</th>
<th>学生姓名</th>
<th>学生年龄</th>
<th>学生班级</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbBody"></tbody>
</table>
<div id="navHtml"></div>
<!-- 编辑Modal -->
<div class="modal fade" id="EditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" style="100%" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">编辑学生基本信息</h4>
</div>
<div class="modal-body" id="EditDiv">
<iframe src="javascript:void(0)" id="EditFrame" width="100%" height="100%" frameborder="0"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="edit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- 增加Modal -->
<div class="modal fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">添加学生</h4>
</div>
<div class="modal-body" style="100%;overflow:auto;">
<table class="table table-bordered">
<thead>
<tr class="info">
<th>学生姓名</th>
<th>学生年龄</th>
<th>学生班级</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id="txtName" /> </td>
<td><input type="text" id="txtYear" /> </td>
<td><input type="text" id="txtClassId" /> </td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" id="add" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- 弹出成功div -->
<!-- Modal -->
<div class="modal fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">返回消息</h4>
</div>
<div id="successModal11" class="modal-body">
</div>
</div>
</div>
</div>
</body>
</html>
2、编辑窗体的代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EditStudent.aspx.cs" Inherits="WebApplication1.Handler.EditStudent" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<script src="../Scripts/jquery-3.1.1.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
<script>
function submitFrame() {
var formParam = $("#form1").serializeArray();//序列化表格内容为字符串
$.ajax({
url: "/Handler/EditStudent.aspx",
data: formParam,
type: "POST",
success: function (data) {
if (data == "ok") {
window.parent.window.afterEditSuccess();
} else {
alert("修改失败！");
}
}
})
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table class="table table-bordered">
<thead>
<tr class="info">
<th>学生编号</th>
<th>学生姓名</th>
<th>学生年龄</th>
<th>学生班级</th>
</tr>
</thead>
<tbody>
<tr>
<td><%= Student.id%><input type="hidden" name="txtId" value="<%= Student.id %>" /></td>
<td>
<input type="text" name="txtName" value="<%=Student.name%>" /></td>
<td>
<input type="text" name="txtYear" value="<%= Student.year%>" /></td>
<td>
<input type="text" name="txtClass" value="<%= Student.classid%>" /></td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>