This simple example demonstrates the issue with ModalPopUps ancontrols dissapearing. This is the code from the AJaxToolKit Sample Website - modified to demonstrate the issue. When using Update() in code behind in conjunction with a ModalPopUp - the Update() process will cause controls on the original page to dissapear. In a complex scenario - I even lose gridviews. The code should be self explanatory. The Modal is one update panel and the other UI is in a second update panel.
This was an issue prior - David Anson provided this modification for the build of Atlas on 10-04-2006, 1:39 PM:
Okay, thanks for the details. To make sure I'm understanding properly, I think that the following changes will make things work more as you'd like. Please let me know if this is progress or not.
Add as the last two lines (before the closing '}') of this.initialize in ModalPopupBehavior.js:
this.registerPartialUpdateEvents();
this.partialRenderingBegin.add(Function.createDelegate(this, this._onPartialRenderingBegin));
Add immediately following this.initialize (and immediately before this.dispose) in ModalPopupBehavior.js:
this._onPartialRenderingBegin = function(sender, eventArgs) {
this.restoreTab();
}
The fix did work - however it was never incorporated...But I am no longer confident that is directly the ModalPopUp as without ever calling the Update() the page works fine and controls are never lost. Hence why I am posting this in this forum and not the toolkit.
Three additional buttons are added for demonstratation. The labels should be self-explanatory. Buttons 1 - 3 are inside the UpdatePanel2 and Modal is in UpdatePanel1.
1. Button justs calls a modal update() in code behind. This is to demontrate the issue is not necessarily with the calling of Update() from code in a non modal enviroment at least.
2. Button calls the Update() twice -again to verify
3. Button invokes the show() of the modal and does an update() to simulate loading of dynamic controls etc that may be inserted in the modal during 'showtime'
a. 1st click - all seems normal - select something and close the modal
b 2nd click - all DDLs dissapear.
4. The last button is outside all update buttons and invokes the same event handler as in scenario#3. However - with it being outside the update panel - no loss of controls.
<%@ Page Language="C#" MasterPageFile="~/DefaultMaster.master" AutoEventWireup="true" CodeFile="ModalPopup.aspx.cs" Inherits="ModalPopup_ModalPopup" Title="ModalPopup Sample" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<%@ Register Assembly="Microsoft.Web.Preview" Namespace="Microsoft.Web.UI.Controls" TagPrefix="ajax" %>
<%@ Register Assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="Microsoft.Web.UI" TagPrefix="ajax" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:ScriptManager id="ScriptManager" runat="server"></asp:ScriptManager>
<div class="demoarea">
<div class="demoheading">ModalPopup Demonstration</div>
<p id="Paragraph1"><%= GetContentFillerText()%></p>
<br />
<script type="text/javascript">
var styleToSelect;
function onOk() {
$get('Paragraph1').className = styleToSelect;
}
</script>
</div>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server" >
<ContentTemplate>
Sort By: <asp:DropDownList id="dropSortBy" AutoPostBack="True" Runat="Server" Visible="true">
<asp:ListItem Text="Named Page ID" Value="0" />
<asp:ListItem Text="Grouping" Value="2" />
<asp:ListItem Text="Community" Value="3" />
</asp:DropDownList> Order By: <asp:DropDownList id="dropOrderBy" AutoPostBack="True" Runat="Server">
<asp:ListItem Text="Descending" value="0" />
<asp:ListItem Text="Ascending" value="1" />
</asp:DropDownList>
</br>
<asp:GridView id="myGrid" runat="server" DataSourceID="xml1" AutoGenerateColumns="True" AllowPaging="True">
</asp:GridView>
<asp:XmlDataSource ID="xml1" runat="server" DataFile="~/App_Data/CarsService.xml" XPath="/CarsService/make" />
</br>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server" >
<ContentTemplate>
<asp:Panel style="DISPLAY: none" id="Panel1" runat="server" CssClass="modalPopup">
<p>Choose the paragraph style you would like:</p>
<p ><input type="radio" name="Radio" id="RadioA" onclick="styleToSelect = 'sampleStyleA';" checked="checked" /><label for="RadioA" class="sampleStyleA" style="padding:3px;">Sample paragraph text</label></p>
<p ><input type="radio" name="Radio" id="RadioB" onclick="styleToSelect = 'sampleStyleB';" /><label for="RadioB" class="sampleStyleB" style="padding:3px;">Sample paragraph text</label></p>
<p ><input type="radio" name="Radio" id="RadioC" onclick="styleToSelect = 'sampleStyleC';" /><label for="RadioC" class="sampleStyleC" style="padding:3px;">Sample paragraph text</label></p>
<p ><input type="radio" name="Radio" id="RadioD" onclick="styleToSelect = 'sampleStyleD';" /><label for="RadioD" class="sampleStyleD" style="padding:3px;">Sample paragraph text</label></p>
<p style="text-align:center;">
<asp:Button ID="OkButton" runat="server" Text="OK"></asp:Button>
<asp:Button ID="CancelButton" runat="server" Text="Cancel"></asp:Button>
</p>
</asp:Panel> <asp:LinkButton id="LinkButton1" runat="server" Text="Click here to change the paragraph style"></asp:LinkButton></br></br>
These buttons are all in UpdatePanel #2</br>
<asp:Button id="btnHide" text="do just Update()" runat="server" OnClick="btnHide_Click" /></br>
<asp:Button id="btnHide2" text="Perform multiple Update()" runat="server" OnClick="btnHide_Click2" /></br>
First click works fine, second click : databound objects dissappear(gridviews bound in code behind - in this example the gridview will always show but if populated in code behind would dissappear.) See the dropdownlists dissappear.</br>
<asp:Button id="btnModal" text="Show Modal and do Update()" runat="server" OnClick="btnShow_Click" /> </br>
<ajaxToolkit:ModalPopupExtender id="ModalPopupExtender" runat="server" CancelControlID="CancelButton" OnOkScript="onOk()" OkControlID="OkButton" DropShadow="true" BackgroundCssClass="modalBackground" PopupControlID="Panel1" TargetControlID="LinkButton1"></ajaxToolkit:ModalPopupExtender>
</ContentTemplate>
</asp:UpdatePanel> This is outside the Update Panels and it works...</br>
<asp:Button id="Button1" text="Show Modal and do Update()Outside the Update Panels" runat="server" OnClick="btnShow_Click" /> </br>
<div class="demobottom"></div></asp:Content>
--------------------------------------------------------------------------------
Colorized by: CarlosAg.CodeColorizer // (c) Copyright Microsoft Corporation.
// This source is subject to the Microsoft Permissive License.
// See http://www.microsoft.com/resources/sharedsource/licensingbasics/sharedsourcelicenses.mspx.
// All other rights reserved.
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class ModalPopup_ModalPopup : CommonPage
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnShow_Click(object sender, EventArgs e)
{
UpdatePanel1.Update();
ModalPopupExtender.Show();
}
protected void btnHide_Click(object sender, EventArgs e)
{
UpdatePanel1.Update();
}
protected void btnHide_Click2(object sender, EventArgs e)
{
UpdatePanel1.Update();
UpdatePanel1.Update();
}
}