Search code examples
c#jqueryasp.netmaster-pagesbootstrap-modal

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

I have created an ASP.Net Master page with Bootstrap 3.3.7 and Jquery 3.1.0.

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>

As you can see I have placed a Popup Dialog at the bottom of the MasterPage so that every instance of the MasterPage i.e. Content Pages will be use this.

Also I have created a JavaScript Function called 'openModal()' has created at the head of the MasterPage to use across all the content pages.

Now I have created a content page 'WebForm1.aspx' using the previously created MasterPage and added a button. Please refer the code below.

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>

What I want is when I click the button it should show the popup and I need to do it from code behind. See below what I have tried.

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

However it's not working. I can't figure it out why. So could someone help me on this?

Thanks

Solution

  • I got the answer by my self. Please refer the below information.

    1. First place the below JS code in the .

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

    2. Second In server side on button click add the below function()

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