C# 用于jquery的Telerik Kendo网格不显示数据
我的剑道格网定义如下:C# 用于jquery的Telerik Kendo网格不显示数据,c#,jquery,kendo-ui,telerik,kendo-grid,C#,Jquery,Kendo Ui,Telerik,Kendo Grid,我的剑道格网定义如下: var dataSource = new kendo.data.DataSource({ batch: false, autoSync: true, transport: { read: { url: "/monitoring/matrix/routecontentrules?format=json", contentType: "application/json; charset=utf-8"
var dataSource = new kendo.data.DataSource({
batch: false,
autoSync: true,
transport: {
read: {
url: "/monitoring/matrix/routecontentrules?format=json",
contentType: "application/json; charset=utf-8",
dataType: "json",
type: "POST",
timeout: 30000
},
update: {
url: "/monitoring/matrix/routecontentrules/updateroutecontentrule",
contentType: "application/json; charset=utf-8",
dataType: "json",
type: "PUT"
},
create: {
url: "/monitoring/matrix/routecontentrules/createroutecontentrule",
contentType: "application/json; charset=utf-8",
dataType: "json",
type: "POST"
},
destroy: {
url: "/monitoring/matrix/routecontentrules/deleteroutecontentrule",
contentType: "application/json; charset=utf-8",
dataType: "json",
type: "DELETE"
},
parameterMap: function (data, operation) {
if (operation == "read") {
return kendo.stringify({
RouteId: routeDataItem.RouteId
});
}
else if (operation == "destroy") {
return kendo.stringify({
Id: data.Id,
});
}
else {
return kendo.stringify({
Id: data.Id,
RouteId: routeDataItem.RouteId,
OrderId: data.OrderId,
SenderMatch: data.SenderMatch,
ContentMatch: data.ContentMatch,
SenderReplace: data.SenderReplace,
ContentReplace: data.ContentReplace,
});
}
}
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number", defaultValue: 0 },
OrderId: { type: "number", defaultValue: 0 },
SenderMatch: { type: "string", defaultValue: "" },
ContentMatch: { type: "string", defaultValue: "" },
SenderReplace: { type: "string", defaultValue: "" },
ContentReplace: { type: "string", defaultValue: "" }
}
}
}});$("#Grid").kendoGrid({
dataSource: dataSource,
reorderable: false,
resizable: false,
sortable: false,
groupable: false,
scrollable: true,
navigatable: true,
editable: true,
columns: [
{
width: 150, field: "SenderMatch", title: "Sender match",
template: "<span><label class='SenderMatch'</label></span>",
headerAttributes: { title: "Sender match", style: "text-align: right" }, attributes: { style: "text-align: right" }
},
{
width: 150, field: "ContentMatch", title: "Content match",
template: "<span><label class='SenderMatch'</label></span>",
headerAttributes: { title: "Content match", style: "text-align: right" }, attributes: { style: "text-align: right" }
},
{
width: 150, field: "SenderReplace", title: "Sender replace",
template: "<span><label class='SenderMatch'</label></span>",
headerAttributes: { title: "Sender replace", style: "text-align: right" }, attributes: { style: "text-align: right" }
},
{
width: 150, field: "ContentReplace", title: "Content replace",
template: "<span><label class='SenderMatch'</label></span>",
headerAttributes: { title: "Content replace", style: "text-align: right" }, attributes: { style: "text-align: right" }
},
{
command: [
{ name: "destroy", template: "<a class='k-button k-grid-delete delete'><span class='k-sprite px-sprite px-i-sm-trash'></span></a>" }
],
width: "50px"
}
],
toolbar: kendo.template('<span class="ReloadManipulationByCustomer" style=""><span class="k-icon k-i-refresh refresh-btn"></span></span><a class="k-button k-grid-add add-btn" href="javascript:void(0)"><span class="k-sprite px-sprite px-i-sm-new new" />Add</a>')});$(".ReloadManipulationByCustomer").click(function () {
$("#Grid").data("kendoGrid").dataSource.read();});
[Route("/monitoring/matrix/routecontentrules/createroutecontentrule", "POST")]
[Route("/monitoring/matrix/routecontentrules/updateroutecontentrule", "PUT")]
public sealed class CreateUpdateRouteContentRuleRequest
{
public int Id { get; set; }
public int OrderId { get; set; }
public int RouteId { get; set; }
public string SenderMatch { get; set; }
public string ContentMatch { get; set; }
public string SenderReplace { get; set; }
public string ContentReplace { get; set; }
}
[Route("/monitoring/matrix/routecontentrules")]
public sealed class RouteContentRulesRequest
{
public int RouteId { get; set; }
}
[Route("/monitoring/matrix/routecontentrules/deleteroutecontentrule")]
public sealed class DeleteRouteContentRuleRequest
{
public int Id { get; set; }
}
public sealed class RouteContentRuleModel
{
public int Id { get; set; }
public int OrderId { get; set; }
public int RouteId { get; set; }
public string SenderMatch { get; set; }
public string ContentMatch { get; set; }
public string SenderReplace { get; set; }
public string ContentReplace { get; set; }
}
检索数据的代码如下所示:
public object Post(RouteContentRulesRequest request)
{
return _dbConnectionFactory
.OpenReadOnlyAndRun(dbConn => dbConn.Select<RouteContentRule>(r => r.RouteId == request.RouteId).OrderBy(r => r.OrderId));
}
public object Any(CreateUpdateRouteContentRuleRequest request)
{
RouteContentRule entity;
if (!Db.Exists<Route>(new { Id = request.RouteId }))
{
throw new HttpError(HttpStatusCode.BadRequest, $"Route with id {request.RouteId} does not exist");
}
if (request.Id != 0)
{
var routeContentRule = _dbConnectionFactory.OpenReadOnlyAndRun(dbConn => dbConn.SingleById<RouteContentRule>(request.Id));
entity = request.ToEntity(routeContentRule);
Db.Update(entity, r => r.Id == routeContentRule.Id);
return entity.ToModel();
}
entity = request.ToEntity();
entity.OrderId = (_dbConnectionFactory.OpenReadOnlyAndRun(dbConn => dbConn.Scalar<RouteContentRule, int?>(x => Sql.Max(x.OrderId), x => x.RouteId == request.RouteId)) ?? 0) + 1;
var id = (int)Db.Insert(entity, true);
entity.Id = id;
return entity.ToModel();
}
public void Delete(DeleteRouteContentRuleRequest request)
{
Db.Delete<RouteContentRule>(new {Id = request.Id});
}
[
{
"Id":35,
"OrderId":1,
"RouteId":72303,
"SenderMatch":"335",
"ContentMatch":"",
"SenderReplace":"",
"ContentReplace":""
},
{
"Id":36,
"OrderId":2,
"RouteId":72303,
"SenderMatch":"55",
"ContentMatch":"",
"SenderReplace":"",
"ContentReplace":""
}
]
以下是来自Chrome开发者工具的图像:
问题是网格并没有显示这些数据。我可以看到,数据在这里,如果我点击网格单元。在这种情况下,单元格将变得可编辑,并显示数据的当前值。但一旦我将编辑移动到某个新单元格,以前的隐藏数据。我检查了单元格,发现单元格未编辑时,其描述如下:
<td style="text-align: right" aria-describedby="50349c08-da61-49d2-aa73-9c0823d4a4a4" role="gridcell">
<span><label class="SenderMatch" <="" label=""></label></span>
</td>
<td style="text-align: right" aria-describedby="ccc2df23-b49a-4b00-820a-02a67c428a52" role="gridcell" id="Grid_active_cell" class="k-edit-cell" data-role="editable">
<input type="text" class="k-input k-textbox" name="SenderMatch" data-bind="value:SenderMatch">
</td>
为什么要在类中添加[Route]
属性。。。。?它们应该在控制器
的操作
上
然后,您可以打开Chrome的开发工具,查看网络
选项卡,检查数据是否发送到后端
你可以粘贴网络
的图片,告诉我们你认为什么时候应该获取数据,然后我们可以检查问题出在哪里。你为什么要在你的类上添加[Route]
属性。。。。?它们应该在控制器
的操作
上
然后,您可以打开Chrome的开发工具,查看网络
选项卡,检查数据是否发送到后端
您可以粘贴网络
的图片,告诉我们您认为应该何时获取数据,然后我们可以检查问题所在。我找出了问题所在
columns: [
{
width: 150, field: "SenderMatch", title: "Sender match",
template: "<span><label class='SenderMatch'</label></span>",
headerAttributes: { title: "Sender match", style: "text-align: right" }, attributes: { style: "text-align: right" }
},
{
width: 150, field: "ContentMatch", title: "Content match",
template: "<span><label class='SenderMatch'</label></span>",
headerAttributes: { title: "Content match", style: "text-align: right" }, attributes: { style: "text-align: right" }
},
{
width: 150, field: "SenderReplace", title: "Sender replace",
template: "<span><label class='SenderMatch'</label></span>",
headerAttributes: { title: "Sender replace", style: "text-align: right" }, attributes: { style: "text-align: right" }
},
{
width: 150, field: "ContentReplace", title: "Content replace",
template: "<span><label class='SenderMatch'</label></span>",
headerAttributes: { title: "Content replace", style: "text-align: right" }, attributes: { style: "text-align: right" }
},
{
command: [
{ name: "destroy", template: "<a class='k-button k-grid-delete delete'><span class='k-sprite px-sprite px-i-sm-trash'></span></a>" }
],
width: "50px"
}],
列:[
{
宽度:150,字段:“发件人匹配”,标题:“发件人匹配”,
模板:“我找出了问题所在
columns: [
{
width: 150, field: "SenderMatch", title: "Sender match",
template: "<span><label class='SenderMatch'</label></span>",
headerAttributes: { title: "Sender match", style: "text-align: right" }, attributes: { style: "text-align: right" }
},
{
width: 150, field: "ContentMatch", title: "Content match",
template: "<span><label class='SenderMatch'</label></span>",
headerAttributes: { title: "Content match", style: "text-align: right" }, attributes: { style: "text-align: right" }
},
{
width: 150, field: "SenderReplace", title: "Sender replace",
template: "<span><label class='SenderMatch'</label></span>",
headerAttributes: { title: "Sender replace", style: "text-align: right" }, attributes: { style: "text-align: right" }
},
{
width: 150, field: "ContentReplace", title: "Content replace",
template: "<span><label class='SenderMatch'</label></span>",
headerAttributes: { title: "Content replace", style: "text-align: right" }, attributes: { style: "text-align: right" }
},
{
command: [
{ name: "destroy", template: "<a class='k-button k-grid-delete delete'><span class='k-sprite px-sprite px-i-sm-trash'></span></a>" }
],
width: "50px"
}],
列:[
{
宽度:150,字段:“发件人匹配”,标题:“发件人匹配”,
模板:“我从chrome开发工具上传了图像。关于路由属性。这是服务堆栈的约定。正如我在问题中所说,我在后端使用服务堆栈,而不是经典的MVC。我从chrome开发工具上传了图像。关于路由属性。这是服务堆栈的约定。正如我在问题中所说,我正在使用服务堆栈堆栈在我的后端,而不是经典的MVC。模板中的标签缺少大于字符:…class='SenderMatch'>模板中的标签缺少大于字符:…class='SenderMatch'>