かんたんASP.NET - リスト

第4章 一覧形式の入力フォーム


リスト 4-1 データバインドを用いないパターン(抜粋)

<asp:DropDownList ID="BirthDayGengoDropDownList"
  runat="server" Width="60px">
  <asp:ListItem Value=""></asp:ListItem>
  <asp:ListItem Value="M">明治</asp:ListItem>
  <asp:ListItem Value="T">大正</asp:ListItem>
  <asp:ListItem Value="S">昭和</asp:ListItem>
  <asp:ListItem Value="H">平成</asp:ListItem>
</asp:DropDownList>

↑Top


リスト 4-2 データバインドを用いたパターン (aspxファイル)

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>簡単なデータバインドの例</title>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <asp:DropDownList ID="BirthDayGengoDropDownList"
      runat="server">
    </asp:DropDownList>
  </div>
  </form>
</body>
</html>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>簡単なデータバインドの例</title>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <asp:DropDownList ID="BirthDayGengoDropDownList"
      runat="server">
    </asp:DropDownList>
  </div>
  </form>
</body>
</html>

↑Top


リスト 4-3 データバインドを用いたパターン (分離コードファイル)

Imports System.Data

Partial Class _Default
  Inherits System.Web.UI.Page

  Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    ' データソース取得
    Dim gengoDt As DataTable = GetGengoData()

    ' DropDownListにデータソース設定
    BirthDayGengoDropDownList.DataSource = gengoDt

    ' Value、Textにデータソースのどの情報を使用するか指定
    BirthDayGengoDropDownList.DataValueField = "Sign"
    BirthDayGengoDropDownList.DataTextField = "Gengo"

    ' データバインド実行
    BirthDayGengoDropDownList.DataBind()
  End Sub

  ' 元号データを取得
  ' ※実際はデータベース等から取得するようにする
  Private Function GetGengoData() As DataTable
    Dim dt As New DataTable()
    dt.Columns.Add("Sign", GetType(String))
    dt.Columns.Add("Gengo", GetType(String))

    dt.Rows.Add(New Object() {"M", "明治"})
    dt.Rows.Add(New Object() {"T", "大正"})
    dt.Rows.Add(New Object() {"S", "昭和"})
    dt.Rows.Add(New Object() {"H", "平成"})

    Return dt
  End Function
End Class

using System;
using System.Data;

public partial class _Default : System.Web.UI.Page
{
  protected void Page_Load(object sender, EventArgs e)
  {
    //データソース取得
    DataTable gengoDt = GetGengoData();

    // DropDownListにデータソース設定
    BirthDayGengoDropDownList.DataSource = gengoDt;

    // Value、Textにデータソースのどの情報を使用するか指定
    BirthDayGengoDropDownList.DataValueField = "Sign";
    BirthDayGengoDropDownList.DataTextField = "Gengo";

    // データバインド実行
    BirthDayGengoDropDownList.DataBind();
  }

  // 元号データを取得
  // ※実際はデータベース等から取得するようにする
  private DataTable GetGengoData()
  {
    DataTable dt = new DataTable();
    dt.Columns.Add("Sign", typeof(string));
    dt.Columns.Add("Gengo", typeof(string));

    dt.Rows.Add(new object[] { "M", "明治" });
    dt.Rows.Add(new object[] { "T", "大正" });
    dt.Rows.Add(new object[] { "S", "昭和" });
    dt.Rows.Add(new object[] { "H", "平成" });

    return dt;
  }
}

↑Top


リスト 4-4 GengoInfoクラス

Public Class GengoInfo
  ' 記号
  Private _Sign As String
  Public Property Sign() As String
    Get
      Return _Sign
    End Get
    Set(ByVal value As String)
      _Sign = value
    End Set
  End Property

  ' 元号
  Private _Gengo As String
  Public Property Gengo() As String
    Get
      Return _Gengo
    End Get
    Set(ByVal value As String)
      _Gengo = value
    End Set
  End Property
End Class
public class GengoInfo
{
  // 記号
  public string Sign { get; set; }

  // 元号
  public string Gengo { get; set; }
}

↑Top


リスト 4-5 GengoInfoのリスト使用時

Imports System.Data

Partial Class _Default
  Inherits System.Web.UI.Page

  Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    ' データソース取得
    Dim giList As List(Of GengoInfo) = GetGengoData()

    ' DropDownListにデータソース設定
    BirthDayGengoDropDownList.DataSource = giList

    ' Value、Textにデータソースのどの情報を使用するか指定
    BirthDayGengoDropDownList.DataValueField = "Sign"
    BirthDayGengoDropDownList.DataTextField = "Gengo"

    ' データバインド実行
    BirthDayGengoDropDownList.DataBind()
  End Sub

  ' 元号データを取得
  ' ※実際はデータベース等から取得するようにする
  Private Function GetGengoData() As List(Of GengoInfo)
    Dim giList As New List(Of GengoInfo)

    giList.Add(New GengoInfo With {.Sign = "M", .Gengo = "明治"})
    giList.Add(New GengoInfo With {.Sign = "T", .Gengo = "大正"})
    giList.Add(New GengoInfo With {.Sign = "S", .Gengo = "昭和"})
    giList.Add(New GengoInfo With {.Sign = "H", .Gengo = "平成"})

    Return giList
  End Function
