【问题标题】:Asp.net Button click inside Jquery Modal popup在 Jquery Modal 弹出窗口中单击 Asp.net 按钮
【发布时间】:2015-08-25 04:52:23
【问题描述】:

在我的 asp.net 应用程序中,我使用了 Jquery 的模态弹出窗口。在弹出窗口里面我有 asp.net 按钮。我需要在其中编写用于将数据插入数据库的服务器端代码。但是当我点击 Button modal 时,弹出窗口正在关闭。我想在单击按钮时保持模式弹出打开。 下面是我的html代码,

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <div class="row route-for-reg">
                        <div class="routes-container">
                            <div class="row padding-tb-10">
                                <div class="col-md-4 col-lg-3">
                                    <asp:DropDownList ID="dpPickupLocation" CssClass="form-control ng-pristine ng-untouched ng-valid ng-valid-required " data-placeholder="Choose pickup point..." runat="server">
                                        <asp:ListItem>as</asp:ListItem>
                                    </asp:DropDownList>

                                </div>
                                <div class="col-md-4 col-lg-3">
                                    <asp:DropDownList ID="dpDropLocation" CssClass="form-control ng-pristine ng-untouched ng-valid ng-valid-required" data-placeholder="Choose Hinjewadi drop point..." runat="server"></asp:DropDownList>
                                </div>

                                <div class="col-md-6">
                                    <asp:UpdatePanel ID="modalPanel" runat="server"><ContentTemplate>


                                    <asp:Button ID="btnViewRoutes" runat="server" Text="View All Routes" OnClick="btnViewRoutes_Click"  CausesValidation="false" />
                                    </ContentTemplate></asp:UpdatePanel>
                                </div>
                            </div>
                            <div id="accordion-resizer" class="row padding-tb-10">
                            <div id="accordion">
                                    <h3>Pickup</h3>
                                    <div>
                                        <asp:Label ID="lblHolderPickup" runat="server" Text="There are no routes available"></asp:Label>
                                        <asp:GridView ID="gridPickUp" runat="server" CssClass="routes-list"></asp:GridView> 
                                    </div>
                                    <h3>Drop</h3>
                                    <div>
                                        <asp:Label ID="lblHolderDrop" runat="server" Text="There are no routes available"></asp:Label>
                                        <asp:GridView ID="gridDrop" runat="server" CssClass="routes-list"></asp:GridView> 
                                    </div>
                                </div>
                                </div>
                            <input class="primary-bt" type="button" value="Click to Proceed " />

                        </div>
                    </div>


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

有什么方法可以在点击按钮时保持弹出窗口而不关闭它。

提前谢谢你 桑吉萨

【问题讨论】:

    标签: jquery html asp.net modal-popup


    【解决方案1】:

    您可以使用以下选项实现此目的

    • 将模态内容放入UpdatePanel
    • 在按钮单击事件中注册客户端脚本以再次打开模式弹出窗口。

    【讨论】:

      【解决方案2】:

      由于按钮在父页面上,由于回发而出现异常,我无法发现问题,但您可以尝试使用所有这些点击事件的内容创建一个新页面。

      在父页面中,

       <div class="modal-body">
       <iframe style="width: 710px; height: 450px;" id="ifrmChild" src="NewPage.aspx" runat="server" scrolling="yes"></iframe>
       </div>
      

      在子页面中,您可以拥有带有按钮控制的网格。这是一个普通的aspx页面。但是在关闭和打开弹出窗口时,您应该在子页面中使用parent.FUNCTIONNAME() 调用,就是这样。

      【讨论】:

        【解决方案3】:

        试试下面的代码:

        $('element_to_pop_up').bPopup({
            easing: 'easeOutBack', //uses jQuery easing plugin
            speed: 450,
            transition: 'slideDown'
        });
        

        【讨论】:

          猜你喜欢
          • 2012-08-31
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2021-05-19
          • 2023-04-09
          • 1970-01-01
          相关资源
          最近更新 更多