Asp ModalPopupExtender 不显示详细信息视图

Question

当用户在 GridView 中选择“详细信息”按钮时，我在 updatePanel 中使用 ModalPopupExtender 来显示详细信息视图。

问题是，当选择按钮时，不会显示弹出窗口。我已经单步执行了代码，并且 mdlPopup.Show() 方法正在执行，但弹出窗口没有“显示”有人可以帮助我解决正在发生的事情吗？ 这是我的代码：

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetRequests"
    TypeName="RequestDAL" SortParameterName="SortExpression"></asp:ObjectDataSource>
<asp:ObjectDataSource ID="ObjectDataSourceDetails" runat="server" SelectMethod="GetRequestsDetail"
    OnSelecting="OdsDetail_Selecting" TypeName="RequestDAL"></asp:ObjectDataSource>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="RequestID"
    DataSourceID="ObjectDataSource1" EnableModelValidation="True" AllowSorting="True"
    CellPadding="10" ForeColor="#333333" GridLines="None" OnSelectedIndexChanged="gv_SelectedIndexChanged">
    <AlternatingRowStyle BackColor="White" />
    <Columns>
        <asp:CommandField ShowSelectButton="True" />
        <asp:BoundField DataField="DateSubmit" HeaderText="DateSubmit" SortExpression="DateSubmit" />
        <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="lName" />
        <asp:BoundField DataField="FirstDate" HeaderText="Date" SortExpression="FirstDate" />
        <asp:BoundField DataField="BeginTime" HeaderText="Begin Time" SortExpression="beginTime" />
        <asp:BoundField DataField="EndTime" HeaderText="End Time" SortExpression="endTime" />
        <asp:BoundField DataField="Lab" HeaderText="Lab" SortExpression="room" />
        <asp:BoundField DataField="ClassName" HeaderText="Class" SortExpression="Class" />
        <asp:BoundField DataField="Semester" HeaderText="Semester" SortExpression="term" />
        <asp:BoundField DataField="RequestID" HeaderText="RequestID" SortExpression="id" />
        <asp:TemplateField>
            <ItemTemplate>
                <asp:LinkButton ID="btnDetails" runat="server" Text="Details" CommandName="Select" /></ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <EditRowStyle BackColor="#2461BF" />
    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
    <RowStyle BackColor="#EFF3FB" />
    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
</asp:GridView>


<asp:Panel ID="pnlPopup" runat="server" Style="display: none" Width="500px">
    <asp:UpdatePanel ID="updatePnlRequestDetail" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:Button ID="btnShowPopup" runat="server" Style="display: none" />
            <Ajax:ModalPopupExtender ID="mdlPopup" runat="server" TargetControlID="btnShowPopup"
                PopupControlID="pnlPopup" CancelControlID="btnClose" BackgroundCssClass="modalBackground" />
            <asp:Label ID="lblRequestDetail" runat="server" Text="Request Detail" BackColor="LightBlue"
                Width="95%"></asp:Label>
            <asp:DetailsView ID="dvRequestDetail" DataSourceID="ObjectDataSourceDetails" runat="server"
                DefaultMode="Edit" Width="95%" BackColor="White" Visible="false">
                <Fields>
                <asp:BoundField HeaderText="Id"  DataField="RequestID" /></Fields>
            </asp:DetailsView>
            <asp:LinkButton runat="server" ID="btnClose" Text="Close" CausesValidation="false"></asp:LinkButton>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Panel>


protected void gv_SelectedIndexChanged(object sender, EventArgs e)    {

    //show the detail view to render
    dvRequestDetail.Visible = true;    
    // force the databinding
    dvRequestDetail.DataBind();
    // update the detail panel
    updatePnlRequestDetail.Update();
    //show the popup
    mdlPopup.Show();
}
protected void OdsDetail_Selecting(object sender, ObjectDataSourceSelectingEventArgs e)
{
    try
    {
        e.InputParameters["id"] = Convert.ToString(this.GridView1.DataKeys[this.GridView1.SelectedIndex].Value);

    }
    catch(Exception ex)
    {
        throw new Exception(ex.Message);
    }           
}

这全部取自我发现的使用 Modal Popup 扩展程序与 ObjectDataSources http://mattberseth.com/blog/2008/04/masterdetail_with_the_gridview.html

Answer 1

我应该做的两件事：

1. 将 GridView 设置为弹出 UpdatePanel 的 AsyncPostBackTrigger。
2. 将 TargetControl 和 ModalPopupExtender 放在 PopupControl 面板之外。

<asp:Panel ID="pnlPopup" runat="server" Style="display: none" Width="500px">
    <asp:UpdatePanel ID="updatePnlRequestDetail" runat="server" UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="GridView1" />
        </Triggers>  
        <ContentTemplate>
            <asp:Label ID="lblRequestDetail" runat="server" Text="Request Detail" BackColor="LightBlue" Width="95%"></asp:Label>
            <asp:DetailsView ID="dvRequestDetail" DataSourceID="ObjectDataSourceDetails" runat="server" DefaultMode="Edit" Width="95%" BackColor="White" Visible="false">
                <Fields>
                    <asp:BoundField HeaderText="Id"  DataField="RequestID" />
                </Fields>
            </asp:DetailsView>
            <asp:LinkButton runat="server" ID="btnClose" Text="Close" CausesValidation="false"></asp:LinkButton>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Panel>
<asp:Button ID="btnShowPopup" runat="server" Style="display: none" />
<Ajax:ModalPopupExtender ID="mdlPopup" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnlPopup" CancelControlID="btnClose" BackgroundCssClass="modalBackground" />