ASP.NETには、バージョン3.5から新しいサーバコントロールであるListViewが使えるようになりました。いくつかあるデータコントロールのうちでも、見た目のコントロールが非常に行いやすいという印象でしたので、「新館」のほうでさっそく使っています。
ですが、シンプルに使うながらまだしも、あれもやりたい、これもやりたい、と要求が高度になってくると、とたんに方法がわからなくなってしまうのも、この世界の常です。
今回は、テンプレート内のアイテムを、状況によって非表示にしたりスタイルを変える、といったことをやってみたので備忘録的に書いてみました。
ListViewについて簡単におさらいしておきます。
- GridViewなどと同じデータコントロール
- テンプレートに定義したもの以外は基本的に出力しない
- 外観のカスタマイズが非常に柔軟
こんな感じなので、HTMLレベルでタグを操作したり、CSSでばんばん見た目をコントロールしたい、という場合にはうってつけです。
基本的には、ItemTemplate要素内に、項目として表示したいものを定義し、あとは他のデータコントロールと同じにデータソースを決めて、Evalなどでバインドさせるといった流れで使えます。
話を簡単にするために、ItemTemplate要素が以下のように定義されているとしましょう。
<ItemTemplate>
<td runat="server">
<asp:Label ID="Label1" runat="server" Text='<%# (Eval("id") %>'></asp:Label>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("name") %>'></asp:Label>
</td>
</ItemTemplate>
td要素は、ListViewをページに貼り付けるとデフォルトでItemTemplate要素内に作成されます。話せば長くなるのですが、ListViewでは基本的にtable要素をはき出すので、内部の各項目は表のセルとしてはき出されることになります。そのためのtd要素です。
td要素はとりあえず放置しておき、見るのは2つのLabelコントロールです。それぞれデータバインド式が指定されていますので、データソースからid, nameに相当するものを引っ張ってきて、ラベルの内容として表示します。
ここで、idの評価結果が空であったら、ラベルの表示内容を「空」にする、というようにするにはどうしたらよいでしょうか？
これは、データバインドが各項目に対して実行される際に発生するItemDataBoundイベントをハンドルすることで可能になります。
protected void lvListView_ItemDataBound(object sender, ListViewItemEventArgs e)
{
Label lbl = (Label)e.Item.FindControl("Label1");
if lbl.Text.Length > 0)
{
lbl.Text = "空";
}
}
同じ要領で、コントロールのプロパティを操作できます。
私はこの方法を見つけるのに、何日もかかってしまいました。ItemDataBoundイベントのことを知っていればわけない話なのでしょうが、はまるときにははまってしまうものです。
ちなみに参考にしたのは、以下のページです。