End Class

using System;
using System.Collections.Generic;

public partial class _Default : System.Web.UI.Page
{
  protected void Page_Load(object sender, EventArgs e)
  {
    //データソース取得
    List<GengoInfo> giList = GetGengoData();

    // DropDownListにデータソース設定
    BirthDayGengoDropDownList.DataSource = giList;

    // Value、Textにデータソースのどの情報を使用するか指定
    BirthDayGengoDropDownList.DataValueField = "Sign";
    BirthDayGengoDropDownList.DataTextField = "Gengo";

    // データバインド実行
    BirthDayGengoDropDownList.DataBind();
  }

  // 元号データを取得
  // ※実際はデータベース等から取得するようにする
  private List<GengoInfo> GetGengoData()
  {
    List<GengoInfo> giList = new List<GengoInfo>();

    giList.Add(new GengoInfo { Sign = "M", Gengo = "明治" });
    giList.Add(new GengoInfo { Sign = "T", Gengo = "大正" });
    giList.Add(new GengoInfo { Sign = "S", Gengo = "昭和" });
    giList.Add(new GengoInfo { Sign = "H", Gengo = "平成" });

    return giList;
  }
}

↑Top


リスト 4-6 データバインド式を追加

    <asp:DropDownList ID="BirthDayGengoDropDownList"
      runat="server">
    </asp:DropDownList>
    <p>
      あなたが選択したのは、
      "<%# BirthDayGengoDropDownList.SelectedItem.Text %>"
      です。
    </p>

↑Top


リスト 4-7 元号DropDownListのAutoPostBackプロパティをTrueに変更

    <asp:DropDownList ID="BirthDayGengoDropDownList"
      AutoPostBack="true"
      runat="server">
    </asp:DropDownList>
    <p>
      あなたが選択したのは、
      "<%# BirthDayGengoDropDownList.SelectedItem.Text %>"
      です。
    </p>

↑Top


リスト 4-8 Page.Loadイベントハンドラの変更

  Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
      ' データソース取得
      Dim giList As List(Of GengoInfo) = GetGengoData()

      ' DropDownListにデータソース設定
      BirthDayGengoDropDownList.DataSource = giList

      ' Value、Textにデータソースのどの情報を使用するか指定
      BirthDayGengoDropDownList.DataValueField = "Sign"
      BirthDayGengoDropDownList.DataTextField = "Gengo"
    End If
    ' データバインド実行
    Page.DataBind()
  End Sub

  protected void Page_Load(object sender, EventArgs e)
  {
    if (!Page.IsPostBack)
    {
      //データソース取得
      List<GengoInfo> giList = GetGengoData();

      // DropDownListにデータソース設定
      BirthDayGengoDropDownList.DataSource = giList;

      // Value、Textにデータソースのどの情報を使用するか指定
      BirthDayGengoDropDownList.DataValueField = "Sign";
      BirthDayGengoDropDownList.DataTextField = "Gengo";
    }
    // データバインド実行
    Page.DataBind();
    }
  }

↑Top


