ASP.Net MasterPage with Bootstrap Popup Modal & Content Pages with Code Behind

Question

我用 Bootstrap 3.3.7 和 Jquery 3.1.0 创建了一个 ASP.Net 主页。

Default.master

<%@ Master Language="C#" AutoEventWireup="true"   CodeBehind="Default.master.cs" Inherits="BootStrap_With_ASPDotNet.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>This is My Site Using BootStrap in ASP.Net</title>

<!-- Bootstrap -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"    integrity="sha384-  BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
     <!--<script    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">       </script>-->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">    </script>

      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

     <!-- Font Awesome inclusion for the icons on the pages -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text\css" />

     <!-- Adding Google Web Fonts to Bootstrap -->
     <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet" />

     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
     <!--[if lt IE 9]>
       <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">  </script>
     <![endif]-->
     <link href="custom/custom.css" rel="stylesheet" type="text\css" />

     <!-- Adding a web font -->
     <!--<link href="https://fonts.googleapis.com/css?family=Open+Sans"    rel="stylesheet" type="text/css />-->

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

        </script>  
 </head>
 <body>
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>
     <!--Bootstrap Modal (Dialog Box / Pop-up Window) Example-->
     <div id="MyModal" class="modal fade" role="dialog" runat="server">
        <div class="modal-dialog" runat="server">
            <div class="modal-content" runat="server">
                <div class="modal-header" runat="server">
                    <button type="button" class="close" data-   dismiss="modal">&times;</button>
                     <h4>This is Modal Header</h4>
                 </div>
                 <div class="modal-body" runat="server">This is Modal Body
                  </div>
                  <div class="modal-footer" runat="server">This is Modal Footer
                      <button type="button" class="btn btn-default" data-dismiss="modal" runat="server">Close</button>
                 </div>
              </div>
          </div>
      </div>
      <!-- End of Bootstrap Model (Dialog Box / Popup Window)-->
  </body>
 </html>

如您所见，我在 MasterPage 的底部放置了一个弹出对话框，以便 MasterPage 的每个实例（即内容页）都将使用它。

我还创建了一个名为 'openModal()' 的 JavaScript 函数，该函数已在 MasterPage 的头部创建，用于所有内容页面。

现在我已经使用之前创建的 MasterPage 创建了一个内容页面 'WebForm1.aspx' 并添加了一个按钮。请参考下面的代码。

WebForm1.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Default.Master"
        AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" 
        Inherits="BootStrap_With_ASPDotNet.WebForm1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:Button ID="btnClickMe" runat="server" OnClick="btnClickMe_Click"
     Text="Click Me" CssClass="btn btn-danger"/>
</asp:Content>

我想要的是当我单击按钮时它应该显示弹出窗口并且我需要从后面的代码中执行此操作。请参阅下面我尝试过的内容。

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

但是它不起作用。我不明白为什么。那么有人可以帮我解决这个问题吗？

谢谢

Answer 1

我自己得到了答案。请参考以下资料。

首先将下面的JS代码放在.

     function openModal() {
         $('#myModal').modal('show');
     }

其次在服务器端单击按钮添加以下功能()

ScriptManager.RegisterStartupScript(这个, this.GetType(), "LaunchServerSide", "$(function() { openModal(); });", true);

Answer 2

仅供他人搜索 Bootstrap 4 Modal 未显示。
我使用母版页并在子页面中包含模式，jquery 3.2.1 和 bootstrap 4 beta 2.

如果模式没有显示，请检查页面源，看看是否可以在那里找到它。
当您找到模态时，它很可能会更改 ID。

使用 .modal 或模态框上使用的任何 class 名称以确保命中它。

Javascript 部分也需要在子页面加载之前，因为当 if 到达该内容部分时运行后面的代码。

Javascript（母版页头标签）：

function openModal() { $('.modal').modal('show'); }

隐藏代码（子页面）：

ScriptManager.RegisterStartupScript(这, this.GetType(), "", "openModal();", 真);

后面的代码也有效。

Page.ClientScript.RegisterStartupScript(this.GetType(), "", "openModal();", 真);

ASP.Net MasterPage with Bootstrap Popup Modal & Content Pages with Code Behind

ASP.Net MasterPage with Bootstrap Popup Modal & Content Pages With Code Behind

c#

asp.net

jquery

master-pages

bootstrap-modal