Статьи

Бесконечная прокрутка в ASP.NET с помощью jQuery

Август 12, 2017

Я не создал все решение самостоятельно. Первоначальная идея взята из образца All-In-One Code Framework . Я просто настраивал свой BlogEngine, и для одного из модулей я подумал, что было бы неплохо не использовать пейджинг, и я должен пойти на бесконечные прокрутки. Эта идея кажется мне крутой, и, не теряя времени, я просто выполнил быстрый поиск в Интернете и наткнулся на решение, которое является частью All-In-One Code Framework . Это не было полным решением, которое я искал, но я могу повторно использовать часть jQuery в образце.

Сборка части jQuery

Я просто повторно использую весь скрипт jQuery без каких-либо серьезных изменений. Единственное изменение, которое я сделал, — это имя веб-метода в параметре url метода Ajax, который есть в коде страницы, и измените имя метода на InfiniteScroll :

function InfiniteScroll() {
    $('#divPostsLoader').html('<img src="images/loader.gif">');

    //send a query to server side to present new content
    $.ajax({
        type: "POST",
        url: "Default.aspx/GetData",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            if (data != "") {
                $('.divLoadData:last').after(data.d);
            }
            $('#divPostsLoader').empty();
        }
    })
};

У меня уже есть 2 div на странице, где данные загружаются, когда пользователь прокручивает вниз в нижней части страницы. Это самый простой Ajax-вызов, написанный на jQuery, и я предполагаю, что вы знаете синтаксис и методы и не требует объяснений. Здесь мне нужно вызвать эту функцию, когда пользователь прокручивает внизу страницы. Итак, как узнать, когда пользователь прокручивает и достигает нижней части страницы? Вот метод, который запускает функцию InfiniteScroll () :

$(window).scroll(function () {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        InfiniteScroll();
    }
});

Убедитесь, что вы поместили функцию прокрутки в функцию document.ready . Теперь, когда пользователь прокручивает внизу страницы, он вызывает функцию InfiniteScroll (), которая, в свою очередь, загружает новые данные в  divLoadData .

Код позади

В выделенном фрагменте кода создайте функцию WebMethod, которая возвращает строку HTML. В этом примере я загружаю заголовок, дату публикации и фрагмент моего блога из базы данных движка блога, которая является SQL Server CE 4.0. Вот метод:

[WebMethod]
public static string GetData()
{
    RecordCount = RecordCount + 10;
    string Sql = "SELECT Title, DateCreated, Slug FROM be_Posts ORDER BY Title OFFSET " + FirstCount + " ROWS FETCH NEXT 10 ROWS ONLY";
    FirstCount = RecordCount;
    StringBuilder sb = new StringBuilder();
    dt = new DataTable();
    da = new SqlCeDataAdapter(Sql, con);
    con.Open();
    da.Fill(dt);

    DataView dv = dt.DefaultView;

    foreach (DataRowView row in dv)
    {
        sb.AppendFormat("<p>Post Title" + " <strong>" + row["Title"] + "</strong>");
        sb.AppendFormat("<p>Post Date" + " <strong>" + row["DateCreated"] + "</strong>");
        sb.AppendFormat("<p>Slug" + " <strong>" + row["Slug"] + "</strong>");
        sb.AppendFormat("<hr/>");
    }

    sb.AppendFormat("<divstyle='height:15px;'></div>");
    con.Close();
    return sb.ToString();
}

Бесконечная прокрутка — это не что иное, как автоматическое разбиение по страницам. Каждый раз, когда пользователь прокручивает страницу вниз, запрос запускается и получает новый набор данных. Поскольку я использую SQL CE 4.0, пейджинговый запрос отличается от SQL Server 2008.

Запрос для SQL CE 4.0:

SELECT Title, DateCreated, Slug FROM be_Posts ORDER BY Title OFFSET 0 ROWS FETCH NEXT 10 ROWS ONLY

Измените OFFSET и FETCH NEXT, чтобы получить следующий набор результатов.

Запрос для SQL Server 2008:

SELECT Title, DateCreated, Slug FROM ( 
     SELECT 
          ROW_NUMBER() OVER (ORDER BY title) AS row, Title, DateCreated, Slug
     FROM be_Posts
) AS a WHERE row BETWEEN 1 AND 10

Я изменил запрос в приведенном выше коде, чтобы получать набор следующих результатов каждый раз, когда пользователь прокручивает внизу страницы. Когда пользователь прокручивает страницу вниз, я увеличиваю FirstCount на 10, что является значением переменной RecordCount . Я приложил полное решение, чтобы вы могли попробовать. У меня нет базы данных, включенной в решение, так как это база данных моего блога. Вы должны создать один, чтобы проверить это.

Загрузить:  InfiniteScroll.zip (2.28 МБ)

56
Share: