Maison  >  Article  >  développement back-end  >  Explication détaillée de l'exemple de code d'ASP.NET utilisant ajax pour implémenter la fonction de rafraîchissement partiel de la page en pagination

Explication détaillée de l'exemple de code d'ASP.NET utilisant ajax pour implémenter la fonction de rafraîchissement partiel de la page en pagination

黄舟
黄舟original
2017-03-23 11:25:581833parcourir

Il est également très simple d'implémenter la pagination en utilisant la méthode ajax, principalement deux, ContentTemplate et Trigger. Jetez d’abord le listView dans le ContentTemplate. Ajoutez ensuite asp:AsyncPostBackTrigger au déclencheur et pointez l'ID vers le contrôle DataPager de contrôle de pagination précédent. Pour le code d'implémentation spécifique, vous pouvez vous référer à cet article

Il est très simple d'implémenter la pagination en listview. La pagination ListView est très simple, il suffit d'ajouter un contrôle DataPager et d'attribuer l'ID du ListView. C'est comme ça que je l'ai écrit au début. (Certaines personnes sur Internet disent qu'il s'agit d'une fausse 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>

Cependant, après avoir écrit ceci, l'effet de cliquer sur la pagination est d'actualiser la page entière. Après l'actualisation, la page sautera, ce qui n'est bien sûr pas convivial, il faut donc le faire partiellement En mettant à jour la page , j'ai d'abord pensé au plug-in jquery, j'ai donc téléchargé le plug-in JPAGES depuis Internet. Après avoir longtemps joué avec, je n'y suis toujours pas parvenu et je ne savais pas où se trouvait l'erreur. . . J'ai donc abandonné le piège et j'ai décidé d'utiliser ajax ! .

Il est très simple d'utiliser la méthode ajax. Il y a trois étapes pour installer l'éléphant dans le réfrigérateur.

1. Présentez le scriptManager de contrôle ajax et placez-le dans le formulaire.

2. Présentez le contrôle ajax UpdatePanel.

3. Modifier le contenu du UpdatePanel.

Principalement deux, ContentTemplate et Trigger. Jetez d’abord le listView dans le ContentTemplate. Ajoutez ensuite asp:AsyncPostBackTrigger au déclencheur et pointez l'ID vers le contrôle de pagination précédent DataPager, et c'est tout. Le code est le suivant :

<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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn