如何使用母版页在页面中打开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对话框？

回答

相关问题