带有代码隐藏的Bootstrap Popup模式和内容页面的ASP.Net MasterPage

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

我用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的底部放置了一个Popup对话框，以便MasterPage的每个实例即Content Pages都将使用它。

我还创建了一个名为'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);
}

然而，它不起作用。我无法弄明白为什么。那么有人可以帮助我吗？

谢谢

c# jquery asp.net master-pages bootstrap-modal
2个回答
0
投票

我得到了自己的答案。请参考以下信息。

  1. 首先将以下JS代码放入。 function openModal() { $('#myModal').modal('show'); }
  2. 秒在服务器端按钮上单击添加以下功能（） ScriptManager.RegisterStartupScript（this，this.GetType（），“LaunchServerSide”，“$（function（）{openModal（）;}）;”，true）;
0
投票

其他人在寻找Bootstrap 4 Modal时没有出现。 我使用母版页并在子页面中有模态，jquery 3.2.1和bootstrap 4 beta 2。

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

使用.modal或模态上使用的任何类名确保命中它。

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

Javascript（masterpage head标签）：

function openModal（）{$（'。modal'）。modal（'show'）; }

代码背后（子页面）：

ScriptManager.RegisterStartupScript（this，this.GetType（），“”，“openModal（）;”，true）;

这个代码背后也有效。

Page.ClientScript.RegisterStartupScript（this.GetType（），“”，“openModal（）;”，true）;

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.