如何使用 ScrollTo jQuery 插件滚动到 ASP.NET 中转发器中的特定行？

Question

我有一个简单的中继器，如下所示：

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

现在，在我的代码隐藏中，我有一个被触发的事件，该事件应该在数据库中添加/插入一行。发生这种情况后，我从数据库中重新获取新的选项列表，并将它们重新绑定到中继器。这发生在更新面板内，因此列表会立即为用户刷新。

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
}

现在，我喜欢做的就是使用 jQuery ScrollTo 插件直接滚动到新添加的行。

在 jQuery 插件中调用 ScrollTo() 方法以便我滚动到刚刚添加的特定行的最佳方法是什么？无论如何，我是否可以在 ItemTemplate 中标记我的行，以便我可以轻松地通过 jQuery 选择要滚动到的元素？

理想情况下，在 RefreshOptions() 之后，我想执行 ScrollTo 函数以向下滚动到新行。

Answer 1

如果您知道该行的客户端 ID（可以获取），则只需调用即可相对轻松

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

Answer 2

当您将对象添加到数据库时（或之后），获取新插入对象的 ID。修改中继器以包含带有 Visible="false" 的标签，以便它不会呈现给客户端。挂钩 ItemDataBound 事件并根据您获取的 ID 检查每个标签。当您找到匹配的行时，您可以获得该行的 id，然后您就可以将其用于滚动参数。

注意：其他数据绑定控件具有 DataKey 属性，该属性可用于对象的 id 并使其更简单。不确定此时您是否与 Repeater 相关，但 GridView 或 ListView 可能值得研究。