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