2021-04-28

ASP.NET使用VB - 家庭記帳簿07 - 新增資料

今天要介紹的是如何新增交易資料。我們需要提供下列資料：
日期
類別(收入 or 支出)
科目(伙食交通等等)
帳戶(付現還是刷卡)
金額(多少錢)

現在打開 Visual Studio，開啟 AddRecord.aspx，然後要加入上述五項的對應控制項，三個下拉式選單、二個文字方塊，如下圖步驟：



打開IIS，開啟AddRecord.aspx，預覽網頁，看有沒有錯誤，如下圖：



回到 Visual Studio，先對控制項進行設定。每個控制項都有自己的ID，可在原始檔或屬性視窗作修改，您也可使用預設值。先針對第一個對應日期的文字方塊，我把ID改成 txt_Date，然後進行如下圖動作。




上述目的：點日曆小圖，跳出行事曆，選取日期，文字方塊出現所選取的日期，行事曆消失。若要完成上述動作，需撰寫以下程式碼。請打開 AddRecord.aspx.vb ，然後如下圖。



現在可開啟AddRecord.aspx 網頁，測試是否OK。如下圖


接著設定類別，請回到 Visual Studio，一般交易類別會有收入、支出與轉帳三大類，所以在下拉式選單加入這三項，如下圖步驟：



接著設定科目，會根據類別來篩選選項，這部分我選擇寫程式，比較方便。如下圖：









現在開啟網頁做測試，如下圖。


好，現在萬事俱備，只欠東風，就是如何將交易新增到資料表，如下步驟：



接著到 AddRecord.aspx.vb 後端寫程式，如下圖：


現在開啟網頁，做測試，如下：


成功。發現備註沒新增到。您可以嘗試新增文字方塊，SQL語法稍作修改，如果OK，即表示懂了。又發現日期有上午12:00:00，很礙眼，怎麼移除，在網頁載入資料時修改，如下圖。
請注意，這是修改 Details.aspx 這個檔案。


重新整理網頁。成功

程式碼附於後，有二個版本，SQL Server 與 Access，供參考。
***************************************************************
SQL server

Imports System.Data.SqlClient
Partial Class Daily_AddRecord
Inherits System.Web.UI.Page

Private strSQL As String
Private ReadOnly conn As String = "Data Source=localhost\SQLEXPRESS;Initial Catalog=myDatabase;Integrated Security=True"

Private Sub Daily_AddRecord_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not IsPostBack Then
'網頁載入時，下拉式選單篩選，與新增資料時都需連到資料庫，且都要有SQL指令
'所以先宣告SQL字串和連接資料庫字串在這class，這樣就不需在每個事件中都再宣告一次
Call GetSubjects() '根據類別，篩選科目選項，使用子程式 GetSubjects(名稱自定) ,子程式需先撰寫好
Call GetAccount() '載入帳戶
End If
End Sub

Private Sub GetSubjects() '科目下拉式選單
If Drop_class.Text = "轉帳" Then
strSQL = "Select [科目] FROM [dbo].[Account] WHERE [類別]='資產' or [類別]='負債' "
Else
strSQL = "Select [科目] FROM [dbo].[Account] WHERE [類別]='" & Drop_class.Text & "'"
End If 
Dim MyConnection As SqlConnection
Dim MyCommand As SqlCommand
MyConnection = New SqlConnection(conn)
MyConnection.Open()
MyCommand = New SqlCommand(strSQL, MyConnection)
Dim myDataReader As SqlDataReader = MyCommand.ExecuteReader()
Drop_subject.Items.Clear() ' 下拉式選單清空
While myDataReader.Read()
Drop_subject.Items.Add(myDataReader("科目").ToString()) '載入選項
End While
myDataReader.Close()
MyConnection.Close()
End Sub

Private Sub GetAccount() '帳戶下拉式選單
strSQL = "Select [科目] FROM [dbo].[Account] WHERE [類別]='資產' or [類別]='負債' "
Dim MyConnection As SqlConnection
Dim MyCommand As SqlCommand
MyConnection = New SqlConnection(conn)
MyConnection.Open()
MyCommand = New SqlCommand(strSQL, MyConnection)
Dim myDataReader As SqlDataReader = MyCommand.ExecuteReader()
Drop_account.Items.Clear() ' 下拉式選單清空
While myDataReader.Read()
Drop_account.Items.Add(myDataReader("科目").ToString()) '載入選項
End While
myDataReader.Close()
MyConnection.Close()
End Sub

Private Sub Drop_class_SelectedIndexChanged(sender As Object, e As EventArgs) Handles Drop_class.SelectedIndexChanged
Call GetSubjects() '選取類別選單後，呼叫子程式，載入科目選項
End Sub

Private Sub ImageButton1_Click(sender As Object, e As ImageClickEventArgs) Handles ImageButton1.Click
Calendar1.Visible = True '點小圖時，出現行事曆
End Sub

Private Sub Calendar1_SelectionChanged(sender As Object, e As EventArgs) Handles Calendar1.SelectionChanged
txt_Date.Text = Calendar1.SelectedDate '選取日期，文字方塊出現所選取的日期
Calendar1.Visible = False '隱藏行事曆
End Sub

