ASP.net,Html,JavaScript

Display bootstraps model popup in asp.net



 Like (0)  Dislike (0)

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

Let’s create a web page for demonstration purpose:
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head runat="server">  
  3.     <title></title>  
  4.     <meta charset="utf-8">  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  6.     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
  7.   
  8.    
  9.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
  10.     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
  11.   
  12.     <script type="text/javascript">  
  13.         function getConfirmation(sender, title, message) {  
  14.             $("#spnTitle").text(title);  
  15.             $("#spnMsg").text(message);  
  16.             $('#modalPopUp').modal('show');  
  17.             $('#btnConfirm').attr('onclick', "$('#modalPopUp').modal('hide');setTimeout(function(){" + $(sender).prop('href') + "}, 50);");  
  18.             return false;  
  19.         }  
  20.     </script>  
  21. </head>  
  22. <body>  
  23.     <form id="form1" runat="server">  
  24.         <div>            
  25.             <div id="modalPopUp" class="modal fade" role="dialog">  
  26.                 <div class="modal-dialog">  
  27.                     <div class="modal-content">  
  28.                         <div class="modal-header">  
  29.                             <button type="button" class="close" data-dismiss="modal">×</button>  
  30.                             <h4 class="modal-title">  
  31.                                 <span id="spnTitle">  
  32.                                 </span>  
  33.                             </h4>  
  34.                         </div>  
  35.                         <div class="modal-body">  
  36.                             <p>  
  37.                                 <span id="spnMsg">  
  38.                                 </span>                                .  
  39.                             </p>  
  40.                         </div>  
  41.                         <div class="modal-footer">  
  42.                             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
  43.                             <button type="button" id="btnConfirm" class="btn btn-danger">  
  44.                                 Yes, please</button>  
  45.                         </div>  
  46.                     </div>  
  47.                 </div>  
  48.             </div>  
  49.   
  50.              <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> Delete</asp:LinkButton>          <br />  
  51.             <asp:Literal ID="litMsg" runat="server"></asp:Literal>          
  52.         </div>  
  53.     </form>  
  54. </body>  
  55. </html>  
 
  1. protected void lnkDelete_Click(object sender, EventArgs e)  
  2.     {  
  3.         //Write the code here to delete the record  
  4.          litMsg.Text = "Record deleted successfully";  
  5.     }  

0 Comment's

Comment Form

Submit Comment
If opportunity doesn’t knock, build a door.⛩

Popular Post

WPF

How to Use Logger in WPF Application

C-Sharp

Update Specific Users Out of Oce Settings C# with Example

C-Sharp

Retrieve Specified User''s Out of O ce Settings C# with Example

C-Sharp

Large Object Heap compaction C# with Example

C-Sharp

Weak References C# with Example

C-Sharp

Source code in the view C# with Example