ASP.Net: Comment ajouter des lignes à un répéteur utilisant DOM / Javascript?

Question

Je sais que le répéteur asp.net n’a pas de modèle d’objet côté client et que nous sommes obligés d’améliorer les performances de nombreuses pages comportant repeater / gridview, avec la possibilité d’ajouter des rangées à l’aide du code côté serveur.

Nous avons utilisé updatepanels pour ajuster la fonctionnalité en ajoutant les lignes au répéteur / gridview, mais le temps nécessaire au trajet du serveur et au rendu sur le navigateur n'est pas acceptable.

Existe-t-il un moyen de remédier à cette situation du côté client afin d’améliorer les performances de l’ajout de lignes au répéteur / grille de visualisation. Nous utilisons Asp.net 2.0

Answer 1

J'ai découvert que le contrôle Repeater ne dispose pas d'un DOM qui peut être utilisé pour effectuer des opérations côté client, telles que l'ajout de lignes et d'autres éléments, le seul moyen facile de sortir (en raison de certaines contraintes) que j'avais. Contrôle GridView à la place et ensuite utiliser son DOM et c’est ce que j’ai finalement fait.

Answer 2

Les UpdatePanels exécutent toujours une publication sur toute la page, puis mettent simplement à jour le contenu contenu dans le panneau. C'est de là que vient votre ralentissement.

Pour ce qui est d’utiliser AJAX pour accélérer les opérations, vous devrez utiliser les appels directs AJAX pour demander uniquement les données dont vous avez besoin. Vous pouvez le faire avec ASP.NET AJAX.

Dans le gestionnaire d'événements page_load, enregistrez votre AJAX. (VB.NET)

Ajax.Utility.RegisterTypeForAJAX(GetType(ThisPageClass))

Créez ensuite une fonction qui sera accessible par AJAX, comme suit:

<Ajax.AjaxMethod()> _
Public Function GetNewRows() As String
    ''//do stuff
    Return jsonObj
End Function

Ensuite, côté client, vous pouvez l'appeler comme suit:

ThisPageClass.GetNewRows(someCallbackFunction);

function someCallbackFunction(result) {
    var json = ParseJSON(result.value);
    for(var i=0; i<json.length; i++) {
        // do whatever
    }
}

Il vous suffit de brancher les trous!