ketyiaの学んだこと議事録

このサイトでは学んだことを記事にまとめていきます

ASP.NETについて勉強⑦ ~コレクションデータバインド~

ASP.NETについて勉強⑦ ~コレクションデータバインド~


こんばんは!
今、C#ASP.NETについて学んでいますので、アウトプットで記事にまとめていきます!!

今回はコレクションデータバインドについてまとめていきます。

コレクションデータバインド


ASP.NETでは、コレクションデータバインドを使用して、コレクションデータソース(リスト、配列など)をユーザーインターフェースコントロール(GridView、ListViewなど)にバインドできます。

ASP.NETでのコレクションデータバインドの基本的な手順は以下になります!

データソースの準備

最初に、バインドするデータソースを準備します。これは、オブジェクトのリストや配列などのコレクションデータソースである可能性があります。

コントロールの準備

次に、データを表示するためのユーザーインターフェースコントロールを準備します。これは、GridView、ListView、DropDownListなどのコントロールである可能性があります。

データバインド

最後に、データソースをコントロールにバインドします。これは、コントロールのDataSourceプロパティをデータソースに設定し、DataBindメソッドを呼び出すことで行います。

リスト構造型データバインド


リスト構造型データバインドは、単一のデータ項目のリストまたはコレクションを表示するために使用されます。これは、ListBox、DropDownList、RadioButtonListなどのコントロールで使用されます。各項目は、データソースの各エントリに対応します。

テーブル構造型データバインド


テーブル構造型データバインドは、複数のデータ項目のリストまたはコレクションを表示するために使用されます。これは、GridView、DetailsView、FormViewなどのコントロールで使用されます。各行は、データソースの各エントリに対応し、各列は、エントリの各プロパティまたはフィールドに対応します。

GridViewコントロール

GridViewコントロールは、データソースから複数のレコードを表示するためのコントロールです。各行はデータソースの各エントリに対応し、各列はエントリの各プロパティまたはフィールドに対応します。GridViewコントロールは、レコードの一覧表示、ソート、ページング、編集、削除などの機能を提供します。

DetailsViewコントロール

DetailsViewコントロールは、データソースから単一のレコードを表示するためのコントロールです。各フィールドは個別の行に表示され、各行はフィールドの名前と値を表示します。DetailsViewコントロールは、レコードの詳細表示、編集、挿入、ページングなどの機能を提供します。

FormViewコントロール

FormViewコントロールも、データソースから単一のレコードを表示するためのコントロールです。しかし、FormViewコントロールはテンプレートベースのコントロールであり、表示する内容とそのレイアウトを完全にカスタマイズすることができます。FormViewコントロールは、レコードの詳細表示、編集、挿入、ページングなどの機能を提供します。

階層構造型データバインド


階層構造型データバインドは、親子関係を持つデータ項目のリストまたはコレクションを表示するために使用されます。これは、TreeView、Menuなどのコントロールで使用されます。各項目は、データソースの各エントリに対応し、項目の階層構造は、エントリ間の親子関係に対応します。

ObjectDataSourceオブジェクト


ObjectDataSourceオブジェクトは、データバインドコントロール(例えば、GridView、DetailsView、FormViewなど)がビジネスオブジェクトまたはデータコンポネントと連携するためのブリッジとして機能します。これにより、データバインドコントロールはデータの選択、挿入、更新、削除などの操作を行うことができます。

データコンポネント


データコンポネントは、データベースやXMLファイルなどのデータソースとアプリケーションの間に位置するコンポーネントです。これらは、データの取得、更新、削除などの操作をカプセル化し、これらの操作をアプリケーションの他の部分から分離します。データコンポネントは、ObjectDataSourceオブジェクトによってデータバインドコントロールと連携します。

実際にASP.NET Web Formsで試してみる


以下のようなコードを書いてみます

>|aspx| 
<%--
    FileName: test.aspx
    Created by: keita
  Created on: 2024.6

    Description: 
   コレクションデータバインド
--%>

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ListBox ID="ListBox1" runat="server"></asp:ListBox>
            <asp:GridView ID="GridView1" runat="server"></asp:GridView>
            <asp:TreeView ID="TreeView1" runat="server"></asp:TreeView>
        </div>
    </form>
</body>
</html>
||<

 

>|C#|
/*
 * FileName: test.aspx.cs
 * Created by: keita
 * Created on: 2024.6
 * 
 * Description: 
* コレクションデータバインド
*/
using System;

public partial class test : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // リスト構造型データバインド
        List<string> listData = new List<string> { "Item 1", "Item 2", "Item 3" };
        ListBox1.DataSource = listData;
        ListBox1.DataBind();
        // テーブル構造型データバインド
        List<Person> tableData = new List<Person>
        {
            new Person { Name = "John", Age = "30" },
            new Person { Name = "Jane", Age = "25" },
            new Person { Name = "Doe", Age = "35" }
        };
        GridView1.DataSource = tableData;
        GridView1.DataBind();
        // 階層構造型データバインド
        TreeNode rootNode = new TreeNode("Root");
        TreeNode childNode1 = new TreeNode("Child 1");
        TreeNode childNode2 = new TreeNode("Child 2");
        rootNode.ChildNodes.Add(childNode1);
        rootNode.ChildNodes.Add(childNode2);
        TreeView1.Nodes.Add(rootNode);
    }
    private class Person
    {
        public string Name { get; set; }
        public string Age { get; set; }
    }
}
||<


では実行してみましょう


ASP.NETでのリスト構造型データバインド、テーブル構造型データバインド、階層構造型データバインドを表示します。

使いこなせると色々なデータの表現ができそうですね!面白い~

今日はここまでです♪
ここまで読んでいただきありがとうございます!