asp.net-mvc
  • kendo-ui
  • kendo-asp.net-mvc
  • 2013-04-15 121 views 0 likes 
    0

    我想爲ListView創建自定義模板(我在ListView中顯示產品eShop)。我寫了這段代碼:爲KendoUI創建自定義模板ListView

    <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}}上遇到了一個錯誤。

    +0

    請檢查您添加完所有需要的應用程序劍道和jQuery引用。你的模板應該在。我希望你不要錯過這些! – HaBo

    +0

    @ HaBo:謝謝你幫助我。我編輯代碼。請幫幫我。謝謝 – Pouya

    +0

    你有一個控制器「產品」,它有行動方法「Products_Read」,它是否返回帶有屬性「ProductTitle」,「ProductThumbnailImageUrl」,「ProductPrice」和「ProductDescription」的對象? – HaBo

    回答

    2

    這就是你如何使用模板。 這是我最近用於我的網站的模板。

    <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 #

    相關問題