在ModalPopupExtender中使用GridView分页的行为奇怪

Question

我有一个包含GridView的ModalPopUpExtender，我想在按钮单击时进行填充，实现以下功能：

protected void btnViewRecipients_Click(object sender, EventArgs e)
{
    ModalPopupExtender1.Show();
    BindData();
}

这很简单。BindData做到了这一点：

protected void BindData()
{
    try
    {
        SqlCommand sqlCommand = new SqlCommand();

        string connectionString = "Data Source=SERVER\\DB1;Initial Catalog=Survey;User ID=abcde;Password=12345;";

        using (SqlConnection sqlConnection = new SqlConnection(connectionString))
        {
            sqlCommand = sqlConnection.CreateCommand();

            sqlCommand.CommandText = "Select * From [Survey].[dbo].[data]";

            SqlDataAdapter sda = new SqlDataAdapter(sqlCommand.CommandText, connectionString);

            SqlCommandBuilder scb = new SqlCommandBuilder(sda);

            //Create a DataTable to hold the query results.

            //Fill the DataTable.
            sda.Fill(dTable);

            //Set the DataGridView DataSource.
            gvRecords.DataSource = dTable;
            gvRecords.DataBind();

            sqlConnection.Close();
        }
    }
    catch (SqlException ex)
    {
        //Console.WriteLine(ex.StackTrace);
    }
}

现在一切都很顺利，我可以看到带有数据的网格。然后我打开了自动分页并创建了 gvRecords_PageIndexChanged 方法调用。我还打开了 EnableSortingAndPagingCallbacks。

protected void gvRecords_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    gvRecords.PageIndex = e.NewPageIndex;
    gvRecords.DataSource = dTable;
    gvRecords.DataBind();
}

这个功能非常奇怪。我注意到当我点击页面号码时，表格会变成空白，并显示之前定义的EmptyDataText。但是，当我关闭ModalPopupExtender并再次打开它（再次点击按钮）时，它会向我显示正确的页面和数据！例如，如果我点击了第3页，然后得到一个空白表格，现在重新打开MPE将向我显示第3页内容的网格视图。我想这可能是viewstate存储在某个地方，但为什么网格视图不会立即向我显示页面呢？

我真的卡在这里，无法理解我错过了什么！

非常感谢任何帮助，我已经在网上搜索了很久，但也许这是如此微不足道和明显，以至于没有人需要问吗？！

- jxm_uk

Answer 1

编辑：我已经使用模式对话框、UpdatePanels和ListViews工作了好几年，我们会解决这个问题的，但是看到整个标记会更好。

根据你的评论，我建议;

1. 将整个模态标记放入UpdatePanel中。确保将ID和UpdateMode设置为conditional;

   <asp:UpdatePanel ID="upModal" runat="server" UpdateMode="Conditional">
      <ContentTemplate>      
      </ContentTemplate>
   </asp:UpdatePanel>
   

2. 通常我会使用ASP:Panel作为我的更新面板内DIV元素；

   <asp:Panel ID="pnlPopup" runat="server" CssClass="ModalPanel">
   

3. 然后将GridView（或在我的情况下是ListView）放置在面板中

4. 在您的代码后台中，当您调用gvRecords.Databind()之后，请调用upModal.Update()

   protected void gvRecords_PageIndexChanging(object sender, GridViewPageEventArgs e)
   {
      gvRecords.PageIndex = e.NewPageIndex;
      gvRecords.DataSource = dTable;
      gvRecords.DataBind();
      upModal.Update();
   }
   

- Darren S

---

非常感谢您抽出时间，真的很感激。 - jxm_uk

嗨，我尝试了你的建议，有些运气好，基本上我创建了一个UpdatePanel，在其中放置了带有表格和GridView的asp:panel。还更新了PageIndexChanging，它起作用了！然而，当我点击页面数字时，MPE会立即跳到页面底部，但数据更新是正确的。 - jxm_uk

明白了，谢谢。我会发布可用的代码...非常奇怪，我不得不设置TargetControlID="hiddenButton"和PopupControlID="upModal"，并将MPE放在updatepanel之外。 - jxm_uk

Answer 2

我终于搞定了，我不得不将PopupControlID设置为upModal，即updatepanel的ID，而不是内部面板。目标控件ID也必须指向一个隐藏的按钮，因为许多人发现在使用MPE时必须这样做...

无论如何，开始吧：

    <asp:Button ID="hiddenButton" runat="server" Text="" style="display:none;" />
    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" Enabled="True" TargetControlID="hiddenButton" PopupControlID="upModal" BehaviorID="modalbehavior" BackgroundCssClass="modalBackground"  OnCancelScript="cancelClick();" CancelControlID="closePopup">
    </ajaxToolkit:ModalPopupExtender>

    <asp:UpdatePanel runat="server" ID="upModal" UpdateMode="Conditional">
        <ContentTemplate>

            <asp:Panel id="pnlPopup" runat="server" class="ModalPanel" >

                <table cellpadding="5" cellspacing="5" class="topBanner" style="width:100%;">
                    <tr>
                        <td width="50">
                            <asp:LinkButton ID="closePopup" runat="server" onclick="LinkButton1_Click" CssClass="ClosePopupCls">Close 
                            [x]</asp:LinkButton>
                        </td>
                        <td align="center">
                            <asp:Label ID="lbl" runat="server" Text="Status"></asp:Label>
                        </td>
                        <td width="25">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <asp:GridView ID="gvRecords" runat="server" AllowPaging="True" 
                                BackColor="White" EmptyDataText="No Record Found" 
                                EnableSortingAndPagingCallbacks="True" ForeColor="GrayText" Height="600" 
                                onpageindexchanging="gvRecords_PageIndexChanging" Width="800">
                            </asp:GridView>
                        </td>
                    </tr>
                </table>
            </asp:Panel>

        </ContentTemplate>
    </asp:UpdatePanel>

- jxm_uk