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

【问题标题】：Defining custom template for kendo ui grid column为 kendo ui 网格列定义自定义模板
【发布时间】：2013-04-08 20:43:21
【问题描述】：

我有一个剑道 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>&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("");

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

如何才能成功渲染我的网格？

提前致谢，

【问题讨论】：

看到这个帖子：stackoverflow.com/questions/10684025/…

标签： c# asp.net-mvc razor kendo-ui kendo-grid

【解决方案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);

【讨论】：

如果模板中有很多条件，最好将要测试的值传递给函数。 columns.Bound(p => p.bid).ClientTemplate("#=getImage(direction)#") ...more code... <script type="text/javascript"> function getImage(direction){ if(direction == 1) { return "<img src='~/Images/up.png' alt='up'/>"; } else if(direction == 0) { return "<img src='~/Images/down.png' alt='down'/>" } else if(<some other condition) {} } </script>
谁能推荐一些我可以阅读的东西，以了解所有这些语法如何组合在一起。我很难真正理解。谢谢

【解决方案2】：

这是因为 razor 看到多个模板块，它为 tabstrip 找到了这个：

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

和网格：

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

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

【讨论】：