Question

I am currently developing an ASP.net c# application. I have a grid view which has bound link buttons inside. When the link button is pressed I want to display the modal popup using a fade in animation and a fade out animation when a button inside the modal popup is clicked.

I have added the animation extender into the code and set the TargetControlID to the ID of the link button, however, when I try to run the website it displays the error System.InvalidOperationException the TargetControID of ModalPopupExtender is not valid. A control with ID ‘sofLink’ could not be found. sofLink is the ID of the LinkButton.

Below is the code for the grid view

<asp:GridView ID="tblSoftware" runat="server" Width="100%"
                        EnableModelValidation="True" AutoGenerateColumns="False" 
                        onselectedindexchanged="tblSoftware_SelectedIndexChanged"
                        CellPadding="2">
                        <Columns>
                            <asp:TemplateField HeaderText="Software Name">
                                <ItemTemplate>
                                <asp:LinkButton ID="sofLink" Text='<%# Bind("sof_softwareName") %>' 
                                 CommandName="sofID" OnCommand="GetSoftwareModal" CommandArgument='<%# Eval("sof_id") %>' runat="server" />
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:BoundField DataField="sof_platform" HeaderText="Platform" ReadOnly="True" SortExpression="sof_platform" />
                        </Columns>
                        <HeaderStyle CssClass="gridHeader" />
                        <PagerSettings Position="Bottom" />
                        <PagerStyle HorizontalAlign="Right" VerticalAlign="Middle" CssClass="gridPage" />
                        <AlternatingRowStyle BackColor="White"></AlternatingRowStyle>
                    </asp:GridView>

And below is the code for the ModalPopupExtender

<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlID="sofLink"
                    PopupControlID="ModalPanel" DropShadow="true" Drag="true" OkControlID="OKButton" />

               <asp:Panel ID="ModalPanel"  runat="server" Width="500px" style="width: auto; height: auto;" CssClass="modalPopup">
                    <asp:Label ID="softwareTitle" Font-Bold="true" Font-Size="Medium" runat="server" Width="100%" style="text-align: center;" /><br /><br />
                    <asp:Literal ID="litSoftware" runat="server"></asp:Literal>
                    <asp:Button id="OKButton" runat="server" Text="Close" style="position: relative; right: 0px; width: 100px;" />
               </asp:Panel>

               <asp:ScriptManager ID="asm" runat="server" />

And below is the code for the animation

       <ajaxToolkit:AnimationExtender ID="popupAnimation" runat="server"
            TargetControlID="sofLink">

            <Animations>
                <OnClick>
                    <Parallel AnimationTarget="ModalPanel"
                    Duration="0.3" Fps="25">
                    <FadeIn />
                    </Parallel>
                </OnClick>
            </Animations>
       </ajaxToolkit:AnimationExtender>

Thanks for any help you can provide.

Answer 1

The TargetControlID (as far as I am aware) should be a control in the popup panel itself, not in the grid control. When I use the ModalPopupExtender I usually use an asp:Button with ‘display:none’ as the TargetControlID. Eg,

<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btnPopup"
                PopupControlID="ModalPanel" DropShadow="true" Drag="true" OkControlID="OKButton" />
<asp:Panel ID="ModalPanel"  runat="server" Width="500px" style="width: auto; height: auto;" CssClass="modalPopup">
<asp:Button id="btnPopup" runat="server" style="display:none" />

In the code-behind you have to control the showing and hiding of the control base on an event, eg, GetSoftwareModal. You will also also to bind what you need if applicable.

Hope that helps.