Maison > développement back-end > Tutoriel C#.Net > 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

黄舟
Libérer: 2017-03-23 11:25:58
original
1870 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal