Fatal编程技术网
  • jquery/
  • JQuery对话框w/.NET：在不相关的回发后显示隐藏的Div

JQuery对话框w/.NET：在不相关的回发后显示隐藏的Div

jquery asp.net

JQuery对话框w/.NET：在不相关的回发后显示隐藏的Div,jquery,asp.net,webforms,postback,dialog,Jquery,Asp.net,Webforms,Postback,Dialog,我使用的是一个非常简单的JQuery对话框。用户单击链接，将打开以前隐藏的对话框。它的一个优点是：在同一页上有一些不相关的按钮，它们会导致帖子被退回。如果单击其中一个按钮，对话框的隐藏div将显示在屏幕上，但不显示样式 简而言之，这篇文章的要点如下： <a href="#" id="Choose_a_Customer-link"><img alt="Reliabills" src="/billingsystem/images/icn_help.png" border="0" /

我使用的是一个非常简单的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" />


马上就来

$（function（）{$（“#Choose_a_Customer”）。对话框（{autoOpen:false，按钮：[{text:“Ok”，click:function（）{$（this）.dialog（“close”）；}]，宽度：400}）；
$（“#选择客户链接”）。单击（函数（事件）{$（“#选择客户”）。对话框（“打开”）；事件。预防默认值（）；}）；
最后一个按钮是.NET按钮，它在.aspx页面中的外观如下所示：

<asp:Button ID="cmd_clients" runat="server" Text="Go >" ValidationGroup="client" />
这是导致问题的按钮。当它被点击时，我看到“即将到来…”而周围没有对话框

有什么想法吗

谢谢

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

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

<%@ 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"  />

<%@ 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>


对话1的内容

对话2的内容

对话3的内容
好吧，这解决了最初的问题！但是，现在回发之后，对话框根本不会打开。我猜从技术上讲，这不是一个新问题，因为在您建议的修复之前也不会出现。朝着正确的方向迈出了一步！关于如何让脚本在回发后仍能工作，有什么建议吗？谢谢谢谢你，鲍里斯。我读了这篇文章，但我不知道如何在这种情况下应用它$（文档）.ready（）与pageLoad（）的比较。。。我不明白这怎么适用。如果你愿意解释，我愿意学习！我更改了答案，请尝试：$（函数pageLoad（）{…和：$（document）.ready（函数（）{…两者都不起作用。结果相同。也许我应该添加…。已经有一个脚本管理器，因为所有这些都在更新面板中。 
<%@ 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"  />

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)
        {
        }
    }
}

<%@ 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>