您的位置:首页 > 其它

ListView中使用ul-li布局展示数据

2013-07-16 00:20 218 查看
前台代码:

<!--comment books start-->
<div id="comment_book">
<!-- 使用ListView展示数据 -->
<asp:ListView ID="lvBookList" runat="server"
onpagepropertieschanging="lvBookList_PagePropertiesChanging">

<LayoutTemplate>
<!-- 占位符控件,此处使用ul -->
<ul id="itemPlaceholder" runat="server"></ul>
</LayoutTemplate>
<!-- 显示信息,此处使用li -->
<ItemTemplate>
<li>
<a href="#"><img src='Images/BookCovers/<%#Eval("ISBN") %>.jpg'
alt='<%#Eval("Title") %>' width="100px" height="120px" /></a>
<a href="#"><%#CutString2(Eval("Title"),15)%></a><br />
<%#Eval("UnitPrice","{0:C2}")%></a>
</li>
</ItemTemplate>
</asp:ListView>
<!-- 分页控件 -->
<asp:DataPager ID="dpNewBook" runat="server" PagedControlID="lvBookList" PageSize="12">
<Fields>
<asp:NumericPagerField ButtonCount="10" NextPageText="下一页"
PreviousPageText="上一页" />
</Fields>
</asp:DataPager>
</div>
<!--comment books end-->


CSS代码:



#comment_book{ height:100%; overflow:hidden;}
#comment_book li{ float:left; margin:0 5px 12px; text-align:center; display:inline;}
#comment_book li img{ display:block; border:1px solid #D4D7D6; padding:2px; margin-bottom:4px;}


后台代码:



protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
bindListView();//将List中的数据绑定到ListView中
}
}
/// <summary>
/// 将List中的数据绑定到ListView中
/// </summary>
private void bindListView()
{
this.lvBookList.DataSource = BooksManager.GetBooks();
this.lvBookList.DataBind();
}
/// <summary>
/// 单击页码时触发
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void lvBookList_PagePropertiesChanging(object sender, PagePropertiesChangingEventArgs e)
{
//点击分页控件中的页码时,进入新的页面
this.dpNewBook.SetPageProperties(e.StartRowIndex, e.MaximumRows, false);
//将List中的数据绑定到ListView中
bindListView();
}
#region 截断图书显示内容
/// <summary>
/// 截断图书显示内容
/// </summary>
public static string CutString2(object content, int length)
{
string temp = content.ToString().Replace("<br/>", "").Replace("<br>", "");//先替换换行标签,保证不出现换行
/*参数说明:要处理的字符串,符合条件的表达式[汉字],替换的字符[内容随意写但是要两个字符,
*因为一个中文对应两个字符,不区分大小写]
*/
if (Regex.Replace(temp, "[\u4e00-\u9fa5]", "zz", RegexOptions.IgnoreCase).Length <= length)
{
return temp;
}
for (int i = temp.Length; i >= 0; i--)
{
temp = temp.Substring(0, i);
if (Regex.Replace(temp, "[\u4e00-\u9fa5]", "zz", RegexOptions.IgnoreCase).Length <= length - 3)
{
return temp + "...";
}
}
return "";
}
#endregion


内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