BootStrap-table 在傳統Asp.NET（webform）中基於ashx（一般處理程序）的新建與修改

寫在前面 ：

就目前的形式來看Asp.NET webform的模式已經顯得過時了，可是在許多高校教學中，和一些外包項目中還大量充斥着舊代碼的使用，在傳統拖控件的時代顯然，gridview控件已經不能滿足大家的實際使用

之前已經寫了如何使用bootstraptable

鏈接：https://blog.csdn.net/weixin_42550800/article/details/86767430

新建：

前端html代碼（需要引入bootstrap）

css：

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

js：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

1.點擊新建後彈出的遮罩窗體代碼：

<div class="modal fade"id="addModal"tabindex="-1"role="dialog"aria-labelledby="addModalLabel"data-backdrop="false">
<div class="modal-dialog"role="document"style="margin-top:10%;">
<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="addModalLabel">教師信息</h4>
</div>
<div class="modal-body">
 
<form id="add_form_modal"class="form-horizontal">
<div class="form-group">
<div class="col-sm-3 col-md-3">
<label class="control-label"for="add_interface_name">工號</label>
</div>
 
<div class="col-sm-9 col-md-9">
<asp:TextBox class="form-control" ID="TextBox1" runat="server"></asp:TextBox>
</div>
<label class="err-info-modal"></label>
</div>
 
<div class="form-group">
<div class="col-sm-3 col-md-3 ">
<label class="control-label"for="add_port">姓名</label>
</div>
 
<div class="col-sm-9 col-md-9">
<asp:TextBox class="form-control" ID="TextBox2" runat="server"></asp:TextBox>
</div>
    <label class="err-info-modal"></label>
</div>
 
<div class="form-group">
<div class="col-sm-3 col-md-3">
<label class="control-label"for="add_URL">性別</label>
</div>
 
<div class="col-sm-9 col-md-9">
<asp:TextBox class="form-control" ID="TextBox3" runat="server"></asp:TextBox>
</div>
<label class="err-info-modal"></label>
</div>
 
<div class="form-group">
<div class="col-sm-3 col-md-3">
<label class="control-label"for="res_status">初始密碼</label>
</div>
 
<div class="col-sm-9 col-md-9">
    <asp:TextBox class="form-control" ID="TextBox4" runat="server"></asp:TextBox>
</div>
    <label class="err-info-modal"></label>
</div>


</form>
 
<div class="modal-footer">
<button type="button"class="btn btn-default btn_reset_c"data-dismiss="modal"><span
class="glyphicon glyphicon-remove"aria-hidden="true"></span>取消
</button>
 
<button type="reset"id="btn_add_reset"class="btn btn-default ">
<span class="glyphicon glyphicon-share-alt"aria-hidden="true"></span>重置
</button>
 <asp:Button ID="Button1" runat="server" Text="保存"  class="btn btn-primary" OnClick="Button1_Click" />
</div>
</div>
</div>
</div>
</div>

 2.js代碼：

        $("#btn_add").on("click",function (){
            $("#addModal").modal({
            keyboard: true
            });
        });

3.後端代碼：

注意！！！後端連接數據庫代碼略去，請根據需求修改代碼

 protected void Button1_Click(object sender, EventArgs e)
    {

        int result = addTeacher();
        if (result == 1)
        {
            Response.Write("<script>alert('添加成功！')</script>");
            Response.Write("<script > window.location.href='a_classManage.aspx' ; </script> ");
        }
        else
        {
            Response.Write("<script>alert('添加失敗！')</script>");
            Response.Write("<script > window.location.href='a_classManage.aspx' ; </script> ");
        }
    }
//添加教師
 protected int addTeacher()
    {
        DAL dAL = new DAL();
        teacher teacher = new teacher();
       
        teacher.teacherID = TextBox1.Text.Trim();
        teacher.teachername = TextBox2.Text.Trim();
        teacher.teachersex = TextBox3.Text.Trim();
        teacher.teapwd = TextBox4.Text.Trim();
        return dAL.TechaerAdd(teacher); 
    }

 修改：

