2015-10-13 54 views
1

我是一個新手程序員 我想擺脫javascript的傳統警報彈出 我發現彈出一個很好的gui但預期在asp.net這是行不通的asp.net錯誤與<form id =「form1」runat =「服務器」>

我的問題是,如果我刪除

<form id="form1" runat="server"> 

代碼它完美

,但如果我在asp.net與

添加它
<form id="form1" runat="server"> 

彈出不起作用。點擊按鈕後重新加載整個網站,而不是彈出消息。爲什麼? 這是整個代碼

<script type="text/javascript"> 
 
      /** 
 
      * See how to limit only one dialog can be opened at a time. 
 
      */ 
 
      $(function() { 
 
       var $btn = $('#btn-open'); 
 
       $btn.on('click', function (event) { 
 
        BootstrapDialog.closeAll(); 
 
        var dialog = new BootstrapDialog({ 
 
         message: 'The only one.' 
 
        }); 
 
        dialog.open(); 
 
       }); 
 
      }); 
 
     </script>
 <style type="text/css"> 
 
      .floating-menu { 
 
       background-color: gray; 
 
       border: 1px solid blue; 
 
       padding: 20px; 
 
       position: absolute; 
 
       top: 10px; 
 
       right: 10px; 
 
       z-index: 9999; 
 
      } 
 
     </style>
<!DOCTYPE html> 
 

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head runat="server"> 
 
    
 
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script> 
 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.5/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" /> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.5/js/bootstrap-dialog.min.js"></script> 
 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/> 
 
     <title>Only one dialog</title> 
 
     
 

 
</head> 
 
<body> 
 
    <form id="form1" runat="server"> 
 
    <div> 
 
    <div class="floating-menu"> 
 
      <button class="btn btn-primary" id="btn-open">Open dialog</button> 
 
     </div> 
 
     
 
    </div> 
 
    </form> 
 
</body> 
 
</html>

回答

2

由於button控制在默認情況下是submit類型,它會發布的形式向服務器,以避免這種情況要麼你可以像這個按鈕指定它: -

<button type="button" class="btn btn-primary" id="btn-open">Open dialog</button> 

否則你可以使用jQuery preventDefault方法: -

$(function() { 
    var $btn = $('#btn-open'); 
    $btn.on('click', function (event) { 
     event.preventDefault(); 
     BootstrapDialog.closeAll(); 
     var dialog = new BootstrapDialog({ 
       message: 'The only one.' 
     }); 
     dialog.open(); 
     }); 
    }); 
+1

非常感謝您的工作。我可能需要閱讀一些JavaScript的東西。再次感謝你 – knowmeifyou

+1

@knowmeifyou ..做** upvote **和**接受答案**如果你發現它有用,我希望你做到了.. –

+0

@GuruprasadRao我做了upvote的答案,但我忘了接受它對不起 – knowmeifyou

相關問題