当前位置: 首页 > news >正文

C# WebForm显示bootstrap模态对话框

1、在aspx中添加,将依赖添加进来

 <link rel="stylesheet" href="Content/bootstrap.min.css" />
 <script src="Scripts/jquery-3.7.0.min.js"></script>
 <script src="Scripts/bootstrap.min.js"></script>

2、添加模态对话框的div

<!-- 添加对话框 -->
<div class="modal fade" id="AddModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="AddModalLabel">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

3、我封装了两个C#函数来显示和隐藏bootstrp的对话框

public void showModal(string id)
{
    string script = "var myModal = new bootstrap.Modal(document.getElementById('" +
        id +
        "'), {\r\n  keyboard: false\r\n});" +
        "myModal.show()";
    ClientScript.RegisterStartupScript(this.GetType(), "alert", script, true);
}

public void hideModal(string id)
{
    string script = "var myModal = new bootstrap.Modal(document.getElementById('" +
        id +
        "'), {\r\n  keyboard: false\r\n});" +
        "myModal.hide()";
    ClientScript.RegisterStartupScript(this.GetType(), "alert", script, true);
}

这样调用

protected void BtnAdd_Click(object sender, EventArgs e)
{
    // 弹框获取信息
    showModal("AddModal");
}

至于获取数据其他的就要交给你去将aspx中的对话框部分,稍作修改,将button改成asp:Button这样来获取数据,加油!!!

相关文章:

  • 《燃气管网运行工》考试资料分享,附答案
  • 回调方法传参汇总
  • Nginx:access_log访问状态码499解决
  • rust学习笔记19-泛型
  • 机器学习——KNN数据集划分
  • 深度学习1—Python基础
  • 「一起学后端」Nest.js + MySQL 查询方法教学文档
  • Docker Compose 常用命令详解
  • Cursor平替免费软件开发工具使用感受和推荐
  • vim的一般操作(分屏操作) 和 Makefile 和 gdb
  • 从零到一开发一款 DeepSeek 聊天机器人
  • 【支持二次开发】基于YOLO系列的车辆行人检测 | 含完整源码、数据集、环境配置和训练教程
  • 程序算法基础
  • 思源配置阿里云 OSS 踩坑记
  • 寻找左边第一个更小值
  • RAG(Retrieval-Augmented Generation)基建之PDF解析的“魔法”与“陷阱”
  • 感知识别算法Jetson环境部署测试记录
  • 【AVRCP】深度剖析 AVRCP 中 Generic Access Profile 的要求与应用
  • RHCE 使用nginx搭建网站
  • Linux进程信号(下:补充)
  • 东风着陆场近日气象条件满足神舟十九号安全返回要求
  • 武汉一季度GDP为4759.41亿元,同比增长5.4%
  • “五一”假期,又有多地将向社会开放政府机关食堂
  • 中公教育薪酬透视:董监高合计涨薪122万,员工精简近三成
  • 从“高阶智驾”到“辅助驾驶”,上海车展上的“智驾”宣发变调
  • 剪纸纹样“流动”在水乡,谁不忆江南