C#/VB.Net: How to Popup Bootstrap Alert Message or Confirmation

Written by Amos Lai

Download the sample project (C#) – 330 kb

Download the sample project (VB.Net) – 380 kb


Hands
Amos Lai
07 March 2018

C#/VB.NET: How to Pop-up Bootstrap Alert Message or Confirmation from ASP.NET Master(.Master), Content(.aspx), UserControl(.ascx) and HTML(.html/htm) pages or Code Behind (server-side).

This is the easy way to pop-up Bootstrap Message. All you need to do is prepare Bootstrap pop-up box in html and write a few lines of jQuery in the .Master page. Then there are ready for you to use it any page (Client or Server-side) you want.

Hands

Step 1

Create an empty website project (ASP.NET).

Step 2

You need to prepare the ingredients for this recipe. The ingredients are Bootstrap (Download from http://getbootstrap.com/), jQuery (Download from http://jquery.com/), CSS, Font and JavaScript files. After downloaded added them into your newly create website project.

Step 3

Create a MasterSite(.Master) page. Then link and refer the Bootstrap and jQuery file in the <head></head> tag.

                                
    <head runat="server">
        <title></title>

        <!-- Link and refer Bootstrap and jQuery files -->
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <link rel="stylesheet" href="css/bootstrap-theme.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>

        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
                                
                            

Step 4

Add in the Bootstrap pop-up box (html) into MasterSite(.Master) page. Please note that this pop-up box can allow you call either the Alert Message or Confirmation.

Hands
Hands

                                
    <body>
        <form id="form1" runat="server">
        <div>
            <!-- Bootstrap Pop-up Box -->
            <div class="modal fade" id="myModalMessage" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" id="btnModelX" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                            <h4 class="modal-title" id="myModalMessageTitle">Modal title</h4>
                        </div>
                        <div class="modal-body" id="myModalMessageContent">
                            ...
                        </div>
                        <div class="modal-footer">
                            <button type="button" id="btnModalYes" class="btn btn-primary" data-dismiss="modal">Yes</button>
                            <button type="button" id="btnModalClose" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        </form>
    </body>
    </html>
                                
                            

Step 5

It is time to write some codes. Now, we have to write a JavaScript function to call out the Bootstrap pop-up box in Master(.Master) page <head></head>. We named the function as ‘PopupMessage’ with 3 parameters (Title, Message and Boolean to tell the function whether it is an Alert Message or Confirmation). Inside the function, we use html IDs to set display the title, message, performs some logics and popup the message. Please note that this function has to be at the below of the Boostrap and jQuery links and references.

                                
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/bootstrap-theme.css" />

    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

    <script type="text/javascript">

        function PopupMessage(Title, Message, IsConfirmButton) {
            $(document).ready(function () {
                $("#myModalMessageTitle").html(Title);
                $("#myModalMessageContent").html(Message);
                if (IsConfirmButton) {
                    $('#btnModelX').attr('style', 'display:none');
                    $('#btnModalClose').text('No');
                    $('#btnModalYes').removeAttr('style');
                }
                else {
                    $('#btnModelX').removeAttr('style');
                    $('#btnModalClose').text('Close');
                    $('#btnModalYes').attr('style', 'display:none');
                }
                $('#myModalMessage').modal();
            });
        }

    </script>
                                
                            

Step 6

Now, we have to write few more lines of code to cater the Confirmation pop-up box. I might need to do something or perform some logics if user click 'Yes' under confirmation pop-up box.

                                
    <script type="text/javascript">

        function PopupMessage(Title, Message, IsConfirmButton) {
            $(document).ready(function () {
                $("#myModalMessageTitle").html(Title);
                $("#myModalMessageContent").html(Message);
                if (IsConfirmButton) {
                    $('#btnModelX').attr('style', 'display:none');
                    $('#btnModalClose').text('No');
                    $('#btnModalYes').removeAttr('style');
                }
                else {
                    $('#btnModelX').removeAttr('style');
                    $('#btnModalClose').text('Close');
                    $('#btnModalYes').attr('style', 'display:none');
                }
                $('#myModalMessage').modal();
            });
        }

        $(document).ready(function () {
            //If user click 'Yes'...
            $('#btnModalYes').click(function () {
                alert('Do something...');
            });
        });

    </script>
                                
                            

Step 7: Lastly, call the Popup Bootstrap Message Box

Everything is well prepared. It is time to call the pop-up Bootstrap Message box. If you intend to call the pop-up box from Client-side, you can write something like this:

                                
    <!--Alert Message-->
    <button type="button" class="btn btn-default" onclick="PopupMessage('INFORMATION', 'Hello, this message is pop-up from Client-side.', false)">Hello, this is pop-up message from Client-side</button>

    <!--Confirmation-->
    <button type="button" class="btn btn-default" onclick="PopupMessage('CONFIRMATION', 'Hello, this confirmation pop-up from Client-side. Do you like it?', true)">Hello, this is pop-up confirmation from Client-side</button>
                                
                            

If you intend to call the pop-up box from Server-side, you can write something like this:

                                
//If the calling is from Master(.Master) or User Control(.ascx) page:
protected void btnPopupMsgFromCodeBehind_Click(object sender, EventArgs e)
        {
            Page.ClientScript.RegisterStartupScript(Page.GetType(), "INFORMATION", @"PopupMessage(""CONFIRMATION"", ""Hello, this message pop-up from Server-side. Do you like it?"", true);", true);
        } 

//If the calling is from Content(.aspx) page:
protected void btnPopupMsgFromCodeBehind_Click(object sender, EventArgs e)
        {
            ClientScript.RegisterStartupScript(Page.GetType(), "INFORMATION", @"PopupMessage(""CONFIRMATION"", ""Hello, this message pop-up from Server-side. Do you like it?"", true);", true);
        } 

                                
                            

Author(s) Shoutout

Written by Amos Lai

Hi everyone, if you have any question, feel free to message me. If you like this article or would like me to extend more on the subject you can email me. Feedback is always appreciated. I will write more. If I get a two thumbs up. =)

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL).