将ModalPopupExtender TargetControlID设置为LIstView按钮 [英] Setting ModalPopupExtender TargetControlID to LIstView Button

问题描述

我想知道如何将ModalPopupExtender的TargetControlID设置为ListView上的按钮.

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

我尝试将TargetControlID设置为的按钮位于ListView的Alternating and Item模板中.因此，我相信我需要将TargetControlID设置为两个按钮，或者将其设置为两个不同的ModalPopupExtenders.

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.

这是我的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>

这与ItemTemplate的设置完全相同.

This will be the exact same setup for the ItemTemplate.

推荐答案

您可以使用Java脚本来代替:

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

<a id="showModalPopupClientButton" href="#">Open pop-up</a>
<a id="hideModalPopupViaClientButton" href="#">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>

更新(使用服务器端) 首先，您需要为弹出式扩展程序设置一个假服务器按钮(显示:无)作为目标控件ID:

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

这篇关于将ModalPopupExtender TargetControlID设置为LIstView按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！