Implement Bootstrap Modal Popup Dialog Box inside Master Page in ASP.Net

Last Reply on Dec 17, 2015 05:10 AM By aditya2267

Posted on Dec 16, 2015 03:36 AM

Hello all,

with reference to the below article,

http://www.aspforums.net/Threads/111893/Open-Show-BootStrap-Modal-Popup-from-Server-Side-in-ASPNet/

I;m trying to implelement the same from aspx master page. But the modal is not showing on button click from code behind.

Posted on Dec 17, 2015 05:10 AM

Hi nadeem1218,

i can see many missing things in your code.

  1. Script is placed inside ContentPlaceHolder on Master page.
  2. Bootstrap and jquery both js missing.
  3. two title tag in head of master.
  4. ShowPopup Javascript function missing.

However i have corrected all the things in below sample code. please refer it, it works.

MASTER PAGE:

<head runat="server">
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"
        rel="stylesheet">
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"
        type="text/javascript"></script>
    <script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <script type="text/javascript">
        function ShowPopup() {
            $("[id*=btnShowPopup]").click();
        }
    </script>
    <style>
        .modal-backdrop { height: 100%; }
    </style>
</head>
<body>
    <form runat="server">
    <asp:ContentPlaceHolder ID="MainContent" runat="server" />
    </form>
</body>

aspx Page:

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="head">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div class="modal fade" id="myModal" style="display: none">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">
                                Registration done Successfully</h4>
                        </div>
                        <div class="modal-body">
                            Test Modal
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">
                                Close</button>
                            <button type="button" class="btn btn-primary">
                                Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
            <asp:Button runat="server" ID="btnShowPopup" Text="Test Show" OnClick="btn_click"
                CssClass="btn btn-primary" data-toggle="modal" data-target="#myModal" />
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

Code Behind:

protected void btn_click(object sender, EventArgs e)
{
    ClientScript.RegisterStartupScript(this.GetType(), "alert", "ShowPopup();", true);            
}

Thanks