MSFT Ajax - Solution for controls dissappearing when a single Modal is used...
I have blogged about this before when Microsoft Ajax was formerly known as Atlas. The issue was that you could have a single <ModalPopupExtender> that is controlled from code behind using the .show() and .hide() methods. The goal was to have a a gridview selection and use the single modal to display forms for editing or displaying the records.
With the new Beta release I had hoped that all my previous issues of the actual gridview and dropdownlists dissapearing would of been resolved. Not quite. And I was able to duplicate issue with the Ajax.ToolKit example site. Here are some screenshots:
This is what the UI should look like before and after a modal form is displayed:
Now, notice how everything dissapears after the Modal is invoked and closed:
Notice how everything dissappears...
So, I spent again - an incredible amount of time trying to track the issue down. Literally tried everything I possibly could. You can see the the whole step by step process here on Asp.Net's Ajax UI Forums.
The Solution was this:
Step 1:
Place the <ModalPopup> wrapped in a <UpdatePanel> on the page BEFORE the <UpdatePanel (NOTE: Mode must be "Always")> > that contains <GridView && Other Controls>.
Step 2:
Place a <AlwaysVisible> and <UpdateProgressBelow the <ModalPopup> and before the end tags of the <UpdateUpdate> that wraps the modal.
Sample code here:
|
<% @ Control Language="c#" AutoEventWireup="true" %>
<% @ Register TagPrefix="community" Assembly="Cavalia.SkinHandler" Namespace="Cavalia" %>
<% @ Register TagPrefix="community" Assembly="Cavalia.Admin" Namespace="Cavalia.Admin" %>
<% @ Register TagPrefix="community" Assembly="Cavalia.ContentPages" Namespace="Cavalia" %>
<% @ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<% @ 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" %>
< ajax:ScriptManager ID="SM" runat="server" EnablePartialRendering="true" />
<ajax:UpdatePanel ID="UpdatePanelModal" UpdateMode="Conditional" RenderMode="Inline" runat="server" >
<ContentTemplate>
<asp:Panel ID="PanelModal" runat="server" BackColor="Azure" CssClass="modalPopup"
Height="400px" ScrollBars="Vertical" Style="display: none" Width="600px">
<asp:PlaceHolder ID="ctlLoad" Visible="true" EnableViewState="true" runat="server" />
</asp:Panel>
<asp:Button ID="Target" runat="server" style="display: none" />
<ajax:ModalPopupExtender ID="MyPopUp" runat="server"
BackgroundCssClass="modalBackground"
DropShadow="true" PopupControlID="PanelModal"
TargetControlID="Target" >
</ajax:ModalPopupExtender>
<asp:Panel ID="pnlLoading" runat="server" CssClass="pnlLoading">
<ajax:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<div style="border:2px solid #0099FF; background-color:#EFEFEF; padding:10px; width:200px; height:20px;">
<img id="updateImage" src="" alt="missing image" runat="server" /> please waite...
</div>
</ProgressTemplate>
</ajax:UpdateProgress>
</ asp:Panel>
< ajax:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server"
TargetControlID="pnlLoading"
VerticalSide="top"
HorizontalSide="left"
VerticalOffset="10"
HorizontalOffset="10"
ScrollEffectDuration=".1" />
</ContentTemplate>
</ajax:UpdatePanel>
<ajax:UpdatePanel ID="UpdatePanel1" UpdateMode="Always" RenderMode="Inline" runat="server" >
<ContentTemplate>
<asp:GridView id="grdData" width="100%" AutoGenerateColumns="False" AllowPaging="False" PageSize="20"
BorderColor="#999999" BorderStyle="None" BorderWidth="1px"
BackColor="White" CellPadding="3" GridLines="Vertical" Runat="Server" ShowFooter="True" />
<asp:Button ID = "btnAddNew" runat="server" Visible="true" Text="Add New Entry" /><asp:Button ID="btnDelChecked" runat="server" Text="Delete Checked" /><asp:Button ID="btnCancel" runat="server" Text="Exit" />
</ContentTemplate>
</ajax:UpdatePanel>
|
Again, not sure why this "Combination" works... but until someone actually looks at the issue and solves it at least there is a workaround. The forum post contains alot more info and so I didn't bother to duplicate all the steps. This is my solution and I hope that you find it useful if you find yourself in the same position.