[習題]ASP.NET製作網頁版的[小]計算機 #1 -- 使用 ViewState or Session

2008-12-17

雖然這不是一個好範例 (因為這題目有點悶，不實用、不有趣)，

但對於初學者來說，是可以學到東西的小範例。

尤其是「變數」在不斷的運算中，必須不斷修改數值。

對於初學者來說，有認真思考過，會學到一些東西喔！

我在 Yahoo知識＋上面（ASP版）看到一個問題，

對方想作一個網頁版的計算機。

我看了以後，第一個反映是嗤之以鼻（這問題也好意思拿出來問）

但今天早上我搭車上班時，想了一下，我發現在 ASP.NET上面要做出計算機的功能，

真的有一點小難度！

因為網頁程式是一種「無狀態（Stateless）」的程式設計，

對於習慣傳統Windows程式的人來說，很難接受的！

或許這習題在VB上面撰寫 Windows Form並不難，但在網頁上撰寫，就會出現不同的狀況了。

.................................................................................................................................................................................

建議您先看過這一篇([習題]三個數字相加....（使用TextBox，很基礎的題目） )，難度比較低。

再來觀看下面文章。

.................................................................................................................................................................................

這個小範例，我只完成一小部份（＋、＝的按鈕是可用的，其他的應該會自己寫了，就改一下而已。）

這個範例對初學者來說，有幾個小重點：

1. 可以讓學生練習「按下 Button按鈕，便會啟動 Button_Click()事件」

2. 初學者最容易遇見的程式問題，就是變數的值，在這範例中將會不斷變化。

因為VB語法的「等於」與「給予變數一個值」，都用了相同的「=」符號。

C#與比較嚴謹，「== (等於)」與「= (給予變數一個值)」是不同的意思。

    學慣了N年數學的程式初學者，第一次遇見（VB語法）程式裡面的「＝」去修改 / 更換變數值，是很難適應的。要花一點時間。    例如：
    Dim A as Integer = 0   '--A的初始值是 0
          A = 888        '--又把A的值改成888了！
          A = A + 222

最後的答案，A是多少？
初學者第一次寫程式，真的很難適應這一段變化。（或許是我不聰明，我當初很不適應這件事）

    後來我把它 "翻譯" 如下，才過了這一關。
    A <= 888    （註：把888 塞到A變數裡面）
    A <= A + 222 （註：把A變數加上222的「成果」，塞到A變數裡面）

3. 但要記錄下運算的過程，我用了狀態管理中的 ViewState（用Session也行啦）。

方法很多，說不定您作得更好。

=======================================================

HTML設計畫面用了很多按鈕，剛好是一個很好的練習。

除了按鈕之外，我也用了 TextBox 與 Label，都是最基礎的東西。

先說好，我偷懶，只完成上面「有顏色」的按鈕功能

其他的請自己改。

後置程式碼如下（VB語法）：

2012/5/7修改後的程式：

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            '--第一次執行程式
            ViewState("cal_input") = ""      '-- 使用者輸入的數字
            ViewState("cal_singal") = "0"   '-- 有無按下運算符號（+ / - / * / %）
            ViewState("cal_sum") = 0       '-- 運算後的結果
        End If

        '-- 寫程式的時候，我會即時把[變數值]列印到銀幕上，觀察程式有無寫錯。
        'Response.Write(ViewState("cal_input").ToString() & "
")
        'Response.Write(ViewState("cal_singal").ToString() & "
")
        'Response.Write(ViewState("cal_sum").ToString() & "
