GridView SelectedIndexChanged 滚动到一个 DetailsView 视图

Question

我有一个 GridView 可以显示有关多个用户的少量信息。在这个 GridView 中，我有一个按钮，可以在 GridView 下方的 DetailsView 中显示有关所选用户的所有信息。问题是，如果我不搜索特定用户，我会得到一个超过 200 人的列表，并且 GridView 非常长。这使得最终用户不得不滚动到页面底部，这非常烦人。我一直在阅读有关 ScrollIntoView 函数的信息，但我认为它与 DetailsView 无关。我还读到我可以使用 JavaScript 来获得我正在寻找的结果。我不确定最好的方法是什么，但非常感谢任何帮助。当我双击按钮时，Visual Studio 生成了一个空的 SelectedIndexChanged 方法。如果我最终选择 JavaScript 路线，我应该在哪里插入代码？它会进入 aspx.cs 页面还是仅进入 aspx 页面？

Answer 1

如果 GridView 的所有点击都指向页面上的同一个地方，你可以这样做。

<script type="text/javascript">
    $('#<%= GridView1.ClientID %>').click(function () {
        $('html, body').animate({
            scrollTop: $("#targetID").offset().top
        }, "medium");
    });
</script>

如果您使用 PostBack 加载 DetailsView，ypu 可以做到这一点。在后面的代码中添加脚本管理器。

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "ScrollToElement", "ScrollToElement('targetID')", true);

然后是匹配的JavaScript函数。

<script type="text/javascript">
    function ScrollToElement(id) {
        $('html, body').animate({
            scrollTop: $("#" + id).offset().top
        }, "medium");
    }
</script>

Answer 2

我能够创建一个解决方法来让它正常工作。我创建了一个用户可以按下的新按钮，它将滚动到 DetailsView 的顶部。这很简单，但它会为我们所做的工作。我在 DetailsView 上方创建了一个空的 span 标签，并使用 <input type="button" value="Scroll to Person" onclick="document.getElementById('topOfPerson').scrollIntoView();" /> 作为按钮。

GridView SelectedIndexChanged 滚动到一个 DetailsView 视图

GridView SelectedIndexChanged scroll into view to a DetailsView

c#

asp.net

gridview

detailsview