Bootstrap Modal Dialog Popup example in Asp.Net

Introduction: In this article I am going to show an example to open bootstrap modal popup having custom header text and message on click of button in Asp.Net. 

Bootstrap Modal Dialog Popup example in Asp.Net

Description It is always preferred to ask for user confirmation before actually performing an action. For example before actually deleting the record or resetting anything ask user for confirmation. If user confirms then perform the action server side otherwise just close the popup without performing anything. I have implemented this in Asp.net web form using bootstrap modal popup.

Implementation: Let’s create a web page for demonstration purpose:

HTML source:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        function getConfirmation(sender, title, message) {
            $("#spnTitle").text(title);
            $("#spnMsg").text(message);
            $('#modalPopUp').modal('show');
            $('#btnConfirm').attr('onclick', "$('#modalPopUp').modal('hide');setTimeout(function(){" + $(sender).prop('href') + "}, 50);");
            return false;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>          
            <div id="modalPopUp" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">
                                <span id="spnTitle">
                                </span>
                            </h4>
                        </div>
                        <div class="modal-body">
                            <p>
                                <span id="spnMsg">
                                </span>                                .
                            </p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" id="btnConfirm" class="btn btn-danger">
                                Yes, please</button>
                        </div>
                    </div>
                </div>
            </div>

             <asp:LinkButton ID="lnkDelete" runat="server" CssClass="btn btn-danger" OnClientClick="return getConfirmation(this, 'Please confirm','Are you sure you want to delete?');"  OnClick="lnkDelete_Click"><i class="glyphicon glyphicon-trash"></i>&nbsp;Delete</asp:LinkButton>          <br />
            <asp:Literal ID="litMsg" runat="server"></asp:Literal>        
        </div>
    </form>
</body>
</html>

Asp.Net C# Code

protected void lnkDelete_Click(object sender, EventArgs e)
    {
        //Write the code here to delete the record
         litMsg.Text = "Record deleted successfully";
    }

Asp.Net VB Code

Protected Sub lnkDelete_Click(sender As Object, e As EventArgs)
        'Write the code here to delete the record
         litMsg.Text = "Record deleted successfully"
    End Sub

Note: By default size of popup is medium. To open small popup replace the line <div class="modal-dialog"> with <div class="modal-dialog modal-sm"> and to open large popup replace with <div class="modal-dialog modal-lg">

 Now over to you:
A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linkedin and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.         
Previous
Next Post »

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..