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

這是備份，原文請看我的網站：[習題]ASP.NET製作網頁版的[小]計算機

http://www.dotblogs.com.tw/mis2000lab/archive/2008/12/17/web_calculator_asp_net_1217.aspx

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

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

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

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

真的有一點小難度！

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

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

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

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

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

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語法）：

01     Protected Sub Page_Load() 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
09         '-- 寫程式的時候，我會即時把[變數值]列印到銀幕上，觀察程式有無寫錯。
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
15     Protected Sub ButtonCE_Click() 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
21         TextBox1.Text = 0    '-- 畫面歸零
22         Label1.Text = "歸零"
23     End Sub
24
25     Protected Sub ButtonEnd_Click() Sub ButtonEnd_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles ButtonEnd.Click
26         '-- 運算完畢，輸入「=」計算出結果。
27         Label1.Text = "運算完畢 !!"
28
29         ViewState("cal_sum") = CInt(ViewState("cal_sum")) + CInt(ViewState("cal_input"))
30         TextBox1.Text = CInt(ViewState("cal_sum"))
31
32         '--運算完畢，按下「=」符號後，如果要繼續運算的話....
33         ViewState("cal_input") = CInt(ViewState("cal_sum"))
34         ViewState("cal_singal") = "0"
35     End Sub
36
37     Protected Sub Button_x1_Click() 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
42         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
49         TextBox1.Text = ViewState("cal_sum")  '--畫面更新
50
51         ViewState("cal_singal") = "+"
52         ViewState("cal_input") = "0"   '--數字歸零，等待下一次輸入
53     End Sub
54
55
56
57     '== 數 字 ============================================================
58     Protected Sub Button0_Click() 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
63     Protected Sub Button1_Click() 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
68     Protected Sub Button2_Click() 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
73     Protected Sub Button3_Click() Sub Button3_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button3.Click
74         '--以此類推，以下省略！！！
75     End Sub
76
77         '--以此類推，以下省略！！！

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

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

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

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

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

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

• http://www.allenkuo.com/GenericArticle/view505.aspx
• http://www.dotblogs.com.tw/jeff377/archive/2008/05/02/3776.aspx

 完畢（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

.....................................................................................................................................................................................
ASP.NET專題實務（文魁出版 / P8187）

2008/八月份 天瓏書局排行榜前十名

.............................................................................................................. 寄信給我    mis2000lab (at) 雅虎.com.台灣 ........