为kendo ui网格列定义自定义模板

Question

我有一个kendo用户界面网格，我想绑定图像。这是我的代码：

@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>&ordm;C</span></h2>
                        <p>Cubes</p>
                    </div>
                    <span class="rainy">&nbsp;</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%;
}

​

关于下列部分：

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("");

我得到“内联标记块不能嵌套。只允许一个级别的内联标记。”错误。

要成功地呈现网格，我需要做些什么呢？

提前谢谢你，

Answer 1

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);

Answer 2

因为剃须刀看到了多个模板块，所以它为制表带找到了以下内容：

 .Content(
     @<text>
        @if (Model != null)
        {   ..

而网格：

columns.Template(
   @<text>
         @if (item.direction == 1)
         {

而Razor不喜欢这样。尝试@Samuel链接的方法，即使用helper方法来呈现网格，并在表条中调用该助手。