0

タイトルのとおり、HTML5 ページで最新の select2 選択ボックスを使用しており、その例を使用して、作成した Web API 2 エンドポイントを呼び出しています。

テスト目的で、エンドポイントは単純にタグのコレクションを構築し、結果を HttpResponseMessage として返します。すべてを視覚化するためのコードを次に示します。

タグ エンティティ

public class TagData
{
    public string Id { get; set; }
    public string Text { get; set; }
}

モデル:

public class TagsModel
{
    public IEnumerable<TagData> Tags { get; set; }
}

Web API 2 プロジェクトのコントローラー アクション:

    public IHttpActionResult Get()
    {
        var tags = new TagsModel()
        {
            Tags = new List<TagData>
            {
                new TagData()
                {
                    Id = "1",
                    Text = "Tag1"
                },
                new TagData()
                {
                    Id = "2",
                    Text = "Tag2"
                }
            }
        };
        return Ok(tags);
    }

単体テストをノックアップしましたが、composer を使用して Fiddler4 でテストを実行してもすべて機能し、次の JSON 応答が返されます。

{"Tags":[{"Id":"1","Text":"Tag1"},{"Id":"2","Text":"Tag2"},{"Id":"3","Text":"Tag3"}}]}

HTML5 ページで、標準の select2 html 要素にドロップしました。

    <select class='s2-search-box form-control' multiple='multiple'></select>

ここでのアイデアは、select2 コントロールをリモート データにバインドし、タグ付け機能を使用して、ユーザーがタグを見つけて選択し、繰り返すことができるようにすることです。これは、次の ajax 呼び出しを使用して行われます。

    $(document).ready(function () {

        $(".s2-search-box").select2({
            ajax: {
                url: "http://localhost:54850/api/s2demo",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        q: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function (data, page) {
                    // parse the results into the format expected by Select2.
                    // since we are using custom formatting functions we do not need to
                    // alter the remote JSON data
                    return {
                        results: data.Tags
                    };
                },
                cache: true
            }
        });
    });

これまでのところ、単体テストはうまく機能しており、Firebug を使用して ajax 呼び出しを検査すると、データが正しい形式で返されていることがわかり、data.Tags コレクションを表示できるので、データがそこにあることがわかりますが、実際のselect2 ドロップダウンは「未定義」項目のリストを表示し、実際には必要なデータを表示せず、それらの選択からタグを作成することもできません。

補足として、私もこれを試しました：

    $(".s2-search-box").select2({
        ajax: {
            url: "http://localhost:54850/api/s2demo",
            dataType: "json",
            type: "GET",
            data: function (params) {

                var queryParameters = {
                    term: params.term
                }
                return queryParameters;
            },
            processResults: function (data) {
                return {
                    results: $.map(data, function (item) {
                        return {
                            text: item.Text,
                            id: item.Id
                        }
                    }),
                    pagination: {
                        more: data.more
                    }
                };
            }
        }
    });

これは、select2 コントロールに次のように表示されるようにタグを作成できるという点で機能します。

タグ1[x] タグ2[x]

ただし、ドロップダウン リストは永続的に表示されます。

select2 ライブラリの最新の 4.0.2 バージョンを使用しています。

前もって感謝します。

T

4

1 に答える 1

3

主に情報が散らばっていて、現在select2の新しいバージョンがあまり広く使用されていないため、深刻な時間を費やした後、最終的にこれを解決しました。

そのため、最初にいくつかの変更を加える必要がありました。最初の変更は、GET および POST 要求を作成できるようにするためのコントローラーでした (これを行うより良い方法がありますが、プロトタイプを作成する目的でこれが機能します)。

    [AcceptVerbs("GET","POST")]
    public IHttpActionResult TagLookup([FromBody]string value)
    {
        var tags = TagsModel;

        var results = new TagsModel();
        var tagsList = new List<TagData>();
        var i = 0;

        foreach (var m in tags.Tags)
        {
            i++;
            if (m.Text.Contains(value))
            {
                tagsList.Add(new TagData()
                {
                    Id = i.ToString(),
                    Text = m.Text
                });
            }
        }

        results.Tags = tagsList;

        return Ok(results);
    }

コード ブロックは非常に単純です。タグのコレクション (TagaData エンティティ) を含むモデルを返していますが、異なるのはアクションのデコレータであり、任意のクライアントからの GET および POST 要求の両方を受け入れる AcceptVerbs 属性です。

また、[FromBody] パラメーター属性を追加して、Web API が要求本文から単純な型を読み取るように強制します (複雑な型の場合は FromUri を使用します)。

次に、HTML ページの Ajax 呼び出しを次のように変更しました。

    $(document).ready(function () {

        $(".s2-search-box").select2({
            ajax: {
                url: "http://localhost:54850/api/s2demo",
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                type: 'POST',
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return '=' + params.term; // search term
                },
                processResults: function(data) {
                    return {
                        results: $.map(data.Tags, function(item) {
                            return {
                                text: item.Text,
                                id: item.Id
                            }
                        })
                    };
                },
                cache: true
            }
        });
    });

したがって、ここで注意すべき重要なことは、送信されるデータ ペイロードにパラメーターを渡す関数ですが、ここで Web API 2 で問題になるのは、戻り値にボルトで固定する必要があった '=' 記号です。

return '=' + params.term;

これは、Web API がパラメーターの処理方法を理解するために必要です。そうしないと、パラメーターは無視されます。

「processResults:」セクションは、Tags 配列にタグを付け、データを select2 コントロールにバインドして、入力されたドロップダウン リストを提供します (渡された用語に一致するデータが返された場合)。

また、タグを選択して、select2 の入力ボックスにタグとして表示されるようになりました。

<select class="s2-search-box form-control" multiple="multiple"></select>

それが私にとってそれを整理したことは、頭を悩ませている他の誰かに光を当てることを願っています. 次の部分に進み、select2 ボックスのタグを取得して、別の Web API コントローラー アクションに送信します。

于 2016-05-21T05:16:47.030 に答える