从代码隐藏中打开 Bootstrap Modal

Question

有人知道如何从代码隐藏中打开 Twitter 引导模式吗？

我想根据保存时的一些要求打开模式。像“嘿，没有库存，选择以下选项之一继续（丢弃、保留...）并按下该按钮（这可能会进行回发以继续）”

我正在使用 ASP.NET Web 表单。

Answer 1

默认情况下，Bootstrap javascript 文件包含在结束正文标记之前

        <script src="vendors/jquery-1.9.1.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script src="vendors/easypiechart/jquery.easy-pie-chart.js"></script>
        <script src="assets/scripts.js"></script>
 </body>

我将这些 javascript 文件放入 body 标记之前的 head 部分，并编写了一个小函数来调用模式弹出窗口：

    <script src="vendors/jquery-1.9.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="vendors/easypiechart/jquery.easy-pie-chart.js"></script>
    <script src="assets/scripts.js"></script>

 <script type="text/javascript">
    function openModal() {
        $('#myModal').modal('show');
    }
</script>
</head>
<body>

然后我可以使用以下代码从代码隐藏中调用模式弹出窗口：

protected void lbEdit_Click(object sender, EventArgs e) {   
      ScriptManager.RegisterStartupScript(this,this.GetType(),"Pop", "openModal();", true);
}

Answer 2

最后我发现了阻止我从代码隐藏中显示模式的问题。人们一定认为这就像注册一个打开开头的客户端脚本一样简单，例如：

ScriptManager.RegisterClientScriptBlock(this, this.GetType(),"none",
    "<script>$('#mymodal').modal('show');</script>", false);

但这对我来说从来不起作用。

问题是，当模态位于 asp:Updatepanel 内时，Twitter Bootstrap Modals 脚本根本不起作用。模态的行为从每一方都失败，从代码隐藏到客户端，从客户端到代码隐藏（回发）。它甚至可以在模态的任何 js 执行时阻止回发，例如关闭按钮，您还需要执行一些服务器对象处置（对于一个肮脏的示例）

我已经通知了 bootstrap 工作人员，但他们回复了一个方便的“请给我们一个只有纯 html 而不是 asp 的失败场景。” 在我的家乡，这就是所谓的……好吧，Bootstrap 不支持纯 html 以外的任何内容。没关系，在 asp 上使用它。

我认为他们至少要看看他们在后台管理中所做的不同，我发现这导致了问题的主要部分，但是......（只是提示）

所以任何有问题的人，请放弃更新面板来尝试一下。

Answer 3

也许这个答案太晚了，但很有用。
为此，我们有 3 个步骤：
1- 在 HTML 中创建模态结构。
2- 创建一个按钮来调用java脚本中的函数，打开模态并在CSS中设置

display:none

。
3-通过后面代码中的函数调用此按钮。
您可以在下面的代码片段中看到这些步骤：

HTML 模式：

<div class="modal fade" id="myModal">
                <div class="modal-dialog">
                    <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">
                                Registration done Successfully</h4>
                        </div>
                        <div class="modal-body">
                            <asp:Label ID="lblMessage" runat="server" />
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">
                                Close</button>
                            <button type="button" class="btn btn-primary">
                                Save changes</button>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
            <!-- /.modal -->

隐藏按钮：

<button type="button" style="display: none;" id="btnShowPopup" class="btn btn-primary btn-lg"
                data-toggle="modal" data-target="#myModal">
                Launch demo modal
            </button>

脚本代码：

<script type="text/javascript">
        function ShowPopup() {
            $("#btnShowPopup").click();
        }
    </script>

背后代码：

protected void Page_Load(object sender, EventArgs e)
{
    ClientScript.RegisterStartupScript(this.GetType(), "alert", "ShowPopup();", true);
    this.lblMessage.Text = "Your Registration is done successfully. Our team will contact you shotly";
}

此解决方案是我使用过的所有解决方案之一。

Answer 4

这种打开模态框的方法不会为我显示模态框。我发现这是一个工作环境。

我删除了：

 ScriptManager.RegisterStartupScript(this,this.GetType(),"Pop", "openModal();", true);

我添加了一个名为 lblJavaScript 的 asp:label 并在调用后面的代码中：

lblJavaScript.Text = "<script language=\"JavaScript\">openModal()</script>";

现在将显示模态框。

Answer 5

上面的所有示例都应该可以工作，只需添加一个文档准备操作并更改对文本执行更新的顺序，还要确保您使用脚本管理器，否则这些都不适合您。这是后面代码中的文本。

aspx

<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
                <ContentTemplate>
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title"><asp:Label ID="lblModalTitle" runat="server" Text=""></asp:Label></h4>
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        </div>
                        <div class="modal-body">
                            <asp:Label ID="lblModalBody" runat="server" Text=""></asp:Label>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
                        </div>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>

背后代码

lblModalTitle.Text = "Validation Errors";
lblModalBody.Text = form.Error;
upModal.Update();
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$(document).ready(function () {$('#myModal').modal();});", true);

Answer 6

这样做怎么样：

1）用表单显示弹出窗口

2）使用 AJAX 提交表单

3) 在 AJAX 服务器端代码中，渲染响应将：

显示带有验证表单的弹出窗口或仅显示消息
关闭弹出窗口（也许会将您重定向到新页面）

Answer 7

仅供参考，

我之前在 jQuery 小部件中见过这种奇怪的行为。部分关键是将 updatepanel 放在模态中。这允许 updatepanel 的 DOM 与模式“保持一致”（但是它可以与 bootstrap 一起使用）。

Answer 8

这条线帮助我打开代码后面的 Bootstrap Modal

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "randomText", "$(document).ready(function () {$('#myModal').modal();});", true);

Answer 9

这对我有用。

aspx代码

<asp:UpdatePanel ID="update_panel_gallery" runat="server">
            <ContentTemplate>
                <div class="container">
                    <div class="row">
                        <asp:Repeater runat="server" ID="repAllGallery" OnItemCommand="repAllGallery_ItemCommand">
                            <ItemTemplate>
                                <div class="col-md-3 col-sm-12 pt-4">
                                    <div class="gallery">
                                        <div class="card cards">
                                            <asp:ImageButton runat="server" ID="imgAllGallery" class="img_gal" ImageUrl='<%# Eval("images","Admin/{0}") %>' CommandName="show" CausesValidation="false" />
                                            <div class="card-body text-center">

                                                <span class="card-title"><i class="fa me-2"></i>
                                                    <asp:Label ID="lbl_desc" runat="server" Text='<%#Eval("description")%>'></asp:Label>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </ItemTemplate>
                        </asp:Repeater>

                        <div id="MyPopup" class="modal fade" role="dialog">
                            <div class="modal-dialog modal-lg">

                                <div class="modal-content">
                                    <div class="modal-header">
                                        <p>
                                            <asp:Label ID="lbl_caption" runat="server" CssClass="ali"></asp:Label>
                                        </p>
                                        <button type="button" class="close" data-dismiss="modal">
                                            &times;</button>
                                    </div>
                                    <div class="modal-body">
                                        <asp:Image ID="imgbig" CssClass="img-thumbnail" runat="server" Width="100%" />

                                    </div>
                                    
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>

c#代码：

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "MyPopup", "$('#MyPopup').modal('show');", true);

从代码隐藏中打开 Bootstrap Modal

问题描述投票：0回答：9

9个回答

最新问题

从代码隐藏中打开 Bootstrap Modal

问题描述 投票：0回答：9

9个回答

最新问题

问题描述投票：0回答：9