閲覧総計:3670  (本日:1  昨日:2)

 1件のデータ項目が多い場合の「新規データ追加」は、GridViewの最下列を利用して
入力作業を行うより、DetailsViewの画面を利用し、1件の内容を1ページに大きく表示し、
新規データ入力を行う方が作業効率が高い。

 今回は、DetailsViewの「Insert」画面を利用したMS Access DBへの「新規データ
入力」画面を作成してみた。 09/11/23

【方法】
・新規データ入力用の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

【機能】DetailsViewで1件を1ページで新規データの入力を行う。
データ一覧表示はGridViewで行う。GridViewの「編集」機能も動作する。

【稼働画面】

DetailsViewInsert01.JPG

Accessデータベース名:MyDB.mdb
テーブル名:名簿

フィールド名データ型フィールドサイズ
ID (主キー)オートナンバー型長整数型
名前テキスト型50
年齢数値型整数型

※VWD2005、ASP.NET2.0環境ではAccess2007のDBファイル形式(*.accdb)は利用できな
い模様。DBファイルは「Acces2002-2003形式(*.mdb)」で保存して利用する。

コントロールの設定値

コントロールIDコントロールプロパティコメント
GridView1編集フィールドButtonTypeButtonLinkButtonをButtonに変更


コントロールIDプロパティコメント
DetailsView1DefaultModeInsert新規登録画面を表示

【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">

    '新規データ登録後にデータ一覧ページへ移動する
    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>DetailsViewでの新規データ追加</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        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: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\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>
        </div>
    </form>
</body>
</html>

【参考にしたページ】
  なし

【ハマリポイントの紹介】
・DetailsViewの「挿入」LinkButtonを普通のButtonに変える方法がわからなくて苦労した。

(見付けて方法の備忘メモ)
・DetailsViewの「DetailsViewタスク」の「フィールドの編集」の「CommandField」の
「新規、挿入、キャンセル」をダブルクリック。 「CommandFieldプロパティ」の
「ButtonType」を「Link」→「Button」に変更。です。

DetailsViewButton.JPG

選択肢 投票
参考になった 6  
ふつう 1  
参考にならなかった 0  

添付ファイル: fileDetailsViewButton.JPG 546件 [詳細] fileDetailsViewInsert01.JPG 519件 [詳細]

トップ   編集 凍結解除 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2020-12-08 (火) 13:21:01 (83d)