[ASP.NET]ListView動態隱藏欄位
前言
ListView如果layout使用<table>的話,其實長出來跟GridView就沒啥太大差異,只是ListView的layout可以更加彈性的設計,使用方式基本上也差不多,最大的差異就是ListView上是Item,而GridView是用Row。
不過,因為ListView的layout,是使用LayoutTemplate,沒有資料時是套用EmptyDataTemplate,repeat的時候是repeat ItemTemplate的部分。所以當我們有需要根據某些情況,隱藏某些欄位時,作法跟GridView的Column[index].Visible是有點差異的。
Solution
假設我們以<table>來呈現ListView的資料,那麼
-
header的部分,通常就會在LayoutTemplate上,假設是
<th id="WantToHideColumn" runat="server"><asp:Label ID="myLabel1" runat="server" Text="ColumnX" /></th> -
資料的部分,則通常在ItemTemplate上,假設是
<th id="WantToHideColumn" runat="server"><asp:Label ID="myLabel1" runat="server" Text="ColumnX" /></th> -
沒有資料的時候,通常會show一個空的table,但看的到相關的header,所以我們會放在EmptyDataTemplate,假設是
<th id="WantToHideColumn" runat="server"><asp:Label ID="myLabel1" runat="server" Text="ColumnX" /></th>
因為我們要動態的隱藏某一欄,所以對應到的HTML,就是隱藏<th>跟<td>,值得注意的是,要隱藏的部分因為我們要在server端控制Visible,所以這些欄位,我們會加上runat="server"。
接下來我們要知道三種情況要怎麼FindControl:
-
LayoutTemplate
- this.MyListView.FindControl("WantToHideColumn") as HtmlTableCell
-
ItemTemplate
- e.Item.FindControl("WantToHideColumn") as HtmlTableCell
-
EmptyDataTemplate
- this.MyListView.Controls[0].FindControl("WantToHideColumn") as HtmlTableCell
所以,我們可以在PreRender的時候,判斷ListView有沒有資料,來隱藏LayoutTemplate或EmptyDataTemplate:
protected void Page_PreRender(object sender, EventArgs e)
{
if (MyCondition())
{
//抓取欲隱藏欄位標題,並將其隱藏
HtmlTableCell td;
if (this.MyListView.Items.Count == 0)
{
td = this.MyListView.Controls[0].FindControl("WantToHideColumn") as HtmlTableCell;
}
else
{
td = this.MyListView.FindControl("WantToHideColumn") as HtmlTableCell;
}
if (td != null)
{
td.Visible = false;
}
}
}
在ItemDataBound的時候,隱藏ItemTemplate裡面的欄位:
protected void MyListView_ItemDataBound(object sender, EventArgs e)
{
if (MyCondition())
{
//抓取欲隱藏欄位標題,並將其隱藏
HtmlTableCell td = e.Item.FindControl("WantToHideColumn") as HtmlTableCell;
if (td != null)
{
td.Visible = false;
}
}
}
結論
ListView不論是在HTML的layout,或是套用css,以及header和footer要做合併儲存格之類的設計,都彈性也輕鬆的多。
如果環境有用ASP.NET 3.5,那建議一定要學會使用ListView。
blog 與課程更新內容,請前往新站位置:http://tdd.best/