C# 为 kendo ui 网格列定义自定义模板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16037136/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Defining custom template for kendo ui grid column
提问by anilca
I have a kendo ui grid and I want to bind images. Here is my code:
我有一个剑道 ui 网格，我想绑定图像。这是我的代码：
@model List<NewHope.Model.Mt4_prices_instant>
<div class="tabContainer">
@(Html.Kendo().TabStrip()
.Name("tabstripMarketWatch")
.Items(tabstrip =>
{
tabstrip.Add().Text("Market Rates")
.Selected(true)
.Content(
@<text>
@if (Model != null)
{
@(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Template(
@<text>
@if (item.direction == 1)
{
<img src="~/Images/up.png" alt="up"/>
}
else if (item.direction == 0)
{
<img src="~/Images/down.png" alt="down"/>
}
</text>).Title("");
columns.Bound(p => p.symbol);
columns.Bound(p => p.bid);
columns.Bound(p => p.ask);
})
//.Groupable()
//.Pageable()
.Sortable()
.Scrollable()
//.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Products_Read", "MarketWatch"))
)
)
}
</text>
);
tabstrip.Add().Text("Cubes")
.Content(@<text>
<div class="weather">
<h2>18<span>ºC</span></h2>
<p>Cubes</p>
</div>
<span class="rainy"> </span>
</text>);
})
)
</div>
<style>
#tabstripMarketWatch-1, #tabstripMarketWatch-2 { /* tabstrip element */
position: absolute;
top: 41px;
bottom: 0;
left: 0;
right: 0;
width: auto;
height: auto;
}
#Grid {
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
For the following part:
对于以下部分：
columns.Template(
@<text>
@if (item.direction == 1)
{
<img src="~/Images/up.png" alt="up"/>
}
else if (item.direction == 0)
{
<img src="~/Images/down.png" alt="down"/>
}
</text>).Title("");
I'm getting "Inline markup blocks cannot be nested. Only one level of inline markup is allowed."error.
我收到“内联标记块不能嵌套。只允许一级内联标记。” 错误。
What do I have to do to render my grid succesfully?
我该怎么做才能成功渲染我的网格？
Thanks in advance,
提前致谢，
采纳答案by HaBo
columns.Bound(p => p.bid).ClientTemplate("<# if(direction == 1) {#>" +
"<img src='~/Images/up.png' alt='up'/>" +
"<#} else if(direction == 0) {#>" +
"<img src='~/Images/down.png' alt='down'/>" +
"<#}#>")
.Title("End").Width(80);
回答by Brian Mains
It's because razor sees multiple templated blocks, it finds this for the tabstrip:
这是因为 razor 看到多个模板块，它为 tabstrip 找到了这个：
.Content(
@<text>
@if (Model != null)
{ ..
and the grid:
和网格：
columns.Template(
@<text>
@if (item.direction == 1)
{
And Razor doesn't like that. Try the approach @Samuel linked to, which is to use the helper method to render the grid, and call that helper in your tabstrip.
而 Razor 不喜欢那样。尝试链接到@Samuel 的方法，即使用辅助方法呈现网格，并在选项卡中调用该辅助方法。
