データが無い状態でもListViewでヘッダーを表示する方法 | asp.net

2017/03/17
16:02

asp.netのListViewにおいて、データが存在しない場合（ページ表示初期状態）においてヘッダーのみを表示する方法をご説明いたします。
まず、標準のListViewを作成したばかりですと、バインドするデータソースが０件のデータである場合、明細のみならずヘッダーまで全てのListViewの表示が消えてしまいます。それを解消するのが、EmptyDataTemplate であり、その設定方法についてご紹介したいと思います。

※図の上部がデータが無い場合。下部がデータが存在する場合。
横幅はcssでmin-widthに設定していますので、データの分だけ横に広がっていますが、気になれば、widthのみ設定してヘッダー部も明細部も固定してしまえば良いでしょう。

前提条件
・Windows 7 Professional 以降 / Windows Server 2008 R2 以降
・Visual Studio 2008 Professional 以降
・VB.NET
・.Net Framework 3.5 以降

１．EmptyDataTemplate の使用方法

EmptyDataTemplateとはデータが０件のデータソースをバインドした場合に表示される領域です。通常、LayoutTemplateやItemTemplateの中にテーブルやtr th td を記述して表を作成しますが、LayoutTemplateやItemTemplateはデータが０件の場合には描画されない部分となります。そこで、EmptyDataTemplateにヘッダー部分だけ記述すれば、データが存在しない場合でもヘッダー部のみ表示が可能となります。よって記述は重複しますが、以下のような構成にすれば、ヘッダー部のみ描画が可能です。

<EmptyDataTemplate>
    <table>
        ヘッダー部
    </table>
</EmptyDataTemplate>
<LayoutTemplate>
    <table>
        ヘッダー部
    </table>
</LayoutTemplate>

２．サンプルソース

aspx

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ListViewTest.aspx.vb" Inherits="ListViewTextChanged.ListViewTest" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>ListViewSample</title>
    <link rel="stylesheet" type="text/css" href="~/Scripts/Style.css" media="all" />
</head>
<body>
<form id="form1" runat="server">
    <div class="table-area">
        <asp:ListView ID="ListView1" runat="server" GroupPlaceholderID="groupPlaceHolder1" ItemPlaceholderID="itemPlaceHolder1">
            <EmptyDataTemplate>
                <table>
                    <tr>
                        <th runat="server" class="id-field">
                            <label>ID</label>
                        </th>
                        <th runat="server" class="name-field">
                            <label>名前</label>
                        </th>
                        <th runat="server" class="age-field">
                            <label>年齢</label>
                        </th>
                        <th runat="server" class="result-field">
                            <label>判定</label>
                        </th>
                    </tr>
                </table>
                <p class="error-text">
                    データが存在しません。
                </p>
            </EmptyDataTemplate>
            <LayoutTemplate>
                <div class="header-area">
                    <table>
                        <tr>
                            <th runat="server" class="id-field">
                                <label>ID</label>
                            </th>
                            <th runat="server" class="name-field">
                                <label>名前</label>
                            </th>
                            <th runat="server" class="age-field">
                                <label>年齢</label>
                            </th>
                            <th runat="server" class="result-field">
                                <label>判定</label>
                            </th>
                        </tr>
                        <asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
                    </table>
                </div>
            </LayoutTemplate>
            <GroupTemplate>
                <div class="data-area">
                    <tr>
                        <asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
                    </tr>
                </div>
            </GroupTemplate>
            <ItemTemplate>
                <tr runat="server">
                    <td runat="server" class="id-field">
                        <asp:Label ID="lblID" runat="server" Text='<%# (Eval("ID")) %>'></asp:Label>
                    </td>
                    <td runat="server" class="name-field">
                        <asp:Label ID="lblName" runat="server" Text='<%# (Eval("NAME")) %>'></asp:Label>
                    </td>
                    <td runat="server" class="age-field">
                        <asp:TextBox ID="txtAge" runat="server" AutoPostBack="True" OnTextChanged="txtAge_TextChanged"></asp:TextBox>
                    </td>
                    <td runat="server" class="result-field">
                        <asp:Label ID="lblResult" runat="server"></asp:Label>
                    </td>
                </tr>
            </ItemTemplate>
        </asp:ListView>
    </div>
</form>
</body>
</html>

Public Class ListViewTest
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        Dim dbUtil As New DbUtility()
        Dim ds As DataSet = Nothing
        Dim sql As New StringBuilder
        sql.AppendLine(" SELECT  ID ")
        sql.AppendLine("        ,Convert(varchar, DecryptByPassPhrase('password', [NAME])) AS NAME ")
        sql.AppendLine("        ,AGE ")
        sql.AppendLine(" FROM T_Customer ")
        sql.AppendLine(" WHERE ID <= 0 ")   'データが０件になるような条件

        dbUtil.Connect()
        dbUtil.ClearParams()
        ds = dbUtil.ExecuteFill(sql.ToString, "CUSTOMER")
        Me.ListView1.DataSource = ds
        Me.ListView1.DataBind()

    End Sub
End Class

最後までお読みいただきありがとうございます。
いかがでしたでしょうか。他にも asp.net に関連する記事を投稿しておりますのでよろしければご参考くださいませ。

関連記事

ListViewのヘッダーを固定する方法 | asp.net
ListViewの明細毎に存在するチェックボックスをJavascriptで全て更新する方法 | asp.net
データが無い状態でもListViewでヘッダーを表示する方法 | asp.net
TreeViewにおいて親子関係のチェックを付ける方法 | asp.net
TreeViewでチェックボックスの変更イベントを発生させる方法（ポストバック方法） | asp.net

.NetFramework3.5をインストールしようとすると0x800F081Fのエラーコードが表示される | Windows10 ホーム Remoted iOS Simulator for Windows の動作要件が Visual Studio Enterprise に変更された件 | Xamarin.Forms

コメントの投稿

※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。

　入力されていないコメントには返信しませんのであらかじめご了承くださいませ。

ITブログ時々なんでもブログ