如何使用母版頁在頁面中打開jQuery UI對話框？

我想用母版頁從asp.net頁面打開一個jQuery UI對話框。在母版頁的頁面中，代碼工作正常，但母版頁不起作用。如何使用母版頁在頁面中打開jQuery UI對話框？

的代碼是：

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/privado/master/interior.master" CodeBehind="WebForm3.aspx.vb" Inherits="ProyectoDemo.WebForm3" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="headInterior" runat="server"> 
    <link type="text/css" href="Styles/jquery-ui-1.8.16.custom.css" rel="stylesheet" /> 
    <link href="Styles/addhunters.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 
    <script type="text/javascript" src="js/jquery-ui- 1.8.16.custom.min.js"></script> 
    <style type="text/css"> 
     /*demo page css*/ 
     body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;} 
     .demoHeaders { margin-top: 2em; } 
     #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;} 
     #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;} 
     ul#icons {margin: 0; padding: 0;} 
     ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;} 
     ul#icons span.ui-icon {float: left; margin: 0 4px;} 
    </style>  
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="contenidoInterior" runat="server"> 
    <script type="text/javascript"> 
     $(function() { 
      // Dialog  
      $('#dialog').dialog({ 
       autoOpen: false, 
       width: 600, 
       height: 400, 
       buttons: { 
        "Ok": function() { 
         $(this).dialog("close"); 
        }, 
        "Cancelar": function() { 
         $(this).dialog("close"); 
        } 
       } 
      }); 
      // Dialog Link 
      $('#Boton').click(function() { 
       $('#dialog').dialog('open'); 
       return false; 
      }); 
     }); 
    </script> 

    <div id="uno"> 
     <h2 class="demoHeaders">Dialog</h2>   
     <asp:TextBox ID="TextBox1" runat="server" Text="prueba" ></asp:TextBox> 
     <p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>    
     <asp:LinkButton ID="Boton" runat="server">LinkButton</asp:LinkButton> 
     <asp:Button ID="Button1" runat="server" Text="Button" /> 
     <!-- ui-dialog --> 
     <div id="dialog" title="Dialog Title"> 
      <p>Dialog text</p>    
     </div> 
    </div>

我認爲這個問題是如何佔位符內引用「對話框」。我嘗試了幾種方法，但我找不到解決方案。

任何人都知道如何解決這個問題？

預先感謝您！

哈維爾

來源

2011-11-21 Camacho

能否請您把頁面輸出到http://jsfiddle.net/ – Yacov

你肯定不加載的jQuery也是在母版？然而，你必須在'$（document）.ready（...'call）中包裝你的'$（function ...'，所以jQuery只會在所有頁面dom都可以調用時調用它。 –

我有這個代碼在母版頁中我必須從母版頁中刪除並將此代碼放在子頁面中？ – Camacho

還有，你需要考慮幾件事情：

添加以下代碼到一個單獨的common.js並添加它的引用母版頁：


window["common"] = { 
    liveDialog: function(btnId) { 
     $(btnId).live(click,common.showDialog); 
     return false; 
    }, 
    showDialog() : function(){ 
     $('#dialog').dialog({ 
       autoOpen: false, 
       width: 600, 
       height: 400, 
       buttons: { 
        "Ok": function() { 
         $(this).dialog("close"); 
        }, 
        "Cancelar": function() { 
         $(this).dialog("close"); 
        } 
       } 
      }); 

    } 

}

添加以下方法掌握頁面：

public void RegisterDialog(clientBtnId) 
{ 
    this.page.ClientScript.RegisterStartupScript(this.Page.GetType(),"__registerDialg","common.liveDialog('"+clientBtnId+"');",true); 
}

從您的內容頁面，將this.MasterPage轉換爲您的母版頁的實際類名，並將您的按鈕的clientId傳遞給RegisterDialog。

--edited例子 -

例如您的母版頁類名稱爲CustomSiteMaster，你可以寫((CustomSiteMaster)this.Master).RegisterDialog(button1.ClientID); - 編輯的結束 -

將沒有問題的工作

來源

2011-11-21 11:49:45

我不明白步驟2「從您的內容頁面...」，請你更深入地解釋我？ – Camacho

更新我的答案查看代碼塊中 - 編輯示例 - –

