Question

I am hoping that someone can help shed some light on this issue I’ve been struggling over for the last couple of days. I have been using the AJAX Toolkit ModalPopupExtender outside of ListViews perfectly fine, but for some reason I can’t seem to wrap my head around why this code is not working inside of a ListView item template.

Basically, what I am trying to achive is: a user is presented with some rows of data via the ListView in which each row displays a LinkButton with the text “Remove”. I want the user to be able to click on this link, and a modal dialog box pop up and ask them if they are sure they want to do this. If they click the okay button, it should fire off an event and do the necessary database work and reload the page… if not, cancel the postback request and clear the dialog box.

With the code below, I have successuflly hooked into the link button via the targetid property of the ModalPopupExtender so the dialog does popup. However, the okay button does not fire off the event I’ve written (I’ve placed a breakpoint in the codebehind within the event, and it does not get touched). Also, the cancel button does not work as it normally would outside of the listview control.

I must be missing something fairly fundamental here, but I’m at a loss – any help would greatly be appreciated. I’m certainly open to alternative methods if this just isn’t viable.

<ItemTemplate>
        <tr>
            <td align="center">
                <asp:Label runat="server" ID="lblUserID" Text='<%# Eval("USERID") %>' Visible="false" />
                <asp:LinkButton runat="server" ID="lnkRemoveUser" Text="Remove" /> 

                <asp:Panel ID="removeUserModalPanel" runat="server">
                    <div class="popup">
                        <div class="loginTitleBar" id="Div1">
                            Remove User
                        </div>
                        <div class="popupBody">
                            <p>
                                Are you sure you want to remove this user?
                            </p>
                        </div>
                        <div class="popupControls">
                            <asp:Button id="btnRemoveUserOkay" runat="server" type="button" Text="Remove User" 
                                onclick="btnRemoveUserOkay_Click" />
                            <input id="btnRemoveUserCancel" type="button" value="Cancel" />
                        </div>
                    </div>
                </asp:Panel>

                <asp:ModalPopupExtender 
                    ID="removeUserModalPopupExtender" 
                    runat="server"
                    BackgroundCssClass="ModalPopupBG"
                    CancelControlID="btnRemoveUserCancel"
                    TargetControlID="lnkRemoveUser"
                    PopupControlID="removeUserModalPanel"
                    drag="false" >
                </asp:ModalPopupExtender>
            </td>
            <td>
                <asp:LinkButton ID="lnkUserName" runat="server" Text='<%# Eval("USERNAME") %>' />
            </td>
            <td>
                <asp:Label ID="lblFirstName" runat="server" Text='<%# Eval("FIRSTNAME") %>' />
            </td>
            <td>
                <asp:Label ID="lblLastName" runat="server" Text='<%# Eval("LASTNAME") %>' />
            </td>
            <td>
                <asp:Label ID="lblEmailAddress" runat="server" Text='<%# Eval("EMAILADDRESS") %>' />
            </td>
        </tr>
    </ItemTemplate>

Answer 1

Finally I can make this works. It’s a little tricky though. Here are the steps:

1. Move the panel, the button close and the modalpopupextender outside the listview
2. Create a HiddenField or whatever control and associate this with the TargetControlID of the ModalPopupExtender control.
3. In the button on the ListView handle the Click event, and in the code behind call directly to the ModalPopupExtender.Show() method, and voilá.

It is a little dirty indeed, but the ModalPopupExtender seems to override the click event of the listview button when it’s associated with the control.