I've managed to get it working as per my original requirement.
I wanted to be able to pass a complex object of photos that have been selected when I submit. For this to work, I've had to not use a GET (as that uses querystring) and use a POST instead.
I've kept the pageNumber within the url and passed the observableArray within the body of the request via the data parameter of my jQuery ajax call.
Here is the code:
Web Api Post Method
public PhotoCollectionModel Post([FromUri]int pageNumber, [FromBody]Photo[] selectedPhotos)
{}
jQuery ajax Post - which is called via the knockout function which is attached to a click event on an html element
self.selectedPhotos is an array of type object (Photo) in this case.
jQuery.support.cors = true;
$.ajax({
url: '@Url.RouteUrl("DefaultApi", new {httproute = "", controller = "PhotosFromFlickr"})/?pageNumber=' + pageNumber,
type: 'POST',
data: ko.toJSON(self.selectedPhotos),
dataType: 'json',
contentType: 'application/json; charset=utf-8',
success: function (data) {
self.photos(ko.mapping.fromJS(data.Photos));
self.noOfPages(data.NoOfPages);
},
error: function (x, y, z) {
alert(x + '\n' + y + '\n' + z);
}
});
My checkbox markup
<span>Add</span><input type="checkbox" class="photo" name="selected-photos" id="selected-photos" data-bind="data-bind="checkedValue: $data, checked: $root.selectedPhotos" />" />
The problem i'm now having is that when paging it's not keeping the checked state when going back to previous pages... but this work if I was storing the photo Id in the observable array.
That being said - this is a great solution if you don't have paging...