如何将Seach Textbox数据与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

那么，我终于想出了这一个出来&这很难。这种特殊的答案是多方面的：

• 它使用GET
• 因此，GET需要使用的“模型绑定属性”
• A小调POST比如现在包含如下...

GET - WEB API：
这工作，因为“模型绑定属性”抓住请求对象&滋润它。没有它，REQUEST将始终为null。

// GET: /api/DeviceDataItem/Search 
[HttpGet] 
public DataSourceResult Search([ModelBinder(typeof(WebApiDataSourceRequestModelBinder))] DataSourceRequest request, string search) 
{ 
    var application = (MyApplication)Application; 
    var provider = (DeviceDataItemProvider)application.DeviceDataItemProvider; 

    IQueryable<DeviceDataItem> query = provider.Query(); 

    // No 'Where' needed 
    if (string.IsNullOrWhiteSpace(search)) 
     return query.ToDataSourceResult(request); 

    // Where 
    ...your WHERE logic goes here... 

    return query.ToDataSourceResult(request); 
} 

GET - MVC.Read：
通知我指的是一个自定义Page Controller对象是公众可以通过窗口。

.Read(read => read.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "DeviceDataItem", action="Search"})) 
          .Type(HttpVerbs.Get) 
          .Data("window.pageController.on.read.gridDevices")) 

GET - 的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(); 
     } 
    } 
}; 

POST：
根据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"]; 

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

Answer 2

现在我们到了某个地方，这个问题比另一个好。我当时要说的是，在放弃之前，在JavaScript小部件中有一个名为parameterMap的参数，您可以在其中操纵将在API请求中发送的数据。由于在文档中阐明的你可以尝试：

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

但我不知道如何，因为他们的文档太烂太多，将其添加到剃刀帮助，我无法进行测试。所以，你可以尝试：

1. 添加在初始化参数（这我不知道，如果作品）：

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

   或类似的东西;

2. 设置它在你的网格初始化后：

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

   Demo

我敢打赌，在第二个选项，它应该工作。

Answer 3

试试这个：

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.ApiController，虽然我看不出这会如何改变。也可能是数据源类型只能在设置时有效设置（所以它会进入定义中，而不会像我最初所建议的那样在事实之后进行修改），但这只是另一种猜测。我感到你的痛苦 - 这种事情应该是正常的。