")
    End Sub


    Protected Sub ButtonCE_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles ButtonCE.Click
        ViewState("cal_input") = ""
        ViewState("cal_singal") = "0"
        ViewState("cal_sum") = 0
        '-- 按下 [CE清除]按鍵，數字歸零

        TextBox1.Text = "0"    '-- 畫面歸零"
        Label1.Text = "歸零"
    End Sub


    Protected Sub ButtonEnd_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles ButtonEnd.Click
        '-- 運算完畢，輸入「=」計算出結果。
        Label1.Text = "運算完畢 !!"

        If ViewState("cal_singal").ToString() <> "+" Then
            ViewState("cal_sum") = Convert.ToInt32(ViewState("cal_sum")) + Convert.ToInt32(ViewState("cal_input"))
            TextBox1.Text = ViewState("cal_sum").ToString()
        End If

        '--運算完畢，按下「=」符號後，如果要繼續運算的話....
        ViewState("cal_input") = Convert.ToInt32(ViewState("cal_sum"))
        ViewState("cal_singal") = "0"
    End Sub


    Protected Sub Button_x1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button_x1.Click
        '--加法--
        Label1.Text = "加法（＋）運算"
        TextBox1.Text = ViewState("cal_input").ToString()

        If ViewState("cal_singal").ToString() = "0" Then
            '-- 第一次按下「+ 加法」按鈕
            ViewState("cal_sum") = Convert.ToInt32(ViewState("cal_input"))
        Else
            ViewState("cal_sum") = Convert.ToInt32(ViewState("cal_sum")) + Convert.ToInt32(ViewState("cal_input"))
        End If

        TextBox1.Text = ViewState("cal_sum").ToString()  '--畫面更新

        ViewState("cal_singal") = "+"  '-- 「非」第一次按下「+ 加法」按鈕
        ViewState("cal_input") = ""      '--數字歸零，等待下一次輸入
    End Sub




    '== 數 字 ============================================================
    '== 以下程式的重複性太高，可以濃縮在一起。請看下一個範例 Web_Calculator_sender.aspx。

    Protected Sub Button0_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button0.Click
        ViewState("cal_input") = ViewState("cal_input").ToString() & "0"
        TextBox1.Text = ViewState("cal_input").ToString()
    End Sub

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        ViewState("cal_input") = ViewState("cal_input").ToString() & "1"
        TextBox1.Text = ViewState("cal_input").ToString()
    End Sub

    Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click
        ViewState("cal_input") = ViewState("cal_input").ToString() & "2"
        TextBox1.Text = ViewState("cal_input").ToString()
    End Sub

作者註解：以下重複且累贅，便省略。下一篇文章會針對此處修正！

舊版程式 (2008/12/17)，僅供比對。不建議學習。

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
02

If Not Page.IsPostBack Then
03

'--第一次執行程式
04

ViewState("cal_input") = "" '-- 使用者輸入的數字
05

ViewState("cal_singal") = "0" '-- 有無按下運算符號（+ / - / * / %）
06

ViewState("cal_sum") = 0 '-- 運算後的結果
07

End If
08

'-- 寫程式的時候，我會即時把[變數值]列印到銀幕上，觀察程式有無寫錯。
10

'Response.Write(ViewState("cal_input").ToString() & "<br>")
11

'Response.Write(ViewState("cal_singal").ToString() & "<br>")
12

'Response.Write(ViewState("cal_sum").ToString() & "<br>")
13

End Sub
14

Protected Sub ButtonCE_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles ButtonCE.Click
16

ViewState("cal_input") = ""
17

ViewState("cal_singal") = "0"
18

ViewState("cal_sum") = 0
19

'-- 按下 [CE清除]按鍵，數字歸零
20

TextBox1.Text = 0 '-- 畫面歸零
22

Label1.Text = "歸零"
23

End Sub
24

Protected Sub ButtonEnd_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles ButtonEnd.Click
26

'-- 運算完畢，輸入「=」計算出結果。
27

Label1.Text = "運算完畢 !!"
28

ViewState("cal_sum") = CInt(ViewState("cal_sum")) + CInt(ViewState("cal_input"))
30

TextBox1.Text = CInt(ViewState("cal_sum"))
31

'--運算完畢，按下「=」符號後，如果要繼續運算的話....
33

ViewState("cal_input") = CInt(ViewState("cal_sum"))
34

ViewState("cal_singal") = "0"
35

End Sub
36

Protected Sub Button_x1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button_x1.Click
38

'--加法--
39

Label1.Text = "加法（＋）運算"
40

TextBox1.Text = CInt(ViewState("cal_input"))
41

If ViewState("cal_singal") = "0" Then
43

'-- 第一次按下「+ 加法」按鈕
44

ViewState("cal_sum") = CInt(ViewState("cal_input"))
45

Else
46

ViewState("cal_sum") = CInt(ViewState("cal_sum")) + CInt(ViewState("cal_input"))
47

End If
48

TextBox1.Text = ViewState("cal_sum") '--畫面更新
50

ViewState("cal_singal") = "+"
52

ViewState("cal_input") = "0" '--數字歸零，等待下一次輸入
53

End Sub
54

'== 數字 ============================================================
58

Protected Sub Button0_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button0.Click
59

ViewState("cal_input") = ViewState("cal_input").ToString() & "0"
60

TextBox1.Text = CInt(ViewState("cal_input"))
61

End Sub
62

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
64

ViewState("cal_input") = ViewState("cal_input").ToString() & "1"
65

TextBox1.Text = CInt(ViewState("cal_input"))
66

End Sub
67

Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click
69

ViewState("cal_input") = ViewState("cal_input").ToString() & "2"
70

TextBox1.Text = CInt(ViewState("cal_input"))
71

End Sub
72

Protected Sub Button3_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button3.Click
74

'--以此類推，以下省略！！！
75

End Sub
76

'--以此類推，以下省略！！！

