Paging ListBox with ReactiveUI and Caliburn.Micro

Question

I'm trying to implement a paging mechanism for a listbox using Caliburn.Micro.ReactiveUI with a call to EF using ".Skip(currentPage).Take(pageSize)". I'm new to ReactiveUI and Reactive in general. I'm sure this is supposed to be easy.

I've got a single "SearchParameters" class which I needs to be observed and the search function needs to execute when any of the properties on the SearchParameters object changes.

You can see from the commented-out code that I've tried to define the class as a ReactiveObject as well. The current implementation though is with CM's PropertyChangedBase. The individual properties are bound textboxes in my view using CM's conventions:

public class SearchParameters : PropertyChangedBase
    {

        private string _searchTerm;
        public string SearchTerm
        {
            get { return _searchTerm; }
            set
            {
                if (value == _searchTerm) return;
                _searchTerm = value;
                NotifyOfPropertyChange(() => SearchTerm);

            }
        }
        private int _pageSize;
        public int PageSize
        {
            get { return _pageSize; }
            set
            {
                if (value == _pageSize) return;
                _pageSize = value;
                NotifyOfPropertyChange(() => PageSize);

            }
        }

        private int _skipCount;
        public int SkipCount
        {
            get { return _skipCount; }
            set
            {
                if (value == _skipCount) return;
                _skipCount = value;
                NotifyOfPropertyChange(() => SkipCount);

            }
        }

        //private string _searchTerm;
        //public string SearchTerm
        //{
        //    get { return _searchTerm; }
        //    set { this.RaiseAndSetIfChanged(ref _searchTerm, value); }
        //}
        //private int _pageSize;
        //public int PageSize
        //{
        //    get { return _pageSize; }
        //    set { this.RaiseAndSetIfChanged(ref _pageSize, value); }
        //}

        //private int _skipCount;
        //public int SkipCount
        //{
        //    get { return _skipCount; }
        //    set { this.RaiseAndSetIfChanged(ref _skipCount, value); }
        //}

    }

"SearchService" has the following method which needs to execute when any one of SearchParameter's values change:

public async Task<SearchResult> SearchAsync(SearchParameters searchParameters)
    {
        return await Task.Run(() =>
        {
            var query = (from m in _hrEntities.Departments select m);
            if (!String.IsNullOrEmpty(searchParameters.SearchTerm))
            {
                searchParameters.SearchTerm = searchParameters.SearchTerm.Trim();
                query = query.Where(
                    x => x.Employee.LastName.Contains(searchParameters.SearchTerm) || x.Employee.FirstName.Contains(searchParameters.SearchTerm)).Skip(searchParameters.SkipCount).Take(searchParameters.PageSize);
            }
            return new SearchResult
            {
                SearchTerm = searchParameters.SearchTerm,
                Matches = new BindableCollection<DepartmentViewModel>(query.Select(x => new DepartmentViewModel{ Department = x }).Skip(searchParameters.SkipCount).Take(searchParameters.PageSize))
            };
        });
    }

Here's how I've tried to wire all of this up in MainViewModel's ctor and where Rx gets hazy for me:

public class MainViewModel : ReactiveScreen
{
private SearchParameters _searchParameters;
        public SearchParameters SearchParameters
        {
            get { return _searchParameters; }
            set
            {
                if (value == _searchParameters) return;
                _searchParameters = value;
                NotifyOfPropertyChange(() => SearchParameters);
            }
        }
{

public void MainViewModel()
{
    var searchService = new SearchService();
    //default Skip and PageSize values
    SearchParameters = new Services.SearchParameters { SkipCount = 0 , PageSize = 10};

    var searchParameters = this.ObservableForProperty(x => x.SearchParameters)
                .Value()
                .Throttle(TimeSpan.FromSeconds(.3));
    var searchResults = searchParameters.SelectMany(parameters => searchService.SearchAsync(parameters));
            var latestMatches = searchParameters
               .CombineLatest(searchResults,    
                   (searchParameter, searchResult) =>
                       searchResult.SearchTerm != searchParameter.SearchTerm
                           ? null
                           : searchResult.Matches)
               .Where(matches => matches != null);
    _departmentViewModels = latestMatches.ToProperty(this, x => x.DepartmentViewModels);
            searchParameters.Subscribe(x => Debug.WriteLine(x));
}
}

In the above example the call to SearchAsync doesn't execute. It seems that changes to SearchParameter's properties aren't being observed.

Can anyone tell me what I'm doing wrong here?

score 0 · Accepted Answer · answered Jan 21 '16 at 16:36

Here's how I ended up doing this although I'd be interested in hearing other solutions if anyone has suggestions. I'm not sure if this is the best way but it works:

First, I defined a computed property in my SearchParameters class that returns a string and reevaluates anytime CurrentPage, SkipCount and PageSize are updated from the View:

public string ParameterString
        {
            get { return String.Format("SearchTerm={0}|SkipCount={1}|PageSize={2}", SearchTerm, SkipCount, PageSize); }
        }

Next, in my MainViewModel ctor I simply observe the computed rather than attempting to react to SearchTerm, SkipCount and PageSize individually (which my original question was asking how to do):

var searchTerms = this
                .ObservableForProperty(x => x.SearchParameters.ParameterString)
                .Value()
                .Throttle(TimeSpan.FromSeconds(.3));

var searchResults = searchTerms.SelectMany(parameters => SearchService.SearchAsync(parameters));
            var latestMatches = searchTerms
               .CombineLatest(searchResults,
                   (searchTerm, searchResult) =>
                       searchResult.SearchTerm != searchTerm
                           ? null
                           : searchResult.Matches)
               .Where(matches => matches != null);

Finally, in my SearchService I parse the parameter string to get the current values:

var parameters = searchParameters.Split('|');
            var searchTerm = "";
            var skipCount = 0;
            var pageSize = 0;
            foreach (var parameter in parameters)
            {
                if (parameter.Contains("SearchTerm="))
                {searchTerm = parameter.Replace("SearchTerm=", "");}
                else if (parameter.Contains("SkipCount="))
                { skipCount = Convert.ToInt32(parameter.Replace("SkipCount=", "")); }
                else if (parameter.Contains("PageSize="))
                { pageSize = Convert.ToInt32(parameter.Replace("PageSize=", "")); }
            }

Paging ListBox with ReactiveUI and Caliburn.Micro

1 Answers1