MVC Kendo总结之-----> ListView

最新推荐文章于 2020-11-12 09:51:20 发布

扬天靜雲

最新推荐文章于 2020-11-12 09:51:20 发布

阅读量611

点赞数

分类专栏：学习技术工作文章标签： MVC Kendo ListView

本文链接：https://blog.csdn.net/u013028110/article/details/48467359

版权

技术同时被 3 个专栏收录

91 篇文章 0 订阅

订阅专栏

学习

43 篇文章 0 订阅

订阅专栏

工作

35 篇文章 0 订阅

订阅专栏

<div>
      @(Html.Kendo().ListView<ListViewViewModel>()
         .Name("InsigniaListView")
         .TagName("div")
         .HtmlAttributes(new { style = "border:0px;padding:7px 7px 0 7px;" })
         .<span style="color:#FF0000;">ClientTemplateId("InsigniaListViewTemplate")</span>
         .BindTo(Model.DataList)
         //.DataSource(dataSource => dataSource
         //   .Read(read =>
         //   {
         //      read.Action("GetData", "Home");
         //   })
         //)
         //.Pageable(pager => pager
               //   .Numeric(true)
               //   .Info(true)
               //   .PreviousNext(true)
               //   .ButtonCount(5)
               //   .PageSizes(Model.PageSizes)
               //)
      )
</div>

Name：ListView的名字，类似于HTML的ID，唯一的

TagName：ListView在页面上的标签名

HtmlAttributes：ListView的属性或者设置CSS

ClientTemplateId：ListView在页面上显示数据的模板

BindTo：ListView的数据源

DataSource：读取ListView的数据源

Pageable：ListView的导航条

ListViewModel：ListView数据源中每条数据使用的类

public class ListViewViewModel
   {
      public int No { get; set; }
      public int Identifier { get; set; }
      public string Title { get; set; }
      public int Status { get; set; }
      public string Author { get; set; }
      public string LibrarianComment { get; set; }
      public string StatusString { get; set; }
   }

<script <span style="color:#FF0000;">type="text/x-kendo-tmpl" id="InsigniaListViewTemplate"</span>>
   <div style='min-height:120px; height:120px;float:none;text-align:left;'>
      <div id='insigniaList#=No#' style='min-height:120px; height:120px'>
 
         <div style='width:99%;height:30px; margin-left:5px; border-bottom-style: solid;border-bottom-width:1px;'>
            <span style='display:block; font-weight:bold; text-align:left; margin-top:8px'; margin-left:5px' >#=No#.#=Title#</span>
         </div>
         
         <div style='display:inline-block; width:100%;margin-top:2px'>
            <div style='display:inline-block; margin-left:5px;'>
               <label>@Model.lblAuthor: </label>
            </div>
            <div style='display:inline-block; margin-left:5px;'>
               <label>#=Author#</label>
            </div>
         </div>

          <div style='display:inline-block; width:25%;margin-top:2px;margin-left:5px;'>
             <div style='display:inline-block; min-width:50px'>
               <label>@Model.lblStatus: </label>
             </div>
             <div style='display:inline-block; margin-left:5px;'>
               <label>#=StatusString#</label>
             </div>
          </div>

          <div id='LibrarianComment#=No#' style='display:inline-block;display:none; width:72%;margin-top:2px;margin-left:-3px;'>
             <div style='display:inline-block; margin-left:5px;min-width:70px'>
               <label>@Model.lblLibrarianComment: </label>
             </div>
             <div style='display:inline-block; margin-left:5px;text-align:left;'>
               <label style='height:auto;' id='txtLibrarianComment_#=No#'>#=LibrarianComment#</label>
             </div>
          </div>

          <div style='margin-left:5px;margin-top:2px;height:21px;width:30%;display:inline-block;'>
            <a href='javascript:void(0)' onclick = 'deleteList(#=Identifier#);return false;'>@Model.btnDelete</a>
            <span #if (Status == 'lyy') { #style='display:inline-block;'# } else {#style='display:none;'# }#> | </span>
            <a href='javascript:void(0)' #if (Status == 'lyy') { #style='display:inline-block;'# } else {#style='display:none;'# }#  οnclick='updateList(#if (Identifier == null || Identifier == '') { #0# } else {##=Identifier## }#);return false;'>@Model.btnUpdate</a>
          </div>

          <div style='width:67.5%; text-align:right; margin-right:10px; margin-top:3px;display:inline-block;'>
             <a href='javascript:void(0)' οnclick='toTop();return false'>@Model.Top↑</a>          
          </div>

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