GridView SelectedIndexChanged 滚动到 DetailsView答案

【问题标题】：GridView SelectedIndexChanged scroll into view to a DetailsViewGridView SelectedIndexChanged 滚动到 DetailsView
【发布时间】：2017-08-04 17:39:34
【问题描述】：

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

【问题讨论】：

标签： c# asp.net gridview detailsview

【解决方案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>

【讨论】：

脚本代码会进入 aspx 页面还是 aspx.cs 中？
ScriptManager 在填充DetailsView 的方法中进入.cs，其余在aspx 上

【解决方案2】：

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

【讨论】：