Setting ModalPopupExtender TargetControlID to LIstView Button

I am wondering how I am able to set the TargetControlID of my ModalPopupExtender to the Button on my ListView.

The button that I am trying to set the TargetControlID to is in the Alternating and Item template on the ListView. So I believe I would need to set the TargetControlID to either two buttons, or have two different ModalPopupExtenders.

Here is my ModalPopupExtender:

<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="Button1"
    CancelControlID="Button2" BackgroundCssClass="Background"  OnLoad="mp1_Load">
</cc1:ModalPopupExtender>

And here is the alternating template for my listview:

<AlternatingItemTemplate>
 <!--Input fields that do not apply to the question-->
 ..
 ..
 ..
<asp:Button ID="Button1" runat="server" Text="Show Popup" />
</AlternatingItemTemplate>

This will be the exact same setup for the ItemTemplate.

Contents hide

Answers:

Method 1

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You could use java-script to do the job instead:

<a id="showModalPopupClientButton" href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Open pop-up</a>
<a id="hideModalPopupViaClientButton" href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Close pop-up</a>

<script type="text/javascript">

    // Add click handlers for buttons to show and hide modal popup on pageLoad
    function pageLoad() {
        $addHandler($get("showModalPopupClientButton"), 'click', showModalPopupViaClient);
        $addHandler($get("hideModalPopupViaClientButton"), 'click', hideModalPopupViaClient);        
    }

    function showModalPopupViaClient(ev) {
        ev.preventDefault();
        var modalPopupBehavior = $find('programmaticModalPopupBehavior');
        modalPopupBehavior.show();
    }

    function hideModalPopupViaClient(ev) {
        ev.preventDefault();        
        var modalPopupBehavior = $find('programmaticModalPopupBehavior');
        modalPopupBehavior.hide();
    }
</script>

UPDATE (using server side)
You need to set a fake server button(display: none) as a target control id to your popup extender first:

 <asp:Button ID="Button1" runat="server" Style="display: none;" />
 <cc1:ModalPopupExtender ID="mp1" runat="server" 
    PopupControlID="Panl1"      TargetControlID="Button1"
    CancelControlID="Button2" BackgroundCssClass="Background"  
    OnLoad="mp1_Load">
</cc1:ModalPopupExtender>

on your code behind whenever you want to display or close the popup, you just need to call the following functions:

  mp1.Show();    //to display popup

  mp1.Hide()     //to close popup

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating