ASP.NET AJAX UI

My Work Around......

jodywbcb — Wed, 25 Oct 2006 06:19:11 GMT

Not quite sure why this works....

I moved the UpdatePanel that contained the ModalPopup above the Update Panel that contains the gridview and associated UI interfaces.

When I place the AlwaysVisible and Progress control IN the UpdatePanel that contains the ModalPopUp - - suddenly - the gridview and DDLs remain once the the modal is closed.

Without the AlwaysVisible and Progress Control - I still get the errors listed above.....(It could be one or the other (AlwaysVisible or Progress Control) I didn't test to see if it work with one or the other... I was just shocked and amazed that this combination yielded what should of been expected results without them....

Screenshots of the issue and sample code are available here:

Re: BUG: Using UpdatePanel.Update() with Modals causes loss of controls on core page. Example Code to Reproduce Provided

jodywbcb — Wed, 25 Oct 2006 01:04:21 GMT

Bug is definately with the Modal Popup. I removed all update panels and got the same behavior - except if Firefox - the gridview dissappears but the DDLs remain but in IE DDLs and Gridview dissapear on the modal popup show().

Can someone just move this post over to the AjaxToolKitForum?

Re: BUG: Using UpdatePanel.Update() with Modals causes loss of controls on core page. Example Code to Reproduce Provided

jodywbcb — Tue, 24 Oct 2006 23:00:49 GMT

FollowUp testing...

1. I have tried using nested updated panels where the modal UpdatePanel was the 'parent' and the gridview stuff was in a child UpdatePanel. The ajax documentation on the documentation site listed all the examples for this so figured maybe that was problem...

2. Tried nested as above but reversed what was content.

3. Tried to wrap everything in one huge UpdatePanel.

4. Tried setting the properties for the UpdatePanel that wraps the gridview (which invokes the Modal UpdatePanel) as childrenastriggers = "false" and "true"

5. Removed all Update() from the code behind since the documentation eludes that it is not necessary and automatically does it during the page life cycle (and I didn't note the assertion errors by not doing as I did in the atlas versions)....

6. Forced update() on the UpdatePanel that contains the gridview before the show() of the modal popup...

Same results.....as detailed above...

Not quite sure how I can even remotedly work around this... This is the primary feature I need and only use.

[Edited:] Modified the ModalBehavior.js to include:

AjaxControlToolkit.ModalPopupBehavior.initializeBase(this, [element]);

// Properties

//added by jody

this.registerPartialUpdateEvents();

-----

This allows when everything is wrapped in a single UpdatePanel - that the DDLs do not dissapear - however - the gridview I use does dissapear (in my custom control not posted)... In the code example (first post) its still an issue...using the included changes...

Anyone with suggestions of at least a work around or confirm that I have identified this as a bug and its being looked at?

Re: BUG: Using UpdatePanel.Update() with Modals causes loss of controls on core page. Example Code to Reproduce Provided

jodywbcb — Tue, 24 Oct 2006 21:05:10 GMT

Ok - I think I have it isolated and just need to search and see if there is a resolution for. But in the scenario (code provided above - last updated with this post as well) - if the modal is invoked outside of the UpdatePanel it is in and the button invoking it is not inside any Update Panel - works as expected. However if something invokes the Modal which is in UpdatePanel1 from UpdatePanel2 - this causes the loss of display of any databound objects (with exception of the gridview - the only time the gridview is lost (so to speak) is when its databound in codebehind ).....

Re: BUG: Using UpdatePanel.Update() with Modals causes loss of controls on core page. Example Code to Reproduce Provided

jodywbcb — Tue, 24 Oct 2006 19:05:07 GMT

Additional Info: In my Complex Scenario I removed all references to the Update() - get the same symptoms... before I was always calling the Update() because I am loading controls dynamically and viewstate / control state used to get out of synch in the Atlas builds (which caused a bunch of assertion errors). In the new Ajax Beta / CTP / AjaxToolKit - I no longer get assertion errors by not calling the Update() - but the Modal still wipes out any databound controls such as gridviews, ddls, etc...

BUG: Using UpdatePanel.Update() with Modals causes loss of controls on core page. Example Code to Reproduce Provided

jodywbcb — Tue, 24 Oct 2006 18:48:00 GMT

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();
    }
}