Home > Backend Development > C#.Net Tutorial > Detailed explanation of the code example of ASP.NET using ajax to implement the function of partially refreshing the page in paging

Detailed explanation of the code example of ASP.NET using ajax to implement the function of partially refreshing the page in paging

黄舟
Release: 2017-03-23 11:25:58
Original
1870 people have browsed it

It is also very simple to use the ajax method to implement paging, mainly two, ContentTemplate and Trigger. First throw the listView into the ContentTemplate. Then add asp:AsyncPostBackTrigger to the Trigger and point the ID to the previous paging control DataPager control. For the specific implementation code, you can refer to this article

It is very easy to implement paging in listview. ListView paging is very simple, just add a DataPager control and assign the ID of the ListView. That's how I wrote it in the beginning. (Some people on the Internet say that this is pseudo-pagination?)

<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>
Copy after login

However, after writing this, the effect of clicking pagination is to refresh the entire page. After refreshing, the page will jump around, which is of course unfriendly, so it needs to be partially When updating the page, I first thought of the jquery plug-in, so I downloaded the JPAGES plug-in from the Internet. After playing with it for a long time, I still couldn't get it, and I didn't know where the error was. . . So I gave up the trap and decided to use ajax! .

It’s very simple to use the ajax method. There are three steps to install the elephant in the refrigerator.

1. Introduce the ajax control scriptManager and place it in the form.

2. Introduce ajax control UpdatePanel.

3. Edit UpdatePanel content.

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

<asp:UpdatePanel runat="server">
  <ContentTemplate>
  <%--数据源--%>
<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">
此处略去1000字
       </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>
Copy after login

The above is the detailed content of Detailed explanation of the code example of ASP.NET using ajax to implement the function of partially refreshing the page in paging. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template