带中继器的Ajax Modal Popup Extender

Question

我正在使用Repeater内部的Ajax ModalPopupExtender,但由于一些javascript错误和其他东西,它没有显示.有人可以提供一个如何做到这一点的例子吗？

Answer 1

我这样做的方式:

1. 将ModalPopupExtender放在转发器控件的外部(之后).
2. 添加一个Button作为ModalPopupExtender的"假"目标,将其置于转发器的外部(之后).使用'Style ="display:none"'隐藏用户的按钮.不应将OnClick事件绑定到此按钮.
3. 将ModalPopupExtender的目标面板放在Repeater之外.
4. 在转发器的项目模板中添加带有OnClick的链接按钮,使用linkbutton允许您使用commandArgument,它可以绑定到DataBinder - 比如记录ID
5. 在代码隐藏中创建一个子处理转发器中链接按钮的onclick事件.如果需要,请将发送方对象的directCast指向链接按钮,以便您可以访问commandArgument.
6. 适当填充ModalPopupExtender目标面板
7. 做一个ModalPopupExtender.show()

HTML

<ul id="Repeater">
<asp:Repeater ID="rptMain" runat="server">
  <HeaderTemplate>
    <span class="RepeaterHeader">
      <li>
        Edit
      </li>
    </span>
    <div class="clear"></div>
  </HeaderTemplate>
  <ItemTemplate>
    <li class="RptLeadItemEdit">
      <asp:LinkButton ID="btEdit" runat="server" Text="Edit"
           CommandArgument='<%#DataBinder.Eval(Container.DataItem, "ID")%>' 
           OnClick="OpenMPEEdit" />
    </li>
    <div class="clear"></div>
  </ItemTemplate>
 </asp:Repeater>
</ul>
<asp:Button ID="MpeFakeTarget" runat="server" 
     CausesValidation="False" Style="display:none" />
<asp:ModalPopupExtender ID="mpeEdit" runat="server" 
     TargetControlId="MpeFakeTarget" 
     PopupControlID="pnlEdit" 
     OkControlID="btCloseMPE" 
     BackgroundCssClass="ModalPopupBG" />
<asp:Panel CssClass="ModalPanel" runat="server" ID="pnlEdit">
  EDIT LEAD
  <asp:Label runat="server" ID="MPETEST"></asp:Label>
  <asp:Button runat="server" ID="btCloseMPE" text="Close" />
</asp:Panel>

代码背后

Protected Sub OpenMPEEdit(ByVal sender As Object, ByVal e As System.EventArgs)
        Dim wLink As New LinkButton
        wLink = DirectCast(sender, LinkButton)
        MPETEST.Text = "ID = " & wLink.CommandArgument
        mpeEdit.Show()
End Sub