将ModalPopupExtender TargetControlID设置为LIstView按钮

时间:2015-02-25 18:22:02

标签: c# asp.net listview simplemodal

我想知道如何将TargetControlID的{​​{1}}设置为ModalPopupExtender上的按钮。

我尝试将ListView设置为的按钮位于ListView的Alternating和Item模板中。所以我认为我需要将TargetControlID设置为两个按钮,或者有两个不同的TargetControlID

这是我的ModalPopupExtenders

ModalPopupExtender

这是我的listview的交替模板:

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

这将是与ItemTemplate完全相同的设置。

1 个答案:

答案 0 :(得分:1)

您可以使用java-script来完成工作:

<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>

更新(使用服务器端) 您需要首先将假服务器按钮(display:none)设置为弹出扩展器的目标控件ID:

 <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>

在你想要显示或关闭弹出窗口的代码后面,你只需要调用以下函数:

  mp1.Show();    //to display popup

  mp1.Hide()     //to close popup