modalpopupextender gridview 分页不起作用答案

【问题标题】：modalpopupextender gridview paging not workingmodalpopupextender gridview 分页不起作用
【发布时间】：2016-08-08 11:12:32
【问题描述】：

modalpopupextender 中的 GridView 分页问题：我在 modalpopupextender 中有一个 GridView……但问题是 Paging 在其中不起作用……

我的 HTML 代码是：

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:gridview runat="server" id="GridView2" showfooter="true" 
    autogeneratecolumns="false" GridLines="None" CssClass="table" 
    HeaderStyle-CssClass="th" RowStyle-CssClass="td" Width="100%" 
    OnRowCreated="GridView2_RowCreated"   >
    <columns>

       <asp:TemplateField HeaderText="Date" >
<ItemTemplate>
<asp:LinkButton ID="Date" runat="server" CausesValidation="false" CommandName="Date_Select"  Text='<%#Eval("Date","{0:yyyy-MM-dd}") %>' onclick="Date1_Click" EnableTheming="False"></asp:LinkButton>


</ItemTemplate>
<EditItemTemplate>

</EditItemTemplate>
</asp:TemplateField>


         <asp:boundfield datafield="" headertext="Total" footerstyle-font-bold="true" 
            footertext="Grand Total:" >
<FooterStyle Font-Bold="True"></FooterStyle>
        </asp:boundfield>

        <asp:boundfield datafield="MIns" headertext="Mins" 
            footerstyle-font-bold="true"   >
 <FooterStyle Font-Bold="True"></FooterStyle>
        </asp:boundfield>
        <asp:boundfield datafield="Amount" headertext="Amount" footerstyle-font-bold="true" 
             >
<FooterStyle Font-Bold="True"></FooterStyle>
        </asp:boundfield>

        <asp:boundfield datafield="Profit" headertext="Profit"  
            footerstyle-font-bold="true">
<FooterStyle Font-Bold="True"></FooterStyle>
        </asp:boundfield>

   </columns>

 <HeaderStyle BackColor="#CEFF99" ForeColor="Black" BorderColor="#C1FF80" BorderStyle="Solid" 
              BorderWidth="1px"></HeaderStyle>

 <RowStyle CssClass="td"></RowStyle>
</asp:gridview>


<asp:Button runat="server" ID="btnModalPopUp1" 
        style="display:none"/>


 <AjaxToolkit:ModalPopupExtender ID="modalPopUpExtender2" 
         runat="server"
         TargetControlID="btnModalPopUp1"
         PopupControlID="pnlPopUp1"
         BackgroundCssClass="modalBackground" CancelControlID="btnCancel1" X="570" Y="10"
        >
 </AjaxToolkit:ModalPopupExtender>
            <asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2">
     <ProgressTemplate>
      <div class="modal">
        <div class="center" align="center">
          This can take a while. Please be patient...
          <img alt="" src="Images/loader.gif" />
         </div>
       </div>
      </ProgressTemplate>
     </asp:UpdateProgress>


 <asp:Panel runat="Server" ID="pnlPopUp1" CssClass="modalPopup">
 <asp:Button runat="server" ID="btnCancel1" 
         Text="Close"/>
 <asp:gridview runat="server" id="GridView18" showfooter="true" 
    autogeneratecolumns="false" GridLines="None" CssClass="table" 
    HeaderStyle-CssClass="th" RowStyle-CssClass="td" Width="100%" 
    AllowPaging="True" OnPageIndexChanging="OnPageIndexChanging" PageSize="10" 
    EnableSortingAndPagingCallbacks="True"   >
     <columns>

        <asp:boundfield datafield="Customer" headertext="Customer" 
            footerstyle-font-bold="true"   >
  <FooterStyle Font-Bold="True"></FooterStyle>
        </asp:boundfield>


         <asp:boundfield datafield="MIns" headertext="Mins" footerstyle-font-bold="true" >
 <FooterStyle Font-Bold="True"></FooterStyle>
        </asp:boundfield>
        <asp:boundfield datafield="Amount" headertext="Amount" 
            footerstyle-font-bold="true"   >
 <FooterStyle Font-Bold="True"></FooterStyle>
        </asp:boundfield>
        <asp:boundfield datafield="Profit" headertext="Profit" footerstyle-font-bold="true" 
             >
 <FooterStyle Font-Bold="True"></FooterStyle>
        </asp:boundfield>



    </columns>

 <HeaderStyle BackColor="#CEFF99" ForeColor="Black" BorderColor="#C1FF80" BorderStyle="Solid" 
              BorderWidth="1px"></HeaderStyle>

   <RowStyle CssClass="td"></RowStyle>
 </asp:gridview>
 </asp:Panel>



</ContentTemplate>
 <Triggers>
 <asp:AsyncPostBackTrigger ControlID = "GridView18" EventName="PageIndexChanging" />

  </Triggers>
   </asp:UpdatePanel>

这是我的分页代码：

protected void OnPageIndexChanging(object sender, GridViewPageEventArgs e)
{
    GridView18.DataSource = ds;
    GridView18.PageIndex = e.NewPageIndex;
    GridView18.DataBind();
    modalPopUpExtender2.Show();

     }

非常感谢任何帮助...在此先感谢...

【问题讨论】：

标签： c# asp.net visual-studio-2010 gridview asp.net-ajax

【解决方案1】：

首先：如果您转到 MSDN concerning UpdatePanels 并向下滚动到该部分：

与 UpdatePanel 控件不兼容的控件

你会发现这个：

GridView 和 DetailsView 控件的 EnableSortingAndPagingCallbacks 属性设置为 true。

对 Gridview 进行分页需要回发。通常，当您使用任何类型的模式/弹出控件时，它会使用 JS 来激活。但是回发会消除弹出窗口...所以...

主要是您需要能够在回发之间保持弹出状态。有几种方法可以解决这个问题。

最简单的方法是消除分页并使用滚动，假设项目总数是一个可管理的列表。如果列表太长，则可能对用户来说信息太多，应该过滤到可管理的列表中。

如果必须使用分页，则需要使用可以承受回发的弹出控件，这可能意味着使用<iframe>。我对 AjaxControlToolkit 的了解还不够，无法说是否可以这样做。

就个人而言，当我需要通过弹出窗口执行您想要执行的操作时，我会使用Colorbox。 但这也需要jquery。

我将 gridview 移动到独立页面并配置 Colorbox 以在 iframe 中打开页面。通过这种方式，iframe 管理分页回发。

【讨论】：