javascript - 如何将搜索文本框数据与 DataSourceRequest 一起发布

Question

我正在尝试将工具栏的“搜索文本框”值发送到 WEB API 操作。我搜索了各种在线解决方案。但是，似乎都不起作用。

在客户端，我在“搜索文本框”上有一个“KeyUp”事件。完成后，我需要将值附加到 READ。

我已经尝试了以下方法(客户端):

// This Fails
var value = dictionary.elements.txtDeviceSearch.val();
var url = "api/devicedataitem/search?text='" + value + "'";

dictionary.instances.gridDevices.dataSource.options.transport.read.url = url;
dictionary.instances.gridDevices.dataSource.read();

// This Fails
dictionary.instances.gridDevices.dataSource.options.transport.read.data = { text: value };
dictionary.instances.gridDevices.dataSource.read();

// This Fails
dictionary.instances.gridDevices.dataSource.read({ text: 'Work Dammit' });

初始调用按预期工作:
这按预期工作...

@(Html.Kendo().Grid<DeviceDataItem>()
    .Name("gridDevices")
    .DataSource(dataSource => dataSource
        .WebApi()
        .Model(model =>
        {
            model.Id(m => m.DeviceId);
            model.Field(m => m.DeviceName);
            model.Field(m => m.CommunicationTechnicianId);
            model.Field(m => m.CommunicationTechnicianFullName);
            model.Field(m => m.MeasurementTechnicianId);
            model.Field(m => m.MeasurementTechnicianFullName);
        })
        .Read(read => read.Url("api/devicedataitem/search?text=''").Type(HttpVerbs.Post))
    )
    .ToolBar(toolbar =>
    {
        toolbar.Template(@<text>
            <div class="input-group pull-right" role="toolbar">
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                </span>
                <input type="text" class="form-control" id='txtDeviceSearch' placeholder="Search for..." />
            </div>
        </text>);
    })
    .Deferred(true))

Answer 1

现在我们有进展了，这个问题比另一个好。我当时要说的是，在放弃之前，有一个参数叫做parameterMap。在 JavaScript 小部件中，您可以在其中操作将在请求中发送到 API 的数据。如文档中所述，您可以尝试:

parameterMap: function (data, type) {
    return kendo.stringify($.extend({ "text": $("#txtDeviceText").text() }, data));
}

但我不知道如何将它添加到 Razor 助手中，因为他们的文档太糟糕了，我无法对其进行测试。所以你可以试试:

1. 在初始化中添加参数(我不确定是否有效):

   DataSource(dataSource => dataSource.ParameterMap("jsFunctionNameHere")
   

   或者类似的东西；

2. 初始化后将其设置在您的网格中:

   $("#grid").data("kendoGrid").dataSource.transport.parameterMap = function() {
       return { text: $("#txtDeviceText").text() };
   };
   

   Demo

我打赌第二个选项，它应该有效。