VB / ASP.NET GridView の使い方

１．単純に表示（行列３×３を表示）

結果
NoTitleDate
1start2022/02/18
2book2022/06/28
3lemon2022/02/18
page1.aspx
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="page1.aspx.vb" Inherits="page1" %> <!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></title> </head> <body> <form id="form1" runat="server">
　GridView を追加する。
<asp:GridView id="gv" runat="server"> </asp:GridView> </form> </body> </html>
page1.aspx.vb
Imports System.Data Partial Class page1 Inherits System.Web.UI.Page Private Sub page1_Load(sender As Object, e As EventArgs) Handles Me.Load
　GridView で表示する値を DataTable で作成する。
If Not IsPostBack Then Dim dt As New DataTable dt.Columns.Add("No") dt.Columns.Add("Title") dt.Columns.Add("Date") dt.Rows.Add(New Object() {1, "start", "2022/02/18"}) dt.Rows.Add(New Object() {2, "book", "2022/06/28"}) dt.Rows.Add(New Object() {3, "lemon", "2022/02/18"})
　GridView へ DataTable をバインドする。
gv.DataSource = dt gv.DataBind() End If End Sub End Class

２．行結合と列結合

結果
NoTitleDate
1star2022/02/18
book2022/06/28
lemon
2tomato2022/04/01
banana2022/11/31
novel
page2.aspx（１行目以外は page1.aspx と同じ）
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="page2.aspx.vb" Inherits="page2" %> <!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></title> </head> <body> <form id="form1" runat="server"> <asp:GridView id="gv" runat="server"> </asp:GridView> </form> </body> </html>
page2.aspx.vb
Imports System.Data Imports System.Data Partial Class page2 Inherits System.Web.UI.Page Private Sub page2_Load(sender As Object, e As EventArgs) Handles Me.Load If Not IsPostBack Then Dim dt As New DataTable dt.Columns.Add("No") dt.Columns.Add("Title") dt.Columns.Add("Date") dt.Rows.Add(New Object() {1, "star", "2022/02/18"}) dt.Rows.Add(New Object() {0, "book", "2022/06/28"}) dt.Rows.Add(New Object() {0, "lemon", "2022/02/18"}) dt.Rows.Add(New Object() {2, "tomato", "2022/04/01"}) dt.Rows.Add(New Object() {0, "banana", "2022/11/31"}) dt.Rows.Add(New Object() {0, "novel", "2022/03/03"}) gv.DataSource = dt gv.DataBind()
　１行目１列～３行目１列を結合する。
　結合したため２行目と３行目の１列目を非表示にする。
gv.Rows(0).Cells(0).RowSpan = 3 gv.Rows(1).Cells(0).Visible = False gv.Rows(2).Cells(0).Visible = False
　３行目の２列と３行目を結合する。
　結合したため３行目３列目を非表示にする。
gv.Rows(2).Cells(1).ColumnSpan = 2 gv.Rows(2).Cells(2).Visible = False gv.Rows(3).Cells(0).RowSpan = 3 gv.Rows(4).Cells(0).Visible = False gv.Rows(5).Cells(0).Visible = False gv.Rows(5).Cells(1).ColumnSpan = 2 gv.Rows(5).Cells(2).Visible = False End If End Sub End Class

３．TemplateField タグを使用して表示

