ASP. NET uses ajax to realize paging and local page refresh function

  • 2021-09-16 06:37:12
  • OfStack

listview list implementation paging is very easy. ListView paging is very simple, plus an DataPager control, ListView ID can be given. That's what I wrote in the beginning. Some people on the Internet say that this is false paging?)


<asp:ListView ID="newBlogItems" runat="server" DataSourceID="AccessDataSource1" ViewStateMode="Disabled">
       <ItemTemplate>
            <li class="newBlogItem">
             .....
             </li>
        </ItemTemplate>
 </asp:ListView>
<asp:DataPager ID="DataPager1" runat="server" PageSize="15" PagedControlID="newBlogItems" ViewStateMode="Disabled">
   <Fields>
        <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False" />
        <asp:NumericPagerField />
         <asp:NextPreviousPagerField ButtonType="Link" ShowLastPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False" />
    </Fields>
</asp:DataPager>

However, after writing in this way, the effect of clicking paging is to refresh the whole page. It is of course unfriendly for the page to jump around after refreshing. Therefore, to update the page locally, I thought of the jquery plug-in at the beginning, so I downloaded the JPAGES plug-in on the Internet, but I didn't get it after playing with it for a long time, and I didn't know where there was an error. . . So abandoned the pit, or ajax! .

Using ajax method is very simple, and it is divided into three steps to put elephants in refrigerator.

1. Introduce ajax control ScriptManager and put it in form.

2. Introduce ajax control UpdatePanel.

3. Edit UpdatePanel content.

There are mainly two, ContentTemplate and Trigger. Throw listView into ContentTemplate first. Then add asp: AsyncPostBackTrigger to Trigger, point ID to the previous paging control DataPager control, and that's it. The code is as follows:


<asp:UpdatePanel runat="server">
  <ContentTemplate>
  <%-- Data source --%>
<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="C:\storage\users.accdb" SelectCommand="SELECT [userName], [blogTitle], [blogTime], [blogUrl],[statis] FROM [blog] ORDER BY [blogTime] DESC"></asp:AccessDataSource>
<asp:ListView ID="newBlogItems" runat="server" DataSourceID="AccessDataSource1" ViewStateMode="Disabled">
    <ItemTemplate>
       <li class="newBlogItem">
 Omitted here 1000 Word 
       </li>
     </ItemTemplate>
</asp:ListView>
<asp:DataPager ID="DataPager1" runat="server" PageSize="15" PagedControlID="newBlogItems" ViewStateMode="Disabled">
  <Fields>
     <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False" />
     <asp:NumericPagerField />
     <asp:NextPreviousPagerField ButtonType="Link" ShowLastPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False" />
  </Fields>
 </asp:DataPager>
</ContentTemplate>

 <Triggers>
      <asp:AsyncPostBackTrigger ControlID="DataPager1"/>
 </Triggers>
 </asp:UpdatePanel>

Related articles: