ASP.NET MVC ListBox - Virtual Scrolling

    Displaying items 0-0 out of 0.


    The items of the ListBox can be loaded on-demand (via AJAX requests). The advantage of using this approach
    is that the items are loaded asynchronously. Thus, the page will load very fast because no item is loaded on page load.

    In order to enable the on demand loading feature, set the EnableLoadOnDemand property to true.
    You also need to specify an action method that will be used to load the items on demand, using the OnLoadingItems property.

    To improve the performance even further, you can use the "paging" approach for the load on demand feature.
    Using this approach will force the ListBox to load only a limited number at a time, instead of retrieving all the matches at once.
    So for example, if there are 10,000 items in the database, you can configure the ListBox to load 100 items at a time, to make the on demand loading functionality run smoother.

    To load the next set of items, the end user simply needs to click on the footer text from the bottom of the list with items.

    Additionally you can enable the virtual scrolling feature, which will allow end users to load new sets of items
    simply by scrolling the list of items (or by using the mouse wheel).
    To enable the virtual scrolling feature, simply set the EnableVirtualScrolling property to true.
    View - Aspx
     
        <% Html.Obout(new ListBox("ListBox1") 
        {                
            EnableLoadOnDemand = true,
            OnLoadingItems = "ListBox/LoadingItemsWithPaging",
            EnableVirtualScrolling = true
        }); %>
        
    View - Razor
     
        @Html.Obout(new ListBox("ListBox1") 
        {                
            EnableLoadOnDemand = true,
            OnLoadingItems = "ListBox/LoadingItemsWithPaging",
            EnableVirtualScrolling = true
        })
        
    Controller
     
        public JsonResult LoadingItemsWithPaging(ListBoxLoadingItemsEventArgs args)
        {
            ListBoxItemList items = GetFilteredCustomers(args.Text, args.ItemsOffset);
            int itemsCount = GetFilteredCustomersCount(args.Text);
            int itemsLoadedCount = args.ItemsOffset + items.Count();
    
            JsonResult result = new JsonResult
            {
                Data = new
                {
                    Items = items,
                    ItemsCount = itemsCount,
                    ItemsLoadedCount = itemsLoadedCount
                },
                JsonRequestBehavior = JsonRequestBehavior.AllowGet
            };
    
            return result;
        }