Question

我有GridView，显示有关多个用户的少量信息。在此GridView中，我有一个按钮，可在DetailsView下方的GridView内显示所选用户的所有信息。问题是，如果我不搜索特定用户，我会得到一个超过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添加到后面的代码中。

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的顶部。这很简单，但它适用于我们的工作。我在span上方创建了一个空DetailsView标记，并使用<input type="button" value="Scroll to Person" onclick="document.getElementById('topOfPerson').scrollIntoView();" />作为按钮。

GridView SelectedIndexChanged滚动到视图中的DetailsView

2 个答案: