Javascript 如何在DataSourceRequest旁边发布搜索文本框数据

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

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

我尝试了以下客户端：

初始调用按预期工作： 这是预期的工作

@(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))

---

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

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

但我不知道如何将它添加到razor helper中，因为他们的文档太糟糕了，我无法测试它。因此，您可以尝试：

在初始化中添加参数，我不确定是否有效：

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

或者类似的东西

初始化后在网格中设置它：

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

---

我打赌第二个选项，它应该会起作用。

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

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

但我不知道如何将它添加到razor helper中，因为他们的文档太糟糕了，我无法测试它。因此，您可以尝试：

在初始化中添加参数，我不确定是否有效：

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

或者类似的东西

初始化后在网格中设置它：

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

我打赌第二个选项，它应该会起作用。

试试看：

dictionary.instances.gridDevices.dataSource.type = "aspnetmvc-ajax";

我们在应用程序中做同样的事情，除了DataSourceRequest对象之外，还向控制器操作发送参数。移除该类型设置后，我得到了与使用空值接收的参数相同的行为

数据源是用js定义的，类似于：

this.results = new kendo.data.DataSource({
    type: "aspnetmvc-ajax",
    transport: {
        read: {
            url: "Controller/Search",
            data: function () {
                return {
                    value: "abc"
                };
            }
       }
    }
});

当对其触发读取时，它会点击控制器操作，如下所示：

public JsonResult Search([DataSourceRequest] DataSourceRequest request, string value)

因此，这里没有什么不寻常的地方，但删除了该类型后，就不会收到该值。请注意，这是一个System.Web.MVC.Controller，而不是System.Web.Http.ApicController，尽管我看不出这会有什么不同。也可能是数据源类型只能在设置时有效地设置，以便它进入定义，而不是像我最初建议的那样在事实发生后进行更改，但这只是另一种猜测。我感觉到了你的痛苦-这种事情应该管用。

试试看：

dictionary.instances.gridDevices.dataSource.type = "aspnetmvc-ajax";

我们在应用程序中做同样的事情，除了DataSourceRequest对象之外，还向控制器操作发送参数。移除该类型设置后，我得到了与使用空值接收的参数相同的行为

数据源是用js定义的，类似于：

this.results = new kendo.data.DataSource({
    type: "aspnetmvc-ajax",
    transport: {
        read: {
            url: "Controller/Search",
            data: function () {
                return {
                    value: "abc"
                };
            }
       }
    }
});

当对其触发读取时，它会点击控制器操作，如下所示：

public JsonResult Search([DataSourceRequest] DataSourceRequest request, string value)

---

因此，这里没有什么不寻常的地方，但删除了该类型后，就不会收到该值。请注意，这是一个System.Web.MVC.Controller，而不是System.Web.Http.ApicController，尽管我看不出这会有什么不同。也可能是数据源类型只能在设置时有效地设置，以便它进入定义，而不是像我最初建议的那样在事实发生后进行更改，但这只是另一种猜测。我感觉到了你的痛苦——这种事情应该管用。

好吧，我终于明白了这一点&这很难。这个特别的答案有很多方面：

它使用GET 因此，GET需要使用模型绑定器属性 下面是一个次要的帖子示例。。。 获取WEB API: 这是因为modelbinder属性会抓取请求对象并为您添加水合物。如果没有它，请求将始终为空

获取-JavaScript: 我碰巧将我的对象缓存在页面控制器中-无论对象是如何构建的，您都必须引用它们

this.on = {
    read: {
        gridDevices: function () {
            return {
                search: dictionary.elements.txtDeviceSearch.val()
            }
        }
    },
    search: {
        gridDevices: function (e) {

            lazyInitGridDevices();

            // Clear
            dictionary.instances.gridDevices.dataSource.data([]);
            dictionary.instances.gridDevices.refresh();

            // Read
            dictionary.instances.gridDevices.dataSource.read();
        }
    }
};

职位： 根据Telerik的说法，将参数传递给POST请求也使用相同的方法。但是，对于Web API，第二个参数不能添加到方法签名中。解决这种情况的一种可能方法是使用JObject从请求中获取所有数据，然后使用这些数据构造一个新的模型对象

例如：

public HttpResponseMessage Post(JObject jsonData)
{
    ProductViewModel product = new ProductViewModel() {
        ProductName = (string)jsonData["ProductName"],
        UnitPrice = (decimal)jsonData["ProductID"],
        UnitsInStock = (int)jsonData["ProductName"],
        Discontinued = (bool)jsonData["ProductID"]
    };
    string searchTerm = (string)jsonData["search"];

    .............
}

---

嗯，我终于明白了这一点&这很难。这个特别的答案有很多方面：

它使用GET 因此，GET需要使用模型绑定器属性 下面是一个次要的帖子示例。。。 获取WEB API: 这是因为modelbinder属性会抓取请求对象并为您添加水合物。如果没有它，请求将始终为空

获取-JavaScript: 我碰巧将我的对象缓存在页面控制器中-您必须引用您的对象，不管它们是什么 重建

职位： 根据Telerik的说法，将参数传递给POST请求也使用相同的方法。但是，对于Web API，第二个参数不能添加到方法签名中。解决这种情况的一种可能方法是使用JObject从请求中获取所有数据，然后使用这些数据构造一个新的模型对象

例如：

public HttpResponseMessage Post(JObject jsonData)
{
    ProductViewModel product = new ProductViewModel() {
        ProductName = (string)jsonData["ProductName"],
        UnitPrice = (decimal)jsonData["ProductID"],
        UnitsInStock = (int)jsonData["ProductName"],
        Discontinued = (bool)jsonData["ProductID"]
    };
    string searchTerm = (string)jsonData["search"];

    .............
}

---

哈哈哈哈哈哈…太搞笑了…我喜欢：-抱歉parameterMap=函数失败。这简直要了我的命……哈哈哈，你说的失败是什么意思？是否有任何错误或无法运行？文本WEB API参数仍为空empty@PrisonerZERO但它至少运行了parameterMap函数？它会在url中添加参数吗？请注意，它将参数添加到uri中，因此您可能必须在API方法中添加[FromUri]字符串文本。哈哈哈哈哈…这太好笑了…我喜欢它：-抱歉parameterMap=函数失败。这简直要了我的命……哈哈哈，你说的失败是什么意思？是否有任何错误或无法运行？文本WEB API参数仍为空empty@PrisonerZERO但它至少运行了parameterMap函数？它会在url中添加参数吗？请注意，它将参数添加到uri中，因此您可能必须在API方法中添加[FromUri]字符串文本。您是否可以发布以下示例片段，以便我可以查看它们：使用的WEB API签名、使用的读取URL、相关的JavaScript片段？我肯定遗漏了一些东西-谢谢你发布了以下示例，这样我就可以查看它们了：使用的WEB API签名，使用的读取URL，相关的JavaScript片段？我一定错过了什么——谢谢