利用bootstrap和webform的异步CRUD及分页

综合练习 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="width: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">&times;</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">&times;</span></button>
                       <h4 class="modal-title" id="myModalLabel">添加学生</h4>
                   </div>
                   <div class="modal-body" style="width: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">&times;</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>

__EOF__

本文作者：徐徐赵赵
本文链接：https://www.cnblogs.com/xuxuzhaozhao/p/6535327.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   xuxuzhaozhao  阅读(2194)  评论(1)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
AI IDE Trae