Question

我正在使用一个非常简单的JQuery对话框。用户单击链接，将打开先前隐藏的对话框。它只有一个功能很好用：同一页面上有不相关的按钮会导致回发。如果单击其中一个按钮，则对话框的隐藏div将显示在屏幕上，但没有样式。

根据这篇文章的要点，这就是我所拥有的：

<a href="#" id="Choose_a_Customer-link"><img alt="Reliabills" src="/billingsystem/images/icn_help.png" border="0" /></a>

<div id="Choose_a_Customer" title="Choose a Customer Help"><p>Coming Soon...!</p></div>

<script>
$(function() {$("#Choose_a_Customer").dialog({ autoOpen: false, buttons: [{ text: "Ok", click: function() { $(this).dialog("close"); } }], width: 400 });

$("#Choose_a_Customer-link").click(function(event) { $("#Choose_a_Customer").dialog("open"); event.preventDefault(); });});

</script>

<input type="submit" name="ctl00$cnt$cmd_clients" value="Go >" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$cnt$cmd_clients&quot;, &quot;&quot;, true, &quot;client&quot;, &quot;&quot;, false, false))" id="ctl00_cnt_cmd_clients" />

最后一个按钮是.NET按钮，在.aspx页面中如下所示：

<asp:Button ID="cmd_clients" runat="server" Text="Go >" ValidationGroup="client" />

这是导致问题的按钮。当点击它时，我看到“即将推出......！”没有围绕它的对话框。

有什么想法吗？

谢谢！

Answer 1

默认情况下尝试为div设置display：none：

<div style="display:none" id="Choose_a_Customer" title="Choose a Customer Help"><p>Coming Soon...!</p></div>

和

<asp:ScriptManager runat="server" />
<script type="text/javascript">
  function pageLoad() {
    $("#Choose_a_Customer").dialog({ autoOpen: false, buttons: [{ text: "Ok", click: function() { $(this).dialog("close"); } }], width: 400 });
  }
</script>

此代码有效：

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication3.WebForm1" %>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
        <script src="Scripts/jquery-1.7.1.js"></script>
        <script src="Scripts/jquery-ui-1.8.20.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">       
            <asp:ScriptManager runat="server"></asp:ScriptManager>
            <asp:UpdatePanel runat="server">
                <ContentTemplate>
                    <a href="#" id="Choose_a_Customer-link">Show dialog</a>
                    <div id="Choose_a_Customer" title="Choose a Customer Help">
                        <p>Coming Soon...!</p>
                    </div>
                    <script>
                        function pageLoad() {
                            $("#Choose_a_Customer").dialog({ autoOpen: false, buttons: [{ text: "Ok", click: function() { $(this).dialog("close"); } }], width: 400 });
                            $("#Choose_a_Customer-link").click(function(event) { $("#Choose_a_Customer").dialog("open"); event.preventDefault(); });
                        };
                    </script>
                    <!--<input type="submit" name="ctl00$cnt$cmd_clients" value="Go >" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$cnt$cmd_clients&quot;, &quot;&quot;, true, &quot;client&quot;, &quot;&quot;, false, false))" id="ctl00_cnt_cmd_clients" />-->
                    <asp:Button ID="Button1" runat="server" Text="Go >" OnClick="Button1_Click" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </form>
    </body>
    </html>

对于乘法实例：文件 WebUserControl1.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="WebApplication3.WebUserControl1" %>
<a href="#" id="Choose_a_Customer-link<%=ID %>"><%=LinkText %></a>
<div id="Choose_a_Customer<%=ID %>" title="Choose a Customer Help">
    <asp:PlaceHolder runat="server" ID="PlaceHolder1" />    
</div>
<asp:Button ID="Button1" runat="server" Text="Go >" OnClick="Button1_Click"  />

文件 WebUserControl1.ascx.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication3
{
    public partial class WebUserControl1 : System.Web.UI.UserControl
    {
        public class htmlContainer : Control, INamingContainer
        {
        }

        private ITemplate contentTemplate = null;

        [TemplateContainer(typeof(htmlContainer))]
        [PersistenceMode(PersistenceMode.InnerProperty)]
        public ITemplate ContentTemplate
        {
            get{ return contentTemplate; }
            set{ contentTemplate = value; }
        }

        void Page_Init()
        {
            if (contentTemplate != null)
            {
                htmlContainer container = new htmlContainer();
                contentTemplate.InstantiateIn(container);
                PlaceHolder1.Controls.Add(container);
            }
        }

        public string LinkText { get; set; }

        protected void Page_Load(object sender, EventArgs e)
        {
            ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "key" + ID, 
String.Format(@"
$(document).ready(function(){{
    $(""#Choose_a_Customer{0}"").dialog({{ autoOpen: false, buttons: [{{ text: ""Ok"", click: function () {{ $(this).dialog(""close""); }} }}], width: 400 }});
    $(""#Choose_a_Customer-link{0}"").click(function (event) {{ $(""#Choose_a_Customer{0}"").dialog(""open""); event.preventDefault(); }});
}});
", ID),
            true);
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
        }
    }
}

文件 WebForm1.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication3.WebForm1" %>
<%@ Register Src="~/WebUserControl1.ascx" TagPrefix="uc1" TagName="WebUserControl1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.7.1.js"></script>
    <script src="Scripts/jquery-ui-1.8.20.js"></script>
</head>
<body>
    <form id="form1" runat="server">       
        <asp:ScriptManager runat="server"></asp:ScriptManager>

        <asp:UpdatePanel runat="server">
            <ContentTemplate>

                <uc1:WebUserControl1 runat="server" ID="WebUserControl1" LinkText="Instance1" >
                    <ContentTemplate>
                        <p>Content of dialog 1</p>
                    </ContentTemplate>
                </uc1:WebUserControl1>

                <uc1:WebUserControl1 runat="server" ID="WebUserControl2" LinkText="Instance2" >
                    <ContentTemplate>
                        <p>Content of dialog 2</p>
                    </ContentTemplate>
                </uc1:WebUserControl1>

                <uc1:WebUserControl1 runat="server" ID="WebUserControl3" LinkText="Instance3" >
                    <ContentTemplate>
                        <p>Content of dialog 3</p>
                    </ContentTemplate>
                </uc1:WebUserControl1>

            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

带有.NET的JQuery Dialog：隐藏的Div显示在不相关的回发之后

1 个答案: