JQuery Dialog with .NET : 숨겨진 Div가 관련없는 포스트 백 이후에 표시됩니다.

아주 간단한 JQuery 대화 상자를 사용하고 있습니다. 사용자가 링크를 클릭하면 이전에 숨겨진 대화 상자가 열립니다. 그것은 하나의 catch로 훌륭하게 작동합니다 : 포스트 백을 야기하는 관련없는 버튼이 같은 페이지에 있습니다. 이 버튼 중 하나를 클릭하면 대화 상자의 숨겨진 div가 화면에 표시되지만 스타일은 표시되지 않습니다.JQuery Dialog with .NET : 숨겨진 Div가 관련없는 포스트 백 이후에 표시됩니다.

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

: 마지막으로 버튼을 .aspx 페이지에서이처럼 보이는 .NET 버튼입니다

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

그건 :

이 게시물에 대한 필수로 내려 박탈

, 여기에 내가있어 무엇

그리고 문제를 일으키는 버튼입니다. 클릭하면 "곧 나옵니다 ...!" 주위에 대화 상자가 없습니다.

아이디어가 있으십니까?

감사합니다.

출처

2012-11-21 Casey Crookston

봅니다 디스플레이를 설정 없습니다 : 사업부에 대한 아무 것도 기본적으로 :

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

출처

2012-11-21 05:19:32

음! 그러나 포스트 백 이후에는 대화 상자가 전혀 열리지 않습니다. 기술적으로는 새로운 문제는 아니며 제안 된 해결 방법 중 하나이기도합니다. 올바른 방향으로 나아가십시오! 다시 게시 후 스크립트가 작동하도록하는 방법에 대한 조언이 있습니까? 감사!! –

여기를보십시오 : http://encosia.com/document-ready-and-pageload-are-not-the-same/ –

고마워요. 보리스. 나는이 기사를 읽었지 만,이 경우에 적용하는 방법을 모르겠습니다. $ (document) .ready() vs pageLoad() ... 이것이 어떻게 적용되는지 이해할 수 없습니다. 나는 기꺼이 설명 할 수 있는지 배우겠습니다. ( $를 기능 pageLoad() {... 과 : : 내 ansver을 변경 –

JQuery Dialog with .NET : 숨겨진 Div가 관련없는 포스트 백 이후에 표시됩니다.

답변

관련 문제