Private Sub But_Send_Click(sender As Object, e As EventArgs) Handles But_Send.Click
' 按鍵觸發事件
Dim MyConnection As SqlConnection
Dim MyCommand As SqlCommand
MyConnection = New SqlConnection(conn)
MyConnection.Open()

Dim strSQL As String = "INSERT INTO [dbo].[Diary](日期,類別,科目, 帳戶,金額 ) VALUES" +
" ( '" & txt_Date.Text & "','" & Drop_class.Text & "' , '" & Drop_subject.Text & "','" & Drop_account.Text & "','" & txt_money.Text & "')"
' SQL 新增資料語法 INSERT INTO [資料表名稱 ](欄位名稱)
' VALUES(欄位的值)，注意欄位名稱與欄位的值項目數要一致，本例有5個

MyCommand = New SqlCommand(strSQL, MyConnection)
MyCommand.ExecuteReader()
MyConnection.Close()

Response.Redirect("~/Daily/Details.aspx") '新增資料後，轉址到明細，看是否成功。

End Sub
End Class

*****************************************************************************
Access

Imports System.Data.OleDb

Partial Class Daily_AddRecord
Inherits System.Web.UI.Page

Private strSQL As String
Private ReadOnly conn As String = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=|DataDirectory|\myDatabase.accdb"

Private Sub Daily_AddRecord_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not IsPostBack Then
'網頁載入時，下拉式選單篩選，與新增資料時都需連到資料庫，且都要有SQL指令
'所以先宣告SQL字串和連接資料庫字串在這class，這樣就不需在每個事件中都再宣告一次
Call GetSubjects() '根據類別，篩選科目選項，使用子程式 GetSubjects(名稱自定) ,子程式需先撰寫好
Call GetAccount() '載入帳戶
End If
End Sub

Private Sub GetSubjects() '科目下拉式選單
If Drop_class.Text = "轉帳" Then
strSQL = "Select [科目] FROM [Account] WHERE [類別]='資產' or [類別]='負債' "
Else
strSQL = "Select [科目] FROM [Account] WHERE [類別]='" & Drop_class.Text & "'"
End If

Drop_subject.Items.Clear() ' 下拉式選單清空

Using MyConnection As New OleDbConnection(conn)
Try
MyConnection.Open()
Dim MyCommand As OleDbCommand = New OleDbCommand(strSQL, MyConnection)
Dim myDataReader As OleDbDataReader = MyCommand.ExecuteReader
While myDataReader.Read()
Drop_subject.Items.Add(myDataReader("科目").ToString()) '載入選項
End While
myDataReader.Close()
Catch ex As Exception
Response.Write(ex.Message)
End Try
End Using
End Sub

Private Sub GetAccount() '帳戶下拉式選單
strSQL = "Select [科目] FROM [Account] WHERE [類別]='資產' or [類別]='負債' "
Drop_account.Items.Clear() ' 下拉式選單清空
Using MyConnection As New OleDbConnection(conn)
Try
MyConnection.Open()
Dim MyCommand As OleDbCommand = New OleDbCommand(strSQL, MyConnection)
Dim myDataReader As OleDbDataReader = MyCommand.ExecuteReader
While myDataReader.Read()
Drop_account.Items.Add(myDataReader("科目").ToString()) '載入選項
End While
myDataReader.Close()
Catch ex As Exception
Response.Write(ex.Message)
End Try
End Using
End Sub

Private Sub Drop_class_SelectedIndexChanged(sender As Object, e As EventArgs) Handles Drop_class.SelectedIndexChanged
Call GetSubjects() '選取類別選單後，呼叫子程式，載入科目選項
End Sub

Private Sub ImageButton1_Click(sender As Object, e As ImageClickEventArgs) Handles ImageButton1.Click
Calendar1.Visible = True '點小圖時，出現行事曆
End Sub

Private Sub Calendar1_SelectionChanged(sender As Object, e As EventArgs) Handles Calendar1.SelectionChanged
txt_Date.Text = Calendar1.SelectedDate '選取日期，文字方塊出現所選取的日期
Calendar1.Visible = False '隱藏行事曆
End Sub

Private Sub But_Send_Click(sender As Object, e As EventArgs) Handles But_Send.Click
' 按鍵觸發事件
Dim strSQL As String = "INSERT INTO [Diary](日期,類別,科目, 帳戶,金額 ) VALUES" +
" ( '" & txt_Date.Text & "','" & Drop_class.Text & "' , '" & Drop_subject.Text & "','" & Drop_account.Text & "','" & txt_money.Text & "')"
' SQL 新增資料語法 INSERT INTO [資料表名稱 ](欄位名稱)
' VALUES(欄位的值)，注意欄位名稱與欄位的值項目數要一致，本例有5個

Using MyConnection As New OleDbConnection(conn)
Try
MyConnection.Open()
Dim MyCommand As OleDbCommand = New OleDbCommand(strSQL, MyConnection)
MyCommand.ExecuteReader()
Catch ex As Exception
Response.Write(ex.Message)
End Try
End Using
Response.Redirect("~/Daily/Details.aspx") '新增資料後，轉址到明細，看是否成功。
End Sub
End Class
********************************************************************************
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)