为KendoUI ListView创建自定义模板

时间:2013-04-15 12:43:38

标签: asp.net-mvc kendo-ui kendo-asp.net-mvc

我想为ListView创建一个自定义模板(我在ListView中展示产品eShop)。我写了这段代码:

<script type="text/x-kendo-tmpl" id="template">
    <div class="item">
    <div class="image">
        <a href='@Url.Action("GetDetails", "Products", routeValues: new {id =${ProductID}} )' target='_blank' class='pimg'>
            <img src="${ProductThumbnailImageUrl}" alt=" ${ProductTitle}"/>
        </a>
    <div class="price"> ${kendo.toString(ProductPrice, "n0")} </div>

    <div class="name">

</div>
    <div class="description_featured" style="min-height: 110px;">
        ${ProductDescription}

    </div>
    </div>
</div>

</script>

@(Html.Kendo().ListView(Model)
          .Name("listView")
          .TagName("div")
          .ClientTemplateId("template")
          .DataSource(dataSource =>
                      {
                          dataSource.Read(read => read.Action("Products_Read", "Products"));
                          dataSource.PageSize(12);
                          dataSource.ServerOperation(false);
                      })
          .Pageable()
             )

我在new {id = ${ProductTitle}}上收到错误。

1 个答案:

答案 0 :(得分:3)

这是您使用模板的方式。 这是我最近用于我的网站的模板上的一个。

<script type="text/x-kendo-tmpl" id="template">
       <div class="product">
            <img src='http://cdn.rbgx.net/images/skybazaar/products/medium/${ImageFileName}' alt="${Name} image" />
    <div class="productDeatails">
            <h3>#:Name#</h3>
     # if (EntityType == 2) { #
        Click to see products of this category
    # } else if(EntityType == 1) { #
     # if(parseFloat(SalePrice) > 0 && parseFloat(SalePrice) < parseFloat(Price)) { #
    Sale Price #: kendo.toString(SalePrice, "c")#
    # } else { #
     Price #: kendo.toString(Price, "c")#
    # } #
    # } #
        </div>
        </div>
    </script>

${ProductTitle}而言 使用#: ProductTitle #