C# WebForm显示bootstrap模态对话框

发布于:2025-03-23 ⋅ 阅读:(25) ⋅ 点赞:(0)

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这样来获取数据,加油!!!