使用ASP.NET按鈕顯示的jQuery UI對話框

我想在用戶點擊一個ASP.Net按鈕時顯示一個模式對話框。這是我的頁面：使用ASP.NET按鈕顯示的jQuery UI對話框

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title></title> 
    <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script> 
    <script src="js/jquery-ui-1.6.custom.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(function() { 

      $("#dialog").dialog({ 
       bgiframe: true, 
       autoOpen: false, 
       height: 300, 
       modal: true, 
       buttons: { 
        'Ok': function() { 
         $(this).dialog('close'); 
        }, 
        Cancel: function() { 
         $(this).dialog('close'); 
        } 
       }, 
       close: function() { 
        ; 
       } 
      }); 
     }); 
     function ShowDialog() { 
      $('#dialog').dialog('open'); 
     } 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <asp:Button ID="TreeNew" runat="server" Text="New" OnClientClick="ShowDialog();"/> 
     <asp:Label ID="Message" runat="server"></asp:Label> 
     <div id="dialog" title="Select content type"> 
      <p id="validateTips">All form fields are required.</p> 
      <asp:RadioButtonList ID="ContentTypeList" runat="server"> 
       <asp:ListItem Value="1">Text</asp:ListItem> 
       <asp:ListItem Value="2">Image</asp:ListItem> 
       <asp:ListItem Value="3">Audio</asp:ListItem> 
       <asp:ListItem Value="4">Video</asp:ListItem> 
     </asp:RadioButtonList> 
     </div> 
    </div> 
    </form> 
</body> 
</html>

當我點擊TreeNew按鈕出現模式彈出，但立即頁面做回發。

發生了什麼事？

來源

2010-02-23 VansFannel

你爲什麼不使用標準的HTML按鈕？ – 2010-02-23 19:51:48

因爲此對話不總是顯示。我需要用按鈕做回發。 – VansFannel 2010-02-23 20:07:26

雖然加入了return false;將解決你的問題（如建議通過其他答案），我認爲你最好做的是使用標準的HTML按鈕。在這種情況下沒有理由使用ASP.NET控件，因爲您不打算回發。

但是，如果您堅持使用ASP.NET按鈕，至少應設置UseSubmitBehavior="False"，以便該按鈕呈現爲<input type="button"/>而不是<input type="submit"/>。

來源

2010-02-23 19:50:51

嘗試

OnClientClick="return ShowDialog();"

和

function ShowDialog() { 
      $('#dialog').dialog('open'); 
      return false; 
     }

這將阻止回發。

來源

2010-02-23 19:47:26 ctrlShiftBryan

不，它不起作用。生成的html將該按鈕顯示爲提交按鈕。 – VansFannel 2010-02-23 19:49:06

您不會從OnClientClick返回false。當你不明確地返回false時，假設在這種情況下是「真」。來自OnClientClick的返回值爲true表示回發可以。嘗試改變的OnClientClick以下的（你調用的ShowDialog（）之後加入「返回false」）

OnClientClick="ShowDialog();return false;"

來源

2010-02-23 19:47:45

哦，我比你更喜歡你:) – ctrlShiftBryan 2010-02-23 19:49:28

這篇文章或許有些價值的，以你：using-jquery-modal-dialog-confirmation-with-an-asp-net-server-control。

希望這有助於一些。

來源

2010-02-23 19:47:46 Chris

你的OnClientClick需要返回假像這樣：

OnClientClick="ShowDialog(); return false;"

按鈕默認情況下，回傳，但返回false阻止默認行爲

來源

2010-02-23 19:48:07

使用的preventDefault（）jQuery的功能，以防止按鍵回傳

試試這個：

function ShowDialog(evt) { 
      evt.preventDefault(); 
      $('#dialog').dialog('open'); 
     }

來源

2011-03-30 11:45:43

使用ASP.NET按鈕顯示的jQuery UI對話框

回答

相關問題