結果
項番名称日付
1 star 2022/02/18
book 2022/06/28
lemon
2 tomato 2022/04/01
banana 2022/11/31
novel
page3.aspx
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="page3.aspx.vb" Inherits="page3" %> <!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></title> </head> <body> <form id="form1" runat="server"> <asp:GridView id="gv" runat="server"
　AutoGenerateColumns を False に設定し自動で列が追加されないようにする。
AutoGenerateColumns="false">
　Columns と asp:TemplateField で列を定義する。
　HeaderTemplate は列名を設定、ItemTemplate はセルの表示を設定する。
<Columns> <asp:TemplateField> <HeaderTemplate>項番</HeaderTemplate> <ItemTemplate> <asp:Label ID="lblNo" Text='<%# Bind("No") %>' runat="server" /> </ItemTemplate> </asp:TemplateField> <asp:TemplateField> <HeaderTemplate>名称</HeaderTemplate> <ItemTemplate> <asp:Label ID="lblTitle" Text='<%# Bind("Title") %>' runat="server" /> </ItemTemplate> </asp:TemplateField> <asp:TemplateField> <HeaderTemplate>日付</HeaderTemplate> <ItemTemplate> <asp:Label ID="lblDate" Text='<%# Bind("Date") %>' runat="server" /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </form> </body> </html>
page3.aspx.vb
Imports System.Data Imports System.Drawing Partial Class page3 Inherits System.Web.UI.Page Private Sub page3_Load(sender As Object, e As EventArgs) Handles Me.Load If Not IsPostBack Then Dim dt As New DataTable dt.Columns.Add("No") dt.Columns.Add("Title") dt.Columns.Add("Date") dt.Rows.Add(New Object() {1, "star", "2022/02/18"}) dt.Rows.Add(New Object() {0, "book", "2022/06/28"}) dt.Rows.Add(New Object() {0, "lemon", "2022/02/18"}) dt.Rows.Add(New Object() {2, "tomato", "2022/04/01"}) dt.Rows.Add(New Object() {0, "banana", "2022/11/31"}) dt.Rows.Add(New Object() {0, "novel", "2022/03/03"}) gv.DataSource = dt gv.DataBind()
　ヘッダの背景色を設定する。
　以下は page2.aspx でも同様に設定できる。
gv.HeaderStyle.BackColor = Color.FromArgb(&HFF80)
　項番の値を右上に表示するように設定する。
gv.Rows(0).Cells(0).Style("vertical-align") = "top" gv.Rows(0).Cells(0).Style("text-align") = "right" gv.Rows(0).Cells(0).RowSpan = 3 gv.Rows(1).Cells(0).Visible = False gv.Rows(2).Cells(0).Visible = False gv.Rows(2).Cells(1).ColumnSpan = 2 gv.Rows(2).Cells(2).Visible = False gv.Rows(3).Cells(0).Style("vertical-align") = "top" gv.Rows(3).Cells(0).Style("text-align") = "right" gv.Rows(3).Cells(0).RowSpan = 3 gv.Rows(4).Cells(0).Visible = False gv.Rows(5).Cells(0).Visible = False gv.Rows(5).Cells(1).ColumnSpan = 2 gv.Rows(5).Cells(2).Visible = False End If End Sub End Class

４．セル編集

結果
 項番名称日付
編集 1 star 2022/02/18
編集 book 2022/06/28
編集 lemon
編集 2 tomato 2022/04/01
編集 banana 2022/11/31
編集 novel
編集をクリック
→
 項番名称日付
編集 1 star 2022/02/18
更新 キャンセル 2022/06/28
編集 lemon
編集 2 tomato 2022/04/01
編集 banana 2022/11/31
編集 novel
page4.aspx
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="page4.aspx.vb" Inherits="page4" %> <!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></title> </head> <body> <form id="form1" runat="server"> <asp:GridView id="gv" runat="server" AutoGenerateColumns="false"
　AutoGenerateEditButton を True にする事で
編集と更新、キャンセルを設ける。
AutoGenerateEditButton="true"> <Columns> <asp:TemplateField> <HeaderTemplate>項番</HeaderTemplate> <ItemTemplate> <asp:Label ID="lblNo" Text='<%# Bind("No") %>' runat="server" /> </ItemTemplate> </asp:TemplateField> <asp:TemplateField> <HeaderTemplate>名称</HeaderTemplate> <ItemTemplate> <asp:Label ID="lblTitle" Text='<%# Bind("Title") %>' runat="server" /> </ItemTemplate>
　編集をクリックすると ItemTemplate の代わりに
EditItemTemplate で指定したタグを表示する。
<EditItemTemplate> <asp:TextBox ID="txtTitle" Text='<%# Bind("Title") %>' runat="server" /> </EditItemTemplate> </asp:TemplateField> <asp:TemplateField> <HeaderTemplate>日付</HeaderTemplate> <ItemTemplate> <asp:Label ID="lblDate" Text='<%# Bind("Date") %>' runat="server" /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </form> </body> </html>
page4.aspx.vb
Imports System.Data Imports System.Drawing Partial Class page4 Inherits System.Web.UI.Page Private Sub page4_Load(sender As Object, e As EventArgs) Handles Me.Load If Not IsPostBack Then Dim dt As New DataTable dt.Columns.Add("No") dt.Columns.Add("Title") dt.Columns.Add("Date") dt.Rows.Add(New Object() {1, "star", "2022/02/18"}) dt.Rows.Add(New Object() {0, "book", "2022/06/28"}) dt.Rows.Add(New Object() {0, "lemon", "2022/02/18"}) dt.Rows.Add(New Object() {2, "tomato", "2022/04/01"}) dt.Rows.Add(New Object() {0, "banana", "2022/11/31"}) dt.Rows.Add(New Object() {0, "novel", "2022/03/03"})
　セルの値を編集できるようにするためにはセッション変数に DataTable を設定する。
Session(gv.ID) = dt
　GridView へ DataTable をバインドし、スタイルを変更する。
gv_Bind(gv) End If End Sub
　編集をクリックした時の処理。
編集する行を GridView へ設定する。
Private Sub gv_RowEditing(sender As Object, e As GridViewEditEventArgs) Handles gv.RowEditing Dim gvSender As GridView = CType(sender, GridView) gvSender.EditIndex = e.NewEditIndex gv_Bind(gvSender) End Sub
　キャンセルをクリックした時の処理。
編集する行に -1 を GridView へ設定する。
Private Sub gv_RowCancelingEdit(sender As Object, e As GridViewCancelEditEventArgs) Handles gv.RowCancelingEdit Dim gvSender As GridView = CType(sender, GridView) gvSender.EditIndex = -1 gv_Bind(gvSender) End Sub
　更新をクリックした時の処理。GridView の編集行の値を取得し、
DataTable の該当セルに設定する。
Private Sub gv_RowUpdating(sender As Object, e As GridViewUpdateEventArgs) Handles gv.RowUpdating Dim gvSender As GridView = CType(sender, GridView) Dim row As GridViewRow = gvSender.Rows(e.RowIndex) Dim rowDst As DataRow = CType(Session(gvSender.ID), DataTable).Rows(row.DataItemIndex) rowDst("Title") = CType(row.Cells(2).FindControl("txtTitle"), TextBox).Text gvSender.EditIndex = -1 gv_Bind(gvSender) End Sub
　GridView へ DataTable をバインドする。
　また、スタイルを設定する。
Private Sub gv_Bind(gvSender As GridView) gvSender.DataSource = CType(Session(gvSender.ID), DataTable) gvSender.DataBind() gvSender.HeaderStyle.BackColor = Color.FromArgb(&HFF80) gv.Rows(0).Cells(1).Style("vertical-align") = "top" gv.Rows(0).Cells(1).Style("text-align") = "right" gv.Rows(0).Cells(1).RowSpan = 3 gv.Rows(1).Cells(1).Visible = False gv.Rows(2).Cells(1).Visible = False gv.Rows(2).Cells(2).ColumnSpan = 2 gv.Rows(2).Cells(3).Visible = False gv.Rows(3).Cells(1).Style("vertical-align") = "top" gv.Rows(3).Cells(1).Style("text-align") = "right" gv.Rows(3).Cells(1).RowSpan = 3 gv.Rows(4).Cells(1).Visible = False gv.Rows(5).Cells(1).Visible = False gv.Rows(5).Cells(2).ColumnSpan = 2 gv.Rows(5).Cells(3).Visible = False End Sub End Class
A THINKING FRUIT