jquery - .NET を使用した JQuery ダイアログ: 無関係なポストバックの後に非表示の Div が表示される

Question

私は非常に単純な JQuery ダイアログボックスを使用しています。ユーザーがリンクをクリックすると、以前は非表示だったダイアログボックスが開きます。1 つのキャッチでうまく機能します。同じページにポストバックを引き起こす無関係なボタンがあります。これらのボタンのいずれかがクリックされると、ダイアログボックスの非表示の 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" />

最後のボタンは、.aspx ページで次のように表示される .NET ボタンです。

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

そして、問題を引き起こしているのはボタンです。クリックすると「Coming Soon...!」と表示されます。その周りにダイアログボックスがありません。

何か案は？

ありがとう！！

score 0 · Accepted Answer

デフォルトで 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>

jquery - .NET を使用した JQuery ダイアログ: 無関係なポストバックの後に非表示の Div が表示される

1 に答える 1

Related

Reference