リスト 4-9 コントロールとデータバインド式の連携

    <p>
      <asp:Label ID="Label1" runat="server"
        Text='<%# "あなたが選択したのは""" _
          & BirthDayGengoDropDownList.SelectedItem.Text _
          & """です。" %>'>
      </asp:Label>
    </p>

    <p>
      <asp:Label ID="Label1" runat="server"
        Text='<%# "あなたが選択したのは\""
          + BirthDayGengoDropDownList.SelectedItem.Text
          + "\"です。" %>'>
      </asp:Label>
    </p>

↑Top


リスト 4-10 TemplateFieldにデータバインドを設定したaspxファイル (抜粋)

<asp:GridView ID="GridView1" runat="server"
  AutoGenerateColumns="False" 
  DataKeyNames="ID"
  DataSourceID="ObjectDataSource1">
  <Columns>
    <asp:BoundField DataField="ID" HeaderText="ID"
      ReadOnly="True" 
      SortExpression="ID" />
    <asp:TemplateField HeaderText="Name"
      SortExpression="Name">
      <EditItemTemplate>
        <asp:TextBox ID="TextBox1"
          runat="server" 
          Text='<%# Bind("Name") %>'></asp:TextBox>
      </EditItemTemplate>
      <ItemTemplate>
        名前は&quot;
        <asp:Label ID="NameLabel"
          runat="server"
          Text='<%# Bind("Name") %>'></asp:Label>
        &quot;です
      </ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>

↑Top


リスト 4-11 項目配置例

<table>
  <tr>
    <td>
      ProductName
    </td>
    <td>
      <asp:TextBox ID="ProductNameTextBox" runat="server"></asp:TextBox>
    </td>
  </tr>
  <tr>
    <td>
      SupplierID
    </td>
    <td>
      <asp:TextBox ID="SupplierIDTextBox" runat="server"></asp:TextBox>
    </td>
  </tr>
  <tr>
    <td>
      CategoryID
    </td>
    <td>
      <asp:TextBox ID="CategoryIDTextBox" runat="server"></asp:TextBox>
    </td>
  </tr>
  <tr>
    <td>
      QuantityPerUnit
    </td>
    <td>
      <asp:TextBox ID="QuantityPerUnitTextBox" runat="server"></asp:TextBox>
    </td>
  </tr>
  <tr>
    <td>
      UnitPrice
    </td>
    <td>
      <asp:TextBox ID="UnitPriceTextBox" runat="server"></asp:TextBox>
    </td>
  </tr>
  <tr>
    <td>
      UnitsInStock
    </td>
    <td>
      <asp:TextBox ID="UnitsInStockTextBox" runat="server"></asp:TextBox>
    </td>
  </tr>
  <tr>
    <td>
      UnitsOnOrder
    </td>
    <td>
      <asp:TextBox ID="UnitsOnOrderTextBox" runat="server"></asp:TextBox>
    </td>
  </tr>
  <tr>
    <td>
      ReorderLevel
    </td>
    <td>
      <asp:TextBox ID="ReorderLevelTextBox" runat="server"></asp:TextBox>
    </td>
  </tr>
  <tr>
    <td>
      Discontinued
    </td>
    <td>
      <asp:CheckBox ID="DiscontinuedCheckBox" runat="server" />
    </td>
  </tr>
</table>
<asp:Button ID="AddButton" runat="server" Text="追加" />

<table>
  <tr>
    <td>
      ProductName
    </td>
    <td>
      <asp:TextBox ID="ProductNameTextBox" runat="server"></asp:TextBox>
    </td>
  </tr>
  <tr>
    <td>
      SupplierID
    </td>
    <td>
      <asp:TextBox ID="SupplierIDTextBox" runat="server"></asp:TextBox>
    </td>
  </tr>
  <tr>
    <td>
      CategoryID
    </td>
    <td>
      <asp:TextBox ID="CategoryIDTextBox" runat="server"></asp:TextBox>
    </td>
  </tr>
  <tr>
    <td>
      QuantityPerUnit
    </td>
    <td>
      <asp:TextBox ID="QuantityPerUnitTextBox" runat="server"></asp:TextBox>
    </td>
  </tr>
  <tr>
    <td>
      UnitPrice
    </td>
    <td>
      <asp:TextBox ID="UnitPriceTextBox" runat="server"></asp:TextBox>
    </td>
  </tr>
  <tr>
    <td>
      UnitsInStock
    </td>
    <td>
      <asp:TextBox ID="UnitsInStockTextBox" runat="server"></asp:TextBox>
    </td>
  </tr>
  <tr>
    <td>
      UnitsOnOrder
    </td>
    <td>
      <asp:TextBox ID="UnitsOnOrderTextBox" runat="server"></asp:TextBox>
    </td>
  </tr>
  <tr>
    <td>
      ReorderLevel
    </td>
    <td>
      <asp:TextBox ID="ReorderLevelTextBox" runat="server"></asp:TextBox>
    </td>
  </tr>
  <tr>
    <td>
      Discontinued
    </td>
    <td>
      <asp:CheckBox ID="DiscontinuedCheckBox" runat="server" />
    </td>
  </tr>
</table>
<asp:Button ID="AddButton" runat="server" Text="追加" onclick="AddButton_Click" />

↑Top


リスト 4-12 追加ボタンクリック処理

Protected Sub AddButton_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles AddButton.Click
  ' データ追加
  ObjectDataSource1.Insert()

  ' データ追加用項目のクリア
  ProductNameTextBox.Text = ""
  SupplierIDTextBox.Text = ""
  CategoryIDTextBox.Text = ""
  QuantityPerUnitTextBox.Text = ""
  UnitPriceTextBox.Text = ""
  UnitsInStockTextBox.Text = ""
  UnitsOnOrderTextBox.Text = ""
  ReorderLevelTextBox.Text = ""
  DiscontinuedCheckBox.Checked = False
End Sub

protected void AddButton_Click(object sender, EventArgs e)
{
  // データ追加
  ObjectDataSource1.Insert();

  // データ追加用項目のクリア
  ProductNameTextBox.Text = "";
  SupplierIDTextBox.Text = "";
  CategoryIDTextBox.Text = "";
  QuantityPerUnitTextBox.Text = "";
  UnitPriceTextBox.Text = "";
  UnitsInStockTextBox.Text = "";
  UnitsOnOrderTextBox.Text = "";
  ReorderLevelTextBox.Text = "";
  DiscontinuedCheckBox.Checked = false;
}

↑Top