Adding pagination to the Lookup
Previous TutorialIn order to proceed please first download the Finished solution from the Previous Tutorial, or use yours if you've done it.
1. Add an int page parameter to the Search method and use it, so your FruitSearch Method will become like this:
[WebGet]
[OperationContract]
public LookupResult FruitSearch(string search, int page)
{
const int pageSize = 3;
var items = Fruits.Where(o => o.Name.ToLower().Contains(search.ToLower()))
.Select(f => new KeyContent { Key = f.Id, Content = f.Name });
return new LookupResult
{
Items = items.Skip((page - 1) * pageSize).Take(pageSize),
More = items.Count() > page * pageSize
};
}
the page parameter is always sent but if we don't use paging then we just don't include it in the parameters list. "More" is just a bool value that indicates wheter to show the "more" button or not (paging works the same for the MultiLookup and AjaxList).That's it, you can try it now.
To make our paging a bit more interesting add more items to the Fruits Field (in Aja.svc.cs), so it could look like this:
static readonly IList<Fruit> Fruits = new List<Fruit>
{
new Fruit{Id=1, Name = "Mango"},
new Fruit{Id=2, Name = "Apple"},
new Fruit{Id=3, Name = "Papaya"},
new Fruit{Id=4, Name = "Banana"},
new Fruit{Id=5, Name = "Cherry"},
new Fruit{Id=10, Name = "Tomato"},
new Fruit{Id=11, Name = "Potato"},
new Fruit{Id=12, Name = "Cucumber"},
new Fruit{Id=13, Name = "Onion"},
new Fruit{Id=14, Name = "Carrot"},
new Fruit{Id=20, Name = "Celery"},
new Fruit{Id=21, Name = "Broccoli"},
new Fruit{Id=22, Name = "Artichoke"},
new Fruit{Id=23, Name = "Caulifloweies"},
new Fruit{Id=24, Name = "Lettuce"},
new Fruit{Id=30, Name = "Hazelnuts"},
new Fruit{Id=31, Name = "Chestnuts"},
new Fruit{Id=32, Name = "Walnut"},
new Fruit{Id=33, Name = "Almonds"},
new Fruit{Id=34, Name = "Mongongo"},
new Fruit{Id=40, Name = "Rice"},
new Fruit{Id=41, Name = "Wheat"},
new Fruit{Id=42, Name = "Oats"},
new Fruit{Id=43, Name = "Fonio"},
new Fruit{Id=44, Name = "Barley"},
};
and change the pageSize to 5 (in the FruitSearch method)2. Run it (Ctrl + F5)
Next Tutorial