[ASP.NET]ListView動態隱藏欄位

  • 13528
  • 0
  • 2010-12-09

[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的資料,那麼

  1. header的部分,通常就會在LayoutTemplate上,假設是
    <th id="WantToHideColumn" runat="server">
        <asp:Label ID="myLabel1" runat="server" Text="ColumnX" />
    </th>  
  2. 資料的部分,則通常在ItemTemplate上,假設是
    <th id="WantToHideColumn" runat="server">
        <asp:Label ID="myLabel1" runat="server" Text="ColumnX" />
    </th>  
  3. 沒有資料的時候,通常會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:

  1. LayoutTemplate
    • this.MyListView.FindControl("WantToHideColumn") as HtmlTableCell
  2. ItemTemplate
    • e.Item.FindControl("WantToHideColumn") as HtmlTableCell
  3. 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/