Comment puis-je utiliser le plugin ScrollTo jQuery pour faire défiler une ligne particulière dans un répéteur dans ASP.NET?

Question

J'ai un répéteur simple qui ressemble à:

<asp:Repeater runat="server" ID="rptOptions" OnItemDataBound="rptOptions_ItemDataBound"> 
    <HeaderTemplate> 
     <thead> 
      <tr> 
       <td class="GridHeader">Account</td>  
       <td class="GridHeader">Margin</td> 
       <td class="GridHeader">Symbol</td> 
       <td class="GridHeader">Usymbol</td> 
      </tr> 
     </thead> 
    </HeaderTemplate> 
    <ItemTemplate> 
     <tbody> 
      <tr runat="server" ID="trOption"> 
       <td class="GridRow"><asp:Label runat="server" ID="lblOptionAccount"></asp:Label></td> 
       <td class="GridRow"><asp:Label runat="server" ID="lblOptionMargin"></asp:Label></td> 
       <td class="GridRow"><asp:Label runat="server" ID="lblOptionSymbol"></asp:Label></td> 
       <td class="GridRow"><asp:Label runat="server" ID="lblOptionUsymbol"></asp:Label></td>       
      </tr> 
     </tbody> 
    </ItemTemplate> 
</asp:Repeater> 

Maintenant, dans mon code-behind je un événement qui est tiré qui est censé ajouter/insérer une ligne dans la base de données. Après cela, je récupère la nouvelle liste d'options de la base de données et les ré-lie au répéteur. Cela se passe à l'intérieur d'un panneau de mise à jour afin que la liste soit actualisée immédiatement pour l'utilisateur.

protected void lbtnAddOptionSave_Click(object sender, EventArgs e) 
{ 
    SelectedOption = new Option() 
    { 
     Account = txtAddOptionAccountNumber.Text, 
     Margin = chkAddOptionMargin.Checked, 
     Symbol = txtAddOptionSymbol.Text, 
     Usymbol = txtAddOptionUsymbol.Text, 
    }; 

    Presenter.OnAddOption(); // Insert new option into database 
    RefreshOptions(); // Re-get list of options, bind them to repeater 
} 

Maintenant, ce que je ~ ~ l'amour à faire, est d'utiliser le plugin jQuery ScrollTo pour faire défiler directement à la ligne nouvellement ajoutée.

Quelle serait la meilleure façon d'appeler la méthode ScrollTo() dans le plugin jQuery afin que je défile vers cette ligne qui vient d'être ajoutée? Y at-il de toute façon que je puisse marquer mes lignes dans mon ItemTemplate afin que je puisse facilement sélectionner un élément à parcourir via jQuery?

Idéalement, juste après RefreshOptions() je voudrais exécuter la fonction ScrollTo pour faire défiler la nouvelle ligne.

Answer 1

Si vous connaissez le côté client Id de la ligne (que vous pouvez obtenir), son relativement indolore pour appeler simplement

$(document).scrollTo("#<row-id-here>", 800); 

Answer 2

Lorsque vous ajoutez l'objet à la base de données (ou juste après), saisir l'identifiant de l'objet nouvellement inséré. Modifiez le répéteur pour inclure une étiquette avec Visible="false" afin qu'il ne soit pas rendu au client. Accrocher l'événement ItemDataBound et vérifier chaque étiquette par rapport à l'identifiant que vous avez saisi. Lorsque vous trouvez la ligne correspondante, vous pouvez obtenir l'identifiant de la ligne et ensuite vous pourrez l'utiliser pour le paramètre de défilement.

Remarque: D'autres contrôles liés aux données ont une propriété DataKey qui pourrait être utilisée pour l'ID de l'objet et simplifier un peu le processus. Je ne sais pas si vous êtes lié au répéteur à ce stade, mais un GridView ou un ListView pourrait être utile.