1.html彈出層代碼：

        <div class="modal fade"id="modModal"tabindex="-1"role="dialog"aria-labelledby="addModalLabel"data-backdrop="false">
<div class="modal-dialog"role="document"style="margin-top:10%;">
<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="addModalLabel">教師信息</h4>
</div>
<div class="modal-body">
 
<form id="add_form_modal"class="form-horizontal">
<div class="form-group">
<div class="col-sm-3 col-md-3">
<label class="control-label"for="add_interface_name">工號</label>
</div>
 
<div class="col-sm-9 col-md-9">
<asp:TextBox class="form-control" ID="TextBox5" runat="server" disabled="disabled"></asp:TextBox>
</div>
<label class="err-info-modal"></label>
</div>
 
<div class="form-group">
<div class="col-sm-3 col-md-3 ">
<label class="control-label"for="add_port">姓名</label>
</div>
 
<div class="col-sm-9 col-md-9">
<asp:TextBox class="form-control" ID="TextBox6" runat="server"></asp:TextBox>
</div>
    <label class="err-info-modal"></label>
</div>
 
<div class="form-group">
<div class="col-sm-3 col-md-3">
<label class="control-label"for="add_URL">性別</label>
</div>
 
<div class="col-sm-9 col-md-9">
<asp:TextBox class="form-control" ID="TextBox7" runat="server"></asp:TextBox>
</div>
<label class="err-info-modal"></label>
</div>
 
<div class="form-group">
<div class="col-sm-3 col-md-3">
<label class="control-label"for="res_status">初始密碼</label>
</div>
 
<div class="col-sm-9 col-md-9">
    <asp:TextBox class="form-control" ID="TextBox8" runat="server"></asp:TextBox>
</div>
    <label class="err-info-modal"></label>
</div>


</form>
 
<div class="modal-footer">
<button type="button"class="btn btn-default btn_reset_c"data-dismiss="modal"><span
class="glyphicon glyphicon-remove"aria-hidden="true"></span>取消
</button>
 

 <asp:Button ID="Button2" runat="server" Text="保存"  class="btn btn-primary" OnClick="Button2_Click" />
</div>
</div>
</div>
</div>
</div>

2.js代碼：

  $("#btn_edit").on("click",  function () {
            var rows = $("#table").bootstrapTable("getSelections");    // getSelections用來獲取所選中的行
            
            var row = rows[0];    // 選中的第一行
            if (row == null) {
                alert("請選擇需要修改的項");
                return;
            }
            $("#modModal").modal({
            keyboard: true
            });

            
            $("#ContentPlaceHolder1_ContentPlaceHolder2_TextBox5").val(row.teacherID);
            $("#ContentPlaceHolder1_ContentPlaceHolder2_TextBox6").val(row.teachername);
            $("#ContentPlaceHolder1_ContentPlaceHolder2_TextBox7").val(row.teachersex);
            $("#ContentPlaceHolder1_ContentPlaceHolder2_TextBox8").val(row.teapwd);
           
        });

後端代碼：

 protected void Button2_Click(object sender, EventArgs e)
    {

        int result = updateTeacher();
        if (result == 1)
        {
            Response.Write("<script>alert('修改成功！')</script>");
            Response.Write("<script > window.location.href='a_classManage.aspx' ; </script> ");
        }
        else
        {
            Response.Write("<script>alert('修改失敗！')</script>");
            Response.Write("<script > window.location.href='a_classManage.aspx' ; </script> ");
        }
    }
    protected int updateTeacher()
    {
        DAL dAL = new DAL();
        teacher teacher = new teacher();

        teacher.teacherID = TextBox5.Text.Trim();
        teacher.teachername = TextBox6.Text.Trim();
        teacher.teachersex = TextBox7.Text.Trim();
        teacher.teapwd = TextBox8.Text.Trim();
        return dAL.TechaerUpdate(teacher);
    }

 

參考文章：https://blog.csdn.net/XHHUANG1618/article/details/77884426