我必須插入（（CustomSiteMaster）this.Master）.RegisterDialog（button1.ClientID）;在Page_Load方法中？...我使用的是vb.net，可以你給我的代碼在VB.NET？... – Camacho

添加到LinkButton的OnClientClick屬性如下：

<asp:LinkButton ID="Boton" runat="server" 
OnClientClick="$('#dialog').dialog('open'); return false;" >LinkButton</asp:LinkButton>

另外，如果你想通過ID使用下面的選擇語法選擇服務器端控件：

$("#<%= ControlID.ClientID %>")

來源

2011-11-21 11:32:07

謝謝尤里，但沒有工作......我有這個js錯誤消息：「該對象不支持此屬性或方法」 – Camacho

你發佈完全相同的標記？「對話框」div是否標有runat =「server」屬性？嘗試將autoOpen屬性設置爲true。在這種情況下打開對話框？同時檢查jQuery-UI庫的url。這樣對嗎？ –

是的，我插入你的代碼......不是，「對話框」div沒有任何runat =「server」屬性。隨着autoOpen真實我有同樣的情況。最後，jQuery-UI的URL是好的...... :(我必須通過私人電子郵件發送代碼，你能幫我解決這個問題嗎？... – Camacho

要找到內容佔位符中的任何控件，請務必使用如下語法：

$('#ContentPlaceHolderId_ControlId')

來源

2011-11-21 11:40:50 somex

謝謝Kristoffer，但在這種情況下，我嘗試找到「對話框」div，但我仍然是相同的錯誤信息「該對象不支持此屬性或方法」 – Camacho

jQuery UI未加載，因爲您的src屬性中有其他空間：

<script type="text/javascript" src="js/jquery-ui- 1.8.16.custom.min.js"></script>

只是更改爲：

<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>

和jQuery UI可能會加載細，您將停止接收"the object does not support this property or method"消息。

來源

2011-11-21 12:38:13

謝謝，我試圖刪除額外的空間，但我有同樣的問題... – Camacho

我有解決方案的「mistery」。問題很簡單。對jQuery-UI的.js文件的引用在Conten1佔位符中，我把這兩行放在Conten2佔位符中，這個內容有一個javascript函數來打開對話框。

完整和工作的代碼如下：

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/privado/master/interior.master" CodeBehind="WebForm3.aspx.vb" Inherits="ProyectoDemo.WebForm3" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="headInterior" runat="server"> 
    <link type="text/css" href="Styles/jquery-ui-1.8.16.custom.css" rel="stylesheet" /> 
    <link href="Styles/addhunters.css" rel="stylesheet" type="text/css" /> 
    <%--<%@ MasterType VirtualPath="~/privado/master/Interior.master"%>--%> 
    <style type="text/css"> 
     /*demo page css*/ 
     body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;} 
     .demoHeaders { margin-top: 2em; } 
     #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;} 
     #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;} 
     ul#icons {margin: 0; padding: 0;} 
     ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;} 
     ul#icons span.ui-icon {float: left; margin: 0 4px;} 
    </style>  
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="contenidoInterior" runat="server"> 
    <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 
    <script type="text/javascript" src="js/jquery-ui- 1.8.16.custom.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      alert('hola'); 
      $('#dialog').dialog({ 
       autoOpen: false, 
       width: 600, 
       height: 400, 
       buttons: { 
        "Ok": function() { 
         $(this).dialog("close"); 
        }, 
        "Cancelar": function() { 
         $(this).dialog("close"); 
        } 
       } 
      }); 

      $('#MainContent_contenidoInterior_Boton').click(function() { 
       $('#dialog').dialog('open'); 
       return false; 
      }); 
     });    
    </script> 

    <div id="uno" > 
     <h2 class="demoHeaders">Dialog</h2>   
     <asp:TextBox ID="TextBox1" runat="server" Text="prueba" ></asp:TextBox> 
     <p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>    
     <asp:LinkButton ID="Boton" runat="server">LinkButton</asp:LinkButton> 
     <asp:Button ID="Button1" runat="server" Text="Button" /> 
     <!-- ui-dialog --> 
     <div id="dialog" title="Dialog Title"> 
      <p>Dialog text</p>    
     </div> 
    </div>

謝謝您的解答。

哈維爾

來源

2011-11-22 09:19:13 Camacho

如何使用母版頁在頁面中打開jQuery UI對話框？

回答

相關問題