GridView SelectedIndexChanged прокрутить в представление в DetailsView

Question

У меня есть GridView который отображает небольшое количество информации о нескольких пользователях. В этом GridViewУ меня есть кнопка, которая будет отображать всю информацию о выбранном пользователе внутри DetailsView ниже GridView, Проблема в том, что, если я не ищу конкретного пользователя, я получаю список из более чем 200 человек и GridView очень долго. Это заставляет конечного пользователя прокручивать страницу вниз, что очень раздражает. Я читал о ScrollIntoView функция, но я не думаю, что это связано с DetailsView. Я также прочитал, что я могу использовать JavaScript, чтобы потенциально получить результаты, которые я ищу. Я не уверен, что лучший подход для этого, но любая помощь будет очень признательна. У меня пустой SelectedIndexChanged метод, который был создан Visual Studio, когда я дважды щелкнул по кнопке. Если бы я в конечном итоге пошел по маршруту JavaScript, куда бы я вставил код для этого? Будет ли это идти на странице aspx.cs или только на странице aspx?

Answer 1

Я был в состоянии создать работу вокруг, чтобы заставить это работать должным образом. Я создал новую кнопку, которую пользователь может нажать, чтобы прокрутить вверх DetailsView, Это было довольно просто, но это будет работать для того, что мы делаем. Я создал пустой span тег над DetailsView и использовал <input type="button" value="Scroll to Person" onclick="document.getElementById('topOfPerson').scrollIntoView();" /> для кнопки.

Answer 2

Если все щелчки GridView указывают на одно и то же место на странице, вы можете сделать что-то подобное.

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

Если вы загрузите DetailsView с PostBack, 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>