Kendo UI 模板：无效模板错误
Posted
技术标签:
【中文标题】Kendo UI 模板：无效模板错误【英文标题】：Kendo UI Template: Invalid Template Error 【发布时间】：2012-12-09 11:09:37 【问题描述】：我正在尝试制作剑道 UI 网格模板。当我运行以下 Chrome 时，我会收到错误消息。我省略了其余大部分消息，因为它只是将所有生成的 html 和 javascript 打印到控制台。
Uncaught Error: Invalid template:'<div class="k-widget&#32;k-grid" id="l...
我正在尝试遵循页面上的“detailtemplate.cshtml”示例 http://demos.kendoui.com/web/grid/detailtemplate.html
我很难弄清楚我做错了什么。如果我删除模板脚本标签之间的所有内容，然后只放入一些愚蠢的 HTML，一切都会正常工作，所以我确信问题与我放入剑道网格的方式有关。
这是我的 HTML 页面中的代码。问题出在 ID 为“GridDetailsTemplate”的<script> 内部。
<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;'
【问题讨论】：
最有趣的部分是，如果您共享整个无效模板会非常有帮助:) 通常有 # 符号会破坏模板。分享出来让我们看看 代码部分中存在无效模板。它是 ID 为“GridDetailsTemplate”的那个。 我的意思是错误信息。它包含“真实”模板:) 哦，我明白你的意思了。我已经添加了该代码。当然它是缩小的，所以我用一些在线工具把它缩小了。 您能否检查一下问题是否与[此处][1] 的问题不同？ [1]：***.com/questions/13616320/… 【参考方案1】：我昨天遇到了这个问题，所以我找到了一个不需要您移除编码器的解决方案。
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，其中一次未编码变为&#32，两次未编码变为" "。
要使用它，只需在任何有问题的控件声明的末尾调用.ToMvcClientTemplate()。对于 OP，您可以在关闭 div 之前将其放在右括号之后。
I'm keeping a copy of this code here 以防万一有人在其他地方发布了更好的解决方案，因为我已经在多个地方发布了此代码。
HTH
【讨论】：
【参考方案2】：对于任何有类似问题的人，我是这样解决的：
我在 Web.config 中删除了这一行
<httpRuntime targetFramework="4.5" encoderType="System.Web.Security.AntiXss.AntiXssEncoder, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />.
【讨论】：
【参考方案3】：我之前使用了一个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;
我不知道是否有更有效的方法可以做到这一点，请随时发表评论。
【讨论】：
以上是关于Kendo UI 模板：无效模板错误的主要内容，如果未能解决你的问题，请参考以下文章