ASP.net: Actualiser GridView sans actualiser la page entière? (AsyncPostBackTrigger vraiment lent)

Question

Je suis nouveau sur ASP.net et essaye de faire tourner un code super lent plus vite.

Actuellement, le code utilise un GridView dans un UpdatePanel. Le UpdatePanel se trouve dans une fenêtre contextuelle modale. Chaque fois que ce modal est ouvert, le contenu doit être actualisé. Nous faisons cela en utilisant AsyncPostBackTrigger, qui, si je comprends bien, passe par le cycle de génération de la page entière avant de retourner et de rendre la table.

.aspx.cs

public void UpdateWatchListPopup(object sender, System.EventArgs e) 
{ 
    grdWatchList.DataBind(); 
} 

.aspx:

<asp:UpdatePanel ID="UpdatePanel3" runat="server" > 

    <Triggers> 
     <asp:AsyncPostBackTrigger ControlID="UpdateWatchListPopupBtn" EventName="Click" /> 
    </Triggers> 

    <ContentTemplate> 

     <div style="display:none"> 
      <asp:Button ID="UpdateWatchListPopupBtn" runat="server" Text="" OnClick="UpdateWatchListPopup" /> 
     </div> 

     <asp:GridView ID="grdWatchList" OnSorting="grdWatchList_Sorting" runat="server" OnRowCreated="grdWatchList_RowCreated" OnRowDataBound="grdWatchList_RowDataBound" AllowSorting="true" AutoGenerateColumns="False"> 
      <Columns> 
       <asp:TemplateField> 

Ceci est vraiment lent (il faut 5 secondes pour afficher le résultat), et il est pas parce qu'il ya beaucoup de données à retourner! Ma supposition est que Page_Load() est en train de faire un tas de calculs inutiles pour rafraîchir ce GridView particulier.

Existe-t-il un autre moyen d'actualiser le GridView de manière asynchrone? J'ai pensé à utiliser un WebMethod qui récupère les données et repeuple la table manuellement depuis le côté client. Je me demandais s'il y a d'autres options?

Merci

Answer 1

Vous ne devez pas nécessairement un postback pour ouvrir une fenêtre contextuelle. Voici un extrait qui utilise le jQuery UI Dialo g.

<div id="hiddenGrid" style="display: none"> 
    <asp:GridView ID="GridView1" runat="server"></asp:GridView> 
</div> 

<input type="button" value="Open Dialog" onclick="createPopup()" /> 

<script type="text/javascript"> 
    function createPopup() { 
     var html = document.getElementById('hiddenGrid').innerHTML; 
     $('<div />').html(html).dialog({ 
      resizable: false, 
      draggable: true, 
      modal: true, 
      width: 600, 
      height: 800, 
      create: function (event, ui) { 
       $(".ui-dialog-titlebar").html("<div onclick=\"closePopup()\" class=\"dialog-closeButton\"></div>"); 
      }, 
      open: function (event, ui) { 
       $('.ui-widget-overlay').bind('click', function() { 
        closePopup(); 
       }) 
      } 
     }); 
    } 

    function closePopup() { 
     $(".ui-dialog-content").dialog("destroy"); 
    } 
</script> 

Mais si vous devez ouvrir le Modal avec un postback, vous pouvez vérifier si elle est un Async et PostBack sauter les éléments Page_Load vous n'avez pas besoin.

protected void Page_Load(object sender, EventArgs e) 
{ 
    if (ScriptManager.GetCurrent(this.Page).IsInAsyncPostBack) 
    { 
     //updatepanel page load 
    } 
    else 
    { 
     //normal page load 
    } 
} 

Answer 2

Vous voudrez peut-être envisager d'utiliser une grille côté client, je me sers Jquery datables depuis un certain temps maintenant, la plupart du temps avec ASPNET MVC, mais vous pouvez également l'utiliser avec des formulaires Web. C'est vraiment facile à faire, il y a plein de bons exemples et la meilleure partie est qu'il n'y a pas de postbacks. Cet outil est livré avec construit dans la pagination, le tri, la recherche, etc.

Heres' un bon exemple de Jquery datatables en cours d'exécution sur le Web forme http://datatables.extrared.net/Sample/

Et voici où vous pouvez commencer à utiliser Jquery datatables https://datatables.net/