我正在尝试制作一个Kendo UI网格模板。当我运行以下Chrome时，会向我显示错误消息。我遗漏了剩下的大部分信息，因为它只是将所有生成的HTML和javascript打印到控制台。
Uncaught Error: Invalid template:'<div class="k-widget k-grid" id="l...
我正在尝试按照页面上的“detailtemplate.cshtml”示例 http://demos.kendoui.com/web/grid/detailtemplate.html
我很难搞清楚自己做错了什么。如果我擦除模板的脚本标签之间的所有内容，只是放入一些愚蠢的HTML，它一切正常，所以我确定问题与我放置kendo网格的方式有关。
这是我在HTML页面中的代码。问题出现在<script>内，ID为“GridDetailsTemplate”。
<div id="pendingApproval-tab">
@(Html.Kendo().Grid<Moly.BusinessLogic.Entities.MolyAssayEntity>()
.Name("pending-approval-grid")
.HtmlAttributes(new { style = "overflow: auto; height: 600px"})
.Columns(columns =>
{
columns.Bound(x => x.MolyLotID).HtmlAttributes(new {@class = "moly-lot-id"}).Hidden();
columns.Template(@<div></div>).ClientTemplate("<input class='ready-checkbox' type='checkbox'/>").Title("Ready");
columns.Bound(x => x.LotNo).Title("Lot").Groupable(false);
columns.Bound(x => x.DateProduced).Format("{0:MM/dd/yy}").Title("Date");
columns.Bound(x => x.NetWetWeight).Title("Net Wet Weight");
columns.Bound(x => x.TareWeight).Title("Tare Weight");
columns.Bound(x => x.NetDryWeight).Title("Dry Weight");
columns.Bound(x => x.GrossWeight).Title("Gross Weight");
columns.Bound(x => x.MolyWeight).Title("Lbs Mo");
columns.Bound(x => x.MoisturePercent).Title("% H20");
columns.Bound(x => x.MolyPercent).Title("Mo");
columns.Bound(x => x.CopperPercent).Title("Cu");
columns.Bound(x => x.LeadPercent).Title("Pb");
columns.Bound(x => x.InsolublesPercent).Title("Insol");
columns.Bound(x => x.ArsenicPercent).Title("As");
columns.Bound(x => x.CalciumOxidePercent).Title("CaO");
columns.Bound(x => x.IronPercent).Title("Fe");
columns.Bound(x => x.MagnesiumOxidePercent).Title("MgO");
columns.Bound(x => x.SodiumPercent).Title("Na");
columns.Bound(x => x.BatchID).Title("Batch ID");
columns.Bound(x => x.DunnageWt).Title("Dunnage Wt.");
columns.Bound(x => x.Comment).Title("Comments");
})
.ToolBar(toolbar =>
{
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.ClientDetailTemplateId("GridDetailsTemplate")
.DataSource(ds => ds
.Ajax()
.Batch(true)
.Model(model =>
{
model.Id(m => m.MolyLotID);
})
.Update(update => update.Action("UpdateMoly", "MolyLot"))
.Read(read => read
.Action("PendingApproval", "MolyLot")
.Type(HttpVerbs.Post)
)
)
.Events(events => events.DataBound("dataBound"))
)
</div>
<script type="text/javascript">
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
</script>
<script id="GridDetailsTemplate" type="text/kendo-tmpl">
@(Html.Kendo().Grid<Moly.BusinessLogic.Entities.UnroastedContainerEntity>()
.Name("lot-details-grid")
.Columns(columns =>
{
columns.Bound(x => x.ContainerNumber).Title("Number");
columns.Bound(x => x.Type).Title("Type");
columns.Bound(x => x.GrossWeight).Title("Gross Weight");
columns.Bound(x => x.TareWeight).Title("Tare Weight");
})
.DataSource(DataSource => DataSource
.Ajax()
.Read(read => read.Action("GetBags", "MolyLot"))
)
.ToClientTemplate()
)
</script>
以下是使用我的模板代码生成的“真实”模板：
<div class="k-widget k-grid" id="lot-details-grid">
<table cellspacing="0">
<colgroup>
<col />
<col />
<col />
<col />
</colgroup>
<thead class="k-grid-header">
<tr>
<th class="k-header" data-field="ContainerNumber" data-title="Number"
scope="col"><span class="k-link">Number</span>
</th>
<th class="k-header" data-field="Type" data-title="Type" scope="col"><span class="k-link">Type</span>
</th>
<th class="k-header" data-field="GrossWeight" data-title="Gross Weight"
scope="col"><span class="k-link">Gross Weight</span>
</th>
<th class="k-header" data-field="TareWeight" data-title="Tare Weight"
scope="col"><span class="k-link">Tare Weight</span>
</th>
</tr>
</thead>
<tbody>
<tr class="t-no-data">
<td colspan="4"></td>
</tr>
</tbody>
</table>
</div>
<script>
jQuery(function () {
jQuery("\#lot-details-grid").kendoGrid({
"columns": [{
"title": "Number",
"field": "ContainerNumber",
"encoded": true
}, {
"title": "Type",
"field": "Type",
"encoded": true
}, {
"title": "Gross Weight",
"field": "GrossWeight",
"encoded": true
}, {
"title": "Tare Weight",
"field": "TareWeight",
"encoded": true
}],
"scrollable": false,
"dataSource": {
"transport": {
"read": {
"url": "/Moly.Web/controller/action"
}
},
"serverPaging": true,
"serverSorting": true,
"serverFiltering": true,
"serverGrouping": true,
"serverAggregates": true,
"type": "aspnetmvc-ajax",
"filter": [],
"schema": {
"data": "Data",
"total": "Total",
"errors": "Errors",
"model": {
"fields": {
"UnroastedContainerID": {
"type": "number"
},
"MolyLotID": {
"type": "number"
},
"GrossWeight": {
"type": "number"
},
"Type": {
"type": "string"
},
"TareWeight": {
"type": "number"
},
"ContainerNumber": {
"type": "string"
},
"Units": {
"type": "string"
},
"MolyLot": {
"type": "object"
}
}
}
}
},
"detailTemplate": kendo.template($('\#GridDetailsTemplate').html())
});
}); < \ / script >
' Generated code:'
var o, e = kendo.htmlEncode;
with(data) {
o = '\n <div class="k-widget&';
32;
k - grid " id="
lot - details - grid "><table cellspacing="
0 "><colgroup><col /><col /><col /><col /></colgroup><thead class="
k - grid - header "><tr><th class="
k - header " data-field="
ContainerNumber " data-title="
Number " scope="
col "><span class="
k - link ">Number</span></th><th class="
k - header " data-field="
Type " data-title="
Type " scope="
col "><span class="
k - link ">Type</span></th><th class="
k - header " data-field="
GrossWeight " data-title="
Gross & ;
o += '32;Weight" scope="col"><span class="k-link">Gross Weight</span></th><th class="k-header" data-field="TareWeight" data-title="Tare&';
32;
Weight " scope="
col "><span class="
k - link ">Tare Weight</span></th></tr></thead><tbody><tr class="
t - no - data "><td colspan="
4 "></td></tr></tbody></table></div><script>
jQuery(function(){jQuery("#lot - details - grid ").kendoGrid({"
columns ":[{"
title ":"
Number ","
field ":"
ContainerNumber ","
encoded ":true},{"
title ":"
Type ","
field ":"
Type ","
encoded ":true},{"
title ":"
Gross Weight ","
field ":"
GrossWeight ","
encoded ":true},{"
title ":"
Tare Weight ","
field ":"
TareWeight ","
encoded ":true}],"
scrollable ":false,"
dataSource ":{"
transport ":{"
read ":{"
url ":" / Moly.Web / controller / action "}},"
serverPaging ":true,"
serverSorting ":true,"
serverFiltering ":true,"
serverGrouping ":true,"
serverAggregates ":true,"
type ":"
aspnetmvc - ajax ","
filter ":[],"
schema ":{"
data ":"
Data ","
total ":"
Total ","
errors ":"
Errors ","
model ":{"
fields ":{"
UnroastedContainerID ":{"
type ":"
number "},"
MolyLotID ":{"
type ":"
number "},"
GrossWeight ":{"
type ":"
number "},"
Type ":{"
type ":"
string "},"
TareWeight ":{"
type ":"
number "},"
ContainerNumber ":{"
type ":"
string "},"
Units ":{"
type ":"
string "},"
MolyLot ":{"
type ":"
object "}}}}},"
detailTemplate ":kendo.template($('#GridDetailsTemplate').html())});});
<\/script>
;o+=;}return o;'
答案 0 :(得分：6)
我昨天遇到了这个问题，所以我找到了一个不需要你删除编码器的解决方案。
using System.Web;
using System.Web.Mvc;
using System.Web.Security.AntiXss;
using System.Web.Util;
namespace Your.Namespace.Here
{
public static class KendoMvcExtensions
{
public static IHtmlString ToMvcClientTemplate(this MvcHtmlString mvcString)
{
if (HttpEncoder.Current.GetType() == typeof (AntiXssEncoder))
{
var initial = mvcString.ToHtmlString();
var corrected = initial.Replace("\\u0026", "&").Replace("%23", "#").Replace("%3D", "=").Replace(" ", " ");
return new HtmlString(corrected);
}
return mvcString;
}
}
}
检查AntiXssEncoder是否处于活动状态，如果是，则删除有问题的编码字符。您可以根据需要取出编码器检查，但不要更改字符被替换的顺序......它的结构是这样的，因为.NET会使某些字符（特别是验证文本）具有混合编码（UTF） -8和Unicode在同一个字符集中，例如：\u0026#32，其中一次编码为 ，未编码两次变为" "。
要使用它，只需在任何违规控制声明结束时调用.ToMvcClientTemplate()。在OP的情况下，您可以在关闭div之前将其放在右括号之后。
I'm keeping a copy of this code here以防其他人在其他地方发布更好的解决方案，因为我已在多个地方发布此代码。
HTH
答案 1 :(得分：0)
对于有类似问题的人，我这样解决了：
我已在Web.config中删除了这一行
<httpRuntime targetFramework="4.5" encoderType="System.Web.Security.AntiXss.AntiXssEncoder, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />.
答案 2 :(得分：0)
我之前使用了一个javascript函数来清理我的MVC部分，我还为\添加了一个卸载程序，因为我添加了许多MVC版本。
function fixTemplate(template) {
template = template.replace(/\\u0026/g, "&");
template = template.replace(/%23/g, "#");
template = template.replace(/%3D/g, "=");
template = template.replace(/ /g, " ");
template = template.replace(/\\/g, "");
return template;
}
我不知道是否有更有效的方法可以做到这一点，所以请随意发表评论。