ASP.Net MasterPage与引导弹出模式&内容页面背后的代码

本文关键字：背后 代码 模式 MasterPage Net ASP | 更新日期: 2023-09-27 18:12:47

我已经创建了一个ASP。. Net masterpage . Bootstrap 3.3.7和Jquery 3.1.0.

违约。主 

<%@ 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>

正如你所看到的，我已经在母版页的底部放置了一个弹出对话框，以便母版页的每个实例，即内容页将使用这个。

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

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

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);
}

然而，它不工作。我不知道为什么。有人能帮我一下吗?

谢谢

ASP.Net MasterPage与引导弹出模式&内容页面背后的代码

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

  1. 首先将下面的JS代码放入。

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

  2. 第二在服务器端按钮点击添加下面的功能()

    ScriptManager。RegisterStartupScript(this, this. gettype ()， "LaunchServerSide"， "$(function() {openModal();});",真);

仅供参考，其他人在搜索Bootstrap 4模式不显示。
我使用母版页，并有一个子页面内的模态，jquery 3.2.1和bootstrap 4 beta 2。

如果没有显示模态，检查页面源代码，看看是否可以在那里找到它。
当你找到模态时，它很可能有change id。

使用。modal或任何在模态上使用的类名来确保击中它。

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

Javascript (masterpage head tag):

函数openModal () {$ (' .modal ') .modal(显示);}

隐藏代码(子页):

ScriptManager。RegisterStartupScript(this, this. gettype ()， "， "openModal();"， true);

后面的代码也可以使用

Page.ClientScript.RegisterStartupScript(this.GetType()， "， "openModal();"， true);

相关文章：