雖然這不是一個好範例 (因為這題目有點悶，不實用、不有趣、不會主動吸引人去作)，

但對於初學者來說，是可以學到東西的小範例。

尤其是「變數」在不斷的運算中，必須不斷修改數值。

對於初學者來說，有認真思考過，會學到一些東西喔！

2008/12/22補充：上面的程式，因為使用了 ViewState（或Session），加上變數之間不斷傳遞數值，

所以非常紊亂。我們可以參考這兩篇文章加以改進：

2012/ 5/ 7補充：上面的程式，後續的數字按鈕，程式過份重費且累贅，改寫如下：

請看下一篇文章：[習題]ASP.NET製作網頁版的[小]計算機 #2 -- 事件裡面的參數 sender

http://www.dotblogs.com.tw/mis2000lab/archive/2012/05/07/web_calculator_asp_net_sender.aspx

想要計算超長位數，請參閱這篇文章：http://tw.myblog.yahoo.com/shege-1975/article?mid=1456&next=1259&l=f&fid=8

完畢（The End）

----------- 分隔線（下面有美女圖）-----------------------------------------------------------------------------------------------------------------------------

今日值班正妹，柚木 Rio。很可愛喔！是愛情動作片的女優..........

圖片：http://images.google.com/images?hl=zh-TW&rls=com.microsoft:zh-TW:IE-SearchBox&rlz=1I7GGIH_zh-TW&q=%E6%9F%9A%E6%9C%A8%20Rio&lr=&um=1&ie=UTF-8&sa=N&tab=wi

（謎之聲：為什麼講完範例以後，很不搭嘎地出現AV女優的圖片啊？這不會破壞形象嗎？）

嗯......我只能說，你願意看柚木Rio的圖呢？還是底下這張「撕髮佈公」的圖？

我個人是對於「高雄馬英九」的撕髮不公，沒啥興趣啦。

關於號稱「高雄的馬英九」資料來源如下---- http://www.wretch.cc/blog/corndesu/17842180

這篇文章很難找了，你一定要看啊... http://rebirth.pixnet.net/blog/post/1735973

圖片來源：http://images.plurk.com/1856775_5b7fa44bce5e857a456849099e7e8f1e.jpg

我將思想傳授他人，他人之所得，亦無損於我之所有；

猶如一人以我的燭火點燭，光亮與他同在，我卻不因此身處黑暗。----Thomas Jefferson

線上課程教學，遠距教學 (Web Form 約 51hr) https://dotblogs.com.tw/mis2000lab/2016/02/01/aspnet_online_learning_distance_education_VS2015

線上課程教學，遠距教學 (ASP.NET MVC 約 135hr) https://dotblogs.com.tw/mis2000lab/2018/08/14/ASPnet_MVC_Online_Learning_MIS2000Lab

寫信給我，不要私訊 -- mis2000lab (at) yahoo.com.tw 或 school (at) mis2000lab.net

(1) 第一天 ASP.NET MVC5 完整影片（5.5小時 / .NET 4.x版）免費試聽。影片 https://youtu.be/9spaHik87-A

(2) 第一天 ASP.NET Core MVC 完整影片（3小時 / .NET Core 6.0~8.0）免費試聽。影片 https://youtu.be/TSmwpT-Bx4I

[學員感言] mis2000lab課程評價 - ASP.NET MVC , WebForm 。 https://mis2000lab.medium.com/%E5%AD%B8%E5%93%A1%E6%84%9F%E8%A8%80-mis2000lab%E8%AA%B2%E7%A8%8B%E8%A9%95%E5%83%B9-asp-net-mvc-webform-77903ce9680b

ASP.NET遠距教學、線上課程（Web Form + MVC）。第一天課程， "完整" 試聽。

......... facebook社團 https://www.facebook.com/mis2000lab ......................

......... YouTube (ASP.NET) 線上教學影片 https://www.youtube.com/channel/UC6IPPf6tvsNG8zX3u1LddvA/

Blog文章 "附的範例" 無法下載，請看 https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download

請看我們的「售後服務」範圍（嚴格認定）。

......................................................................................................................................................

ASP.NET MVC => .NET Core MVC 線上教學 ...... 第一天課程完整內容 "免費"讓您評估 / 試聽

[遠距教學、教學影片] ASP.NET (Web Form) 課程上線了！MIS2000Lab.主講事先錄好的影片，並非上課側錄！觀看時，有如「一對一」面對面講課。

回首頁

ASP.NET專題實務 WebForm + MVC線上教學影片 -- MIS2000Lab.

MIS2000 Lab.已推出20餘本電腦書，曾任資策會專任講師與微軟MVP。自.NET 1.x起，已出版15本ASP.NET (Web Form)書籍，也有遠距教學線上教程教學影片