- 追加された行はこの色です。
- 削除された行はこの色です。
閲覧総計:&counter(); (本日:&counter(today); 昨日:&counter(yesterday);)
1件のデータ項目が多い場合の「新規データ追加」は、GridViewの最下列を利用して
入力作業を行うより、DetailsViewの画面を利用し、1件の内容を1ページに大きく表示し、
新規データ入力を行う方が作業効率が高い。
今回は、DetailsViewの「Insert」画面を利用した「新規データ入力」画面を作成してみた。 09/11/23
【方法】
・データ一覧表示用のGridViewEdit01.aspxと、新規データ入力用のDetailsViewInsert01.aspx
の2つのファイルを用いる。
・DetailsViewのプロパティの「DefaultMode」を「Insert」にし、新規登録画面を表示する。
・DetailsViewInsert01.aspxに以下のコードを書く。
・新規データ入力用のDetailsViewInsert01.aspxと、データ一覧表示用のGridViewEdit01.aspx
の2つのファイルを用いる。
・DetailsViewのプロパティの「DefaultMode」を「Insert」にし、新規登録画面を表示する。
・DetailsViewInsert01.aspxにデータ挿入の以下のコードを書く。
InsertCommand="INSERT INTO [名簿] ([名前], [年齢]) VALUES (?, ?)"
<InsertParameters>
<asp:Parameter Name="名前" Type="String" />
<asp:Parameter Name="年齢" Type="Int16" />
</InsertParameters>
・新規データ入力が完了したら「データ一覧表示」へ移動する。
・新規データ入力が完了したら「データ一覧表示」へ移動するコードを書く。
Protected Sub DetailsView1_ItemInserted(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DetailsViewInsertedEventArgs)
Response.Redirect("GridViewEdit01.aspx")
End Sub
開発環境:VWD2005 + Access2003
サーバ:ASP.NET2.0 + Access2003
【機能】GridViewに新設した「挿入」ボタンでAccessデータに新たなデータを挿入する。
【機能】DetailsViewで1件を1ページで新規データの入力を行う。
データ一覧表示はGridViewで行う。GridViewの「編集」機能も動作する。
【稼働画面】
#ref(AccessGridViewInsert.JPG);
#ref(DetailsViewInsert01.JPG);
Accessデータベース名:MyDB.mdb
テーブル名:名簿
|~フィールド名|~データ型|~フィールドサイズ|
|ID (主キー)|オートナンバー型|長整数型|
|名前|テキスト型|50|
|年齢|数値型|整数型|
※VWD2005、ASP.NET2.0環境ではAccess2007のDBファイル形式(*.accdb)は利用できな
い模様。DBファイルは「Acces2002-2003形式(*.mdb)」で保存して利用する。
コントロールの設定値
|~コントロール|~プロパティ|~値|~コメント|
|編集フィールド|ButtonType|Button|TemplateFieldに変換する前に設定|
|~コントロールID|~コントロール|~プロパティ|~値|~コメント|
|GridView1|編集フィールド|ButtonType|Button|LinkButtonをButtonに変更|
~
|~テンプレート|~コントロール|~プロパティ|~値|~コメント|
|Column[0] Footer|Button|CommandName|Insert||
|~|~|Text|挿入||
|Column[2] Footer|TextBox|(ID)|InsertName||
|~|~|Width|80||
|Column[3] Footer|TextBox|(ID)|InsertAge||
|~|~|Width|30||
|~コントロールID|~プロパティ|~値|~コメント|
|DetailsView1|DefaultMode|Insert|新規登録画面を表示|
【ハマリポイントの紹介】
コードを書く場所の「RowCommand」の出し方がわからなくて苦労した。
ソースの画面で「GridView1」の「RowCommand」を自分で選択する。
#ref(RowCommand.JPG);
~
【自動生成コードの不具合】
データテーブルのIDが「オートナンバ型」に設定されていると、「挿入」ボタンを
クリックした時点で「バリアント型ではない変数に Null 値を代入しようとしました。」のエラーが出て動かない。
【原因】
IDは「オートナンバ型」であるのに、自動生成されたInsertCommandは「ID」も更新
しようとしている事がエラー発生の原因。
InsertCommand="INSERT INTO [名簿] (&color(crimson){[ID],}; [名前], [年齢]) VALUES (&color(crimson){?,}; ?, ?)"
<InsertParameters>
&color(crimson){<asp:Parameter Name="ID" Type="Int32" />};
<asp:Parameter Name="名前" Type="String" />
<asp:Parameter Name="年齢" Type="Int16" />
</InsertParameters>
【解決方法】
InsertCommandが「ID」を更新しようとしている所の情報を削除してやる。
今回の場合は、
nsertCommandの[ID],と?,の2ヶ所を削除
<asp:Parameter Name="ID" Type="Int32" />の行を削除
でエラーは解消し、「挿入」機能が正しく動作する様になった。
InsertCommand="INSERT INTO [名簿] ([名前], [年齢]) VALUES (?, ?)"
<InsertParameters>
<asp:Parameter Name="名前" Type="String" />
<asp:Parameter Name="年齢" Type="Int16" />
</InsertParameters>
「挿入」機能が正しく動く様になった自動生成全コード
【GridViewInsert.aspx】
【DetailsViewInsert01.aspx】(新規データの入力)
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
'RowCommand():GridViewのボタンクリック時発生イベント:http://www.weblio.jp/content/GridView.RowCommand+%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88
Protected Sub GridView1_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs)
If e.CommandName = "Insert" Then
AccessDataSource1.InsertParameters.Clear()
For Each key As String In Request.Form.AllKeys
If key.Contains("$InsertName") Then
AccessDataSource1.InsertParameters.Add(New ControlParameter("名前", TypeCode.String, key, "Text"))
End If
If key.Contains("$InsertAge") Then
AccessDataSource1.InsertParameters.Add(New ControlParameter("年齢", TypeCode.String, key, "Text"))
End If
Next
AccessDataSource1.Insert()
End If
'新規データ登録後にデータ一覧ページへ移動する
Protected Sub DetailsView1_ItemInserted(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DetailsViewInsertedEventArgs)
Response.Redirect("GridViewEdit01.aspx")
End Sub
'データ一覧ページへ戻るボタン
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Response.Redirect("GridViewEdit01.aspx")
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>無題のページ</title>
<title>DetailsViewでの新規データ追加</title>
</head>
<body>
<form id="form1" runat="server">
<div>
AccessでのGridView挿入の稼働確認 09/09/16<br />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID"
DataSourceID="AccessDataSource1" EmptyDataText="表示するデータ レコードがありません。" ShowFooter="True" OnRowCommand="GridView1_RowCommand">
DetailsViewでの新規データ追加 09/11/23<br />
<br />
<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateInsertButton="True"
AutoGenerateRows="False" DataSourceID="AccessDataSource1" Height="50px" Width="200px" DefaultMode="Insert" OnItemInserted="DetailsView1_ItemInserted">
<Fields>
<asp:BoundField DataField="名前" HeaderText="名前" SortExpression="名前" />
<asp:BoundField DataField="年齢" HeaderText="年齢" SortExpression="年齢" />
</Fields>
</asp:DetailsView>
<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/MyDB.mdb"
InsertCommand="INSERT INTO [名簿] ([名前], [年齢]) VALUES (?, ?)"
SelectCommand="SELECT [名前], [年齢] FROM [名簿]">
<InsertParameters>
<asp:Parameter Name="名前" Type="String" />
<asp:Parameter Name="年齢" Type="Int16" />
</InsertParameters>
</asp:AccessDataSource>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="一覧へ戻る" /><br />
<br />
</div>
</form>
</body>
</html>
【GridViewEdit01.aspx】(データ一覧の表示)
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
'データ新規登録のDetailsView画面へ移動
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Response.Redirect("DetailsViewInsert01.aspx")
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>DetailsViewでの新規データ追加</title>
</head>
<body>
<form id="form1" runat="server">
<div>
DetailsViewでの新規データ追加 09/11/23<br />
(データ一覧表示はGridViewで)<br />
<br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="新規登録" /><br />
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" DataKeyNames="ID" DataSourceID="AccessDataSource1"
EmptyDataText="表示するデータ レコードがありません。" PageSize="5">
<Columns>
<asp:TemplateField ShowHeader="False">
<EditItemTemplate>
<asp:Button ID="Button1" runat="server" CausesValidation="True" CommandName="Update"
Text="更新" /> <asp:Button ID="Button2" runat="server" CausesValidation="False"
CommandName="Cancel" Text="キャンセル" />
</EditItemTemplate>
<FooterTemplate>
<asp:Button ID="Button3" runat="server" CommandName="Insert" Text="挿入" />
</FooterTemplate>
<ItemTemplate>
<asp:Button ID="Button1" runat="server" CausesValidation="False" CommandName="Edit"
Text="編集" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True" SortExpression="ID" />
<asp:TemplateField HeaderText="名前" SortExpression="名前">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("名前") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="InsertName" runat="server" Width="80px"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("名前") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="年齢" SortExpression="年齢">
<EditItemTemplate>
<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("年齢") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="InsertAge" runat="server" Width="30px"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("年齢") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True"
SortExpression="ID" />
<asp:BoundField DataField="名前" HeaderText="名前" SortExpression="名前" />
<asp:BoundField DataField="年齢" HeaderText="年齢" SortExpression="年齢" />
<asp:CommandField ButtonType="Button" ShowEditButton="True" />
</Columns>
</asp:GridView>
<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="App_Data\Access01.mdb"
DeleteCommand="DELETE FROM `名簿` WHERE `ID` = ?"
InsertCommand="INSERT INTO `名簿` (`名前`, `年齢`) VALUES (?, ?)"
SelectCommand="SELECT `ID`, `名前`, `年齢` FROM `名簿`"
UpdateCommand="UPDATE `名簿` SET `名前` = ?, `年齢` = ? WHERE `ID` = ?">
<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="App_Data\MyDB.mdb"
DeleteCommand="DELETE FROM [名簿] WHERE [ID] = ?"
InsertCommand="INSERT INTO [名簿] ([ID], [名前], [年齢]) VALUES (?, ?, ?)"
SelectCommand="SELECT [ID], [名前], [年齢] FROM [名簿] ORDER BY [ID] DESC"
UpdateCommand="UPDATE [名簿] SET [名前] = ?, [年齢] = ? WHERE [ID] = ?">
<DeleteParameters>
<asp:Parameter Name="ID" Type="Int32" />
</DeleteParameters>
<InsertParameters>
<asp:Parameter Name="ID" Type="Int32" />
<asp:Parameter Name="名前" Type="String" />
<asp:Parameter Name="年齢" Type="Int16" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="名前" Type="String" />
<asp:Parameter Name="年齢" Type="Int16" />
<asp:Parameter Name="ID" Type="Int32" />
</UpdateParameters>
</asp:AccessDataSource>
<br />
</div>
</div>
</form>
</body>
</html>
【参考にしたページ】
1.GridViewからデータを追加する 06/03/29
http://dotnetfan.org/blogs/dotnetfanblog/articles/632.aspx
なし
【ハマリポイントの紹介】
・DetailsViewの「挿入」LinkButtonを普通のButtonに変える方法がわからなくて苦労した。
(見付けて方法の備忘メモ)
・DetailsViewの「DetailsViewタスク」の「フィールドの編集」の「CommandField」の
「新規、挿入、キャンセル」をダブルクリック。 「CommandFieldプロパティ」の
「ButtonType」を「Link」→「Button」に変更。です。
#ref(DetailsViewButton.JPG);
#comment_nospam
#vote(参考になった[0],ふつう[0],参考にならなかった[0])