8

Kendo UIでは、オートコンプリート ボックスを使用して、サーバーからデータを取得しようとしています。次の署名でASP.NET MVCコントローラーをヒットしています。

public ActionResult aspect(string term){
   // ...
}

これは、リクエストの URL に正しいパラメーターが含まれている必要があることを意味します。今私が直面している問題は、dataSourceメカニズムでこれを指定する方法を見つけることができないということです。parameterMapに関するドキュメントを何十回も読みましたが、まったく意味がありません。

これは、問題のページには実際には一度に 10 ～ 15 個のオートコンプリートテキスト ボックスがあり、それぞれが動的 ID で動的に作成されるため、さらに複雑になります。

これまでに使用したコードは次のとおりです。

$(".autocomplete").kendoAutoComplete({
    dataTextField: "Name",
    dataSource: {
        type: "json",
        transport: {
            read: {
                url: "/search/aspect"
            }
        }
    }
});

それで、渡すパラメータに名前を付ける方法を伝えるためにできることはありますか?

私がやろうとしていることをより明確にするために、これをjQueryで行っている場合は ... を使用します

$.ajax({ url: '/search/aspects', data: { term: (insert the data here) } });

しかし、これらすべてが機能するため、オートコンプリート入力を取得するための「セレクター」が設定されていないため、入力フォーム要素からその値を取得できません。

4

4 に答える 4

13

まず、次のオプションを設定してサーバー側のフィルタリングを有効にします。

dataSource: {
    serverFiltering: true,

次に、値がパラメーターの 1 つとして関数に渡されtransport.parameterMapます。

次のように parameterMap 関数に渡されたオブジェクトをログに記録する場合:

$(".autocomplete").kendoAutoComplete({
    dataTextField: "Name",
    dataSource: {
        serverFiltering: true,
        type: "json",
        transport: {
            read: {
                url: "/search/aspect"
            },
            parameterMap: function (data, action) {
                console.log(data);
            }
        }
    }
});

次に、次のようなオブジェクトを取得します。

{
    "filter":{
        "logic":"and",
        "filters":[
            {
                "value":"something",
                "operator":"contains",
                "field":"Name",
                "ignoreCase":true
            }
        ]
    }
}

したがって、これを使用して、次のようにして、オートコンプリート ボックスに入力された値を取得できます。

$(".autocomplete").kendoAutoComplete({
    dataTextField: "Name",
    dataSource: {
        serverFiltering: true,
        type: "json",
        transport: {
            read: {
                url: "/search/aspect"
            },
            parameterMap: function (data, action) {
                if(action === "read") {
                    return {
                        term: data.filter.filters[0].value
                    };
                } else {
                    return data;
                }
            }
        }
    }
});
于 2013-09-20T22:51:03.290 に答える
5

あなたが何をしたいのか、私は少し混乱しています。文字列項をコントローラーに渡そうとしているだけの場合は、データを指定できます。

$(".autocomplete").kendoAutoComplete({
    dataTextField: "Name",
    dataSource: {
        type: "json",
        transport: {
            read: {
                url: "/search/aspect",
                data: { term: "value" }
            }
        }
    }
})
于 2013-09-20T21:54:41.463 に答える
0

明確にしてくれてありがとう、オナバイを助けて。これが、何時間もの欲求不満の後に機能するようになったコードです!

$("#contractsSearchField").kendoComboBox({
    dataTextField: "name",
    dataValueField: "id",
    autoBind: false,
    placeholder:'select...',
    filter: "contains",// a filter must be present for the datasources serverFiltering argument to work properly.
    minLength: 3,
    dataSource: new kendo.data.DataSource({ 
        serverFiltering: true,//We must turn on serverFiltering and sorting, otherwise, the combobox only works once and will not change it's values.
        serverSorting: true,
        group: { field: "searchtype" },
        transport: {
            read: {
                url: "contract.cfc?method=getContractForDropdown",
                // We are not passing the data here like we do in the autosuggest. The combobox is a different type of an animal.
                dataType: "json",  
                contentType: "application/json; charset=utf-8", // Note: when posting json via the request body to a coldfusion page, we must use this content type or we will get a 'IllegalArgumentException' on the ColdFusion processing page.                 
                type: "GET"
            },//read
            // Pass the search term that was typed in by the user. This works because when the user types into the input box, it becomes that active element in the form.
            parameterMap : function (data, type) {
                if (type === "read") {
                    return { searchTerm : document.activeElement.value }
                    //return { searchTerm: data.filter.filters[0].value }
                }
            }//parameterMap
        }//transport
    })//dataSource
}); //...kendoComboBox...
于 2016-07-15T21:25:47.243 に答える