0

ノックアウトと Web Api 2 を使用している MVC 5 プロジェクトがあります。

最初のページと下部に沿ったページネーションによって最初に入力されたノックアウト モデルでページングを実装しました。ユーザーが結果セット内の他のページに移動できるようにします。

コードは次のとおりです。

チェックボックスがオンの場合に、Photo Id をオブザーバブル配列にプッシュする Html マークアップ:

<span>Add</span><input type="checkbox" class="photo" name="selected-photos" id="selected-photos" data-bind="checked:$root.selectedPhotos, checkedValue: $data.PhotoId" />

ノックアウト ビュー モデル

function FlickrPhotosViewModel() {

    var self = this;

    self.photos = ko.observableArray([]);
    self.noOfPages = ko.observable();

    self.selectedPhotos = ko.observableArray([]);

    self.pageNumber = ko.observable(1);
    self.selectPage = function(pageNumber) {

        jQuery.support.cors = true;
        $.ajax({
            url: '@Url.RouteUrl("DefaultApi", new {httproute = "", controller = "PhotosFromFlickr"})',
            type: 'GET',
            data: { pageNumber: ko.toJSON(pageNumber), selectedPhotos: ko.toJSON(self.selectedPhotos()) },
            dataType: 'json',
            success: function(data) {
                self.photos(ko.mapping.fromJS(data.Photos));
                self.noOfPages(data.NoOfPages);
                self.selectedPhotos(data.SelectedPhotos);
            },
            error: function(x, y, z) {
                alert(x + '\n' + y + '\n' + z);
            }
        });
    };

    jQuery.support.cors = true;

    $.ajax({
        url: '@Url.RouteUrl("DefaultApi", new {httproute = "", controller = "PhotosFromFlickr"})',
        type: 'GET',
        data: { pageNumber: ko.toJSON(self.pageNumber()), selectedPhotos: ko.toJSON(self.selectedPhotos()) },
        dataType: 'json',
        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);
        }
    });
};

$(document).ready(function () {
    ko.applyBindings(new FlickrPhotosViewModel());
});

Web API の Get メソッド 現在、これは 2 つの引数を取ります。1 つ目は提供したいページ番号、2 つ目は現在文字列として渡されている選択された写真 ID です。 

public PhotoCollectionModel Get(int pageNumber, string selectedPhotos )
    {}

私が抱えている問題は、2 番目のパラメーターを厳密に型指定することです。または、少なくとも選択した写真をリストします。現在、Web Api Get メソッドで json 文字列 (selectedPhotos) を逆シリアル化する必要があります...

これは可能ですか、それとも私は要点を逃していますか?

アップデート

これは、作成するリクエスト URL です -

http://localhost/Mvc/api/PhotosFromFlickr?pageNumber=3&selectedPhotos=%5B%228060459369%22%2C%227895411674%22%2C%227067757145%22%5D

ヘッダーは次のとおりです。

Request Headers :

Accept:application/json, text/javascript, */*; q=0.01
Referer:http://localhost/Mvc/Profile?username=MarkHBrown
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.116 Safari/537.36
X-Requested-With:XMLHttpRequest
4

3 に答える 3

1

前述のように、メソッド パラメーターを[FromUri]属性で装飾する必要があります。また、次のようなクエリ文字列内で配列を渡すことはできません?selectedPhotos=[1,2,3]。

正しい方法は?selectedPhotos=1&selectedPhotos=2&selectedPhotos=3

于 2014-04-27T17:22:03.563 に答える
0

元の要件どおりに機能させることができました。

送信時に選択された写真の複雑なオブジェクトを渡すことができるようにしたかったのです。これが機能するためには、(クエリ文字列を使用するため) GET を使用せず、代わりに POST を使用する必要がありました。

URL 内に pageNumber を保持し、jQuery ajax 呼び出しの data パラメータを介してリクエストの本文内に observableArray を渡しました。

コードは次のとおりです。

Web API Post メソッド

public PhotoCollectionModel Post([FromUri]int pageNumber, [FromBody]Photo[] selectedPhotos)
    {}

jQuery ajax Post - html 要素のクリック イベントに関連付けられているノックアウト関数を介して呼び出されます

この場合、self.selectedPhotos は型オブジェクト (Photo) の配列です。

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);
                    }
                });

私のチェックボックスマークアップ

<span>Add</span><input type="checkbox" class="photo" name="selected-photos" id="selected-photos" data-bind="data-bind="checkedValue: $data, checked: $root.selectedPhotos" />" />

私が今抱えている問題は、ページング時に前のページに戻るときにチェック状態が維持されないことです...しかし、写真IDを監視可能な配列に保存していた場合、これは機能します。

そうは言っても、ページングがない場合、これは素晴らしい解決策です...

于 2014-04-29T12:34:44.207 に答える