如何在带有母版页的页面中打开 jQuery UI 对话框？答案

【问题标题】：How to open jQuery UI dialog in page with master page?如何在带有母版页的页面中打开 jQuery UI 对话框？
【发布时间】：2011-11-21 11:26:59
【问题描述】：

我想从带有母版页的 asp.net 页面打开一个 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>

我认为问题在于如何在占位符中引用“对话框”。我尝试了几种方法，但我没有找到解决方案。

有人知道如何解决这个问题吗？

提前谢谢你！

哈维尔

【问题讨论】：

能否把页面的输出放到jsfiddle.net
您确定没有在母版页中加载 jQuery 吗？然而，你必须将你的 $(function... 包装在一个 $(document).ready(... 调用中，所以 jQuery 只会在所有页面 dom 都正常时调用它。
我在母版页中有这段代码
您需要从页面中删除 - 只允许一个 jQuery输出
所以你加载 jQuery 两次...取决于你需要什么，如果你需要 jquery 用于使用你的母版页的所有页面，然后删除子级 jQuery 的加载并将其留在主控.但如果这是唯一使用 jQuery 的子页面，则从主页面移除 jQuery 的加载。

标签： javascript jquery asp.net dialog

【解决方案1】：

您需要考虑几件事情：

将以下代码添加到单独的 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。

--编辑示例--

例如你的母版页类名是CustomSiteMaster，你可以写((CustomSiteMaster)this.Master).RegisterDialog(button1.ClientID); -- 编辑结束 --

它可以正常工作

【讨论】：

我不明白第 2 步“来自您的内容页面...”，请您更深入地解释一下吗？
我必须插入 ((CustomSiteMaster)this.Master).RegisterDialog(button1.ClientID);在 Page_Load 方法中？...我使用的是 vb.net，你能把 vb.net 中的代码发给我吗？...

【解决方案2】：

添加到 LinkButton 的 OnClientClick 属性如下：

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

此外，如果您想通过 id 选择服务器端控件，请使用以下选择器语法：

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

【讨论】：

谢谢 Yuriy 但不起作用...我有这个 js 错误消息：“对象不支持此属性或方法”
您发布的标记是否完全相同？是否标有 runat="server" 属性的“对话框” div？尝试将 autoOpen 属性设置为 true。在那种情况下会打开对话框吗？还要检查 jQuery-UI 库的 url。对吗？
是的，我完全插入了您的代码...不，“对话框” div 没有任何 runat="server" 属性。使用 autoOpen 在 true 我有同样的情况。最后，jQuery-UI 的 url 没问题... :(。我必须通过私人电子邮件发送代码，您能帮我解决这个问题吗？...

【解决方案3】：

要在内容占位符中查找任何控件，请确保使用如下语法：

$('#ContentPlaceHolderId_ControlId')

【讨论】：

感谢 Kristoffer，但在这种情况下，我尝试查找“对话框”div，但仍然出现相同的错误消息“对象不支持此属性或方法”

【解决方案4】：

没有加载 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" 消息。

【讨论】：

【解决方案5】：

我有解决“谜团”的办法。问题很简单。 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>

感谢您的回答。

哈维尔

【讨论】：