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

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

2008-11-11

[習題]泡沫紅茶店 飲料訂購[小]系統 #2 --HTML畫面&程式篇 （使用DB的一種購物車）

這個簡單的飲料訂購系統，HTML畫面的設計，卻有點小複雜。
我只能說：這範例是給本書讀者的售後服務。

這些小技巧，我在書裡面都有提過，也提供章節讓您回頭參考。



有了上一篇文章的經驗，我們直接寫程式吧。

這個簡單的飲料訂購系統，HTML畫面的設計，卻有點小複雜。
我只能說：這範例是給本書讀者的售後服務。

這些小技巧，我在書裡面都有提過，也提供章節讓您回頭參考。

 

本範例的完整說明，已經出版於「ASP.NET 專題實務」下集。

書本的說明，圖文並茂，更為詳盡！

 

 

首先，先設計ASP.NET的HTML畫面（我昨晚回家時稍微想了一下，畫面有些更動）

 

HTML畫面分成三層，對初學者可能有點複雜：

--------------------------------------------------------------------------------------------------------------------------------

 

最上面的第一層，主要是輸入客戶的個人資料，對應[drink_order_m]資料表。

SqlDataSource_Order_M，幫我們寫好了 Insert的SQL指令，這段的作法請看我以前發表過的文章，ADO.NET #4（改），自己設定輸入畫面，讓SqlDataSource幫我們完成「新增」一筆資料

 

操作畫面如下：

輸入完成後，會把「開始訂購」這個按鈕隱藏（Button1.Visible = false），避免重複輸入。

然後撈出這筆訂單的「id編號」，以 Label1_order_id呈現在畫面上。

您可以使用 ViewState或是 Session來記錄這個 「訂單的id編號」，因為下面會重複用到。

ViewState與Session，都是屬於「狀態管理」。請看本書第十六章，這也是本書特色，別的書可能覺得太基本了，都不提這一部份。

第一層的HTML碼如下：

01 客戶名稱：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
02         <br />
03         客戶電話：<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
04         <br />
05         備&nbsp;&nbsp;&nbsp; 註：<asp:TextBox ID="TextBox3" runat="server" Height="50px"  
06             Width="250px"></asp:TextBox>
07 &nbsp;
08 <asp:Button ID="Button1_Order" runat="server" Text="==開始訂購==" onclick="Button1_Order_Click" />
09         &nbsp;<asp:Label ID="Label1_order_id" runat="server" ForeColor="Red"></asp:Label>
10         <br />
11         <asp:SqlDataSource ID="SqlDataSource_Order_M" runat="server"  
12             ConnectionString="<%$ ConnectionStrings:testConnectionString %>"  
13             InsertCommand="INSERT INTO [drink_order_m] ([order_time], [user_name], [user_phone], [memo]) VALUES (getdate(), @user_name, @user_phone, @memo)" >
14             <InsertParameters>
15                 <asp:ControlParameter ControlID="TextBox1" Name="user_name" PropertyName="Text" Type="String" />
16                 <asp:ControlParameter ControlID="TextBox2" Name="user_phone" PropertyName="Text" Type="String" />
17                 <asp:ControlParameter ControlID="TextBox3" Name="memo" PropertyName="Text" Type="String" />
18             </InsertParameters>
19         </asp:SqlDataSource>

 

--------------------------------------------------------------------------------------------------------------------------------

中間的第二層，也是本範例最複雜的部份。

主要是輸入「訂購的飲料（產品）種類」，對應[drink_product]與[drink_order_d]資料表。

 

第二層＃1

我們用 DropDownList1 + SqlDataSource_Drink，自動撈出[drink_product]資料表的內容。

並且設定 DropDownList1 為「AutoPostBack」，當我們一挑選飲料， Lable2就會自動出現「飲料的名稱」。

這是整支程式最基本、最簡單的部份，請看本書 3.7節。

操作畫面如下：

 

01 <b><span class="style2">飲料：
02     <asp:DropDownList ID="DropDownList1" runat="server"  
03         DataSourceID="SqlDataSource_Drink" DataTextField="drink_name"  
04         DataValueField="id"  
05         onselectedindexchanged="DropDownList1_SelectedIndexChanged"  
06         AutoPostBack="True">
07     </asp:DropDownList>  
08  
09     <asp:SqlDataSource ID="SqlDataSource_Drink" runat="server"  
10         ConnectionString="<%$ ConnectionStrings:testConnectionString %>"  
11         SelectCommand="SELECT [drink_name], [id], [drink_price] FROM [drink_product]">
12     </asp:SqlDataSource>    

 

 

第二層＃2

每次訂購一種飲料，就會立即寫入 [drink_order_d]資料表裡面。操作畫面如下：

這裡要解釋的，是圖片中紅色框框的部份。

為了讓初學者好入門，我盡量不寫程式，交給 SqlDataSource自動產生 Insert的SQL指令。

這部份的操作，請看我以前發表過的文章，ADO.NET #4（改），自己設定輸入畫面，讓SqlDataSource幫我們完成「新增」一筆資料 （相同作法，本範例用了兩次了）

01 <asp:Label ID="Label2_drink_name" runat="server" ForeColor="Blue"></asp:Label>
02 &nbsp;&nbsp; / &nbsp; &nbsp;
03  
04     <asp:TextBox ID="TextBox4_no" runat="server" Width="50px"></asp:TextBox>
05     杯&nbsp;&nbsp;&nbsp;
06      
07     <asp:DropDownList ID="DropDownList2_ice" runat="server">
08         <asp:ListItem Value="去冰" Selected>去冰</asp:ListItem>
09         <asp:ListItem Value="少冰">少冰</asp:ListItem>
10     </asp:DropDownList>
11 &nbsp;&nbsp;&nbsp;
12     <asp:DropDownList ID="DropDownList3_sweet" runat="server">
13         <asp:ListItem Value="無糖" Selected>無糖</asp:ListItem>
14         <asp:ListItem Value="少糖">少糖</asp:ListItem>
15         <asp:ListItem Value="全糖">全糖</asp:ListItem>
16     </asp:DropDownList>
17 &nbsp;&nbsp;&nbsp;
18     <asp:Button ID="Button2_Drink" runat="server" Text="訂購的飲料種類"  
19         onclick="Button2_Drink_Click" />
20      
21     </span></b><br />&nbsp;&nbsp;&nbsp;</span>
22      
23  
24      
25     <asp:SqlDataSource ID="SqlDataSource_Order_D" runat="server"  
26         ConnectionString="<%$ ConnectionStrings:testConnectionString %>"          
27         InsertCommand="INSERT INTO [drink_order_d] ([order_id] ,[drink_id], [drink_name], [ice_degree], [sweet_degree], [drink_no]) VALUES (@order_id, @drink_id, @drink_name, @ice_degree, @sweet_degree, @drink_no)" >
28         <InsertParameters>
29             <asp:SessionParameter Name="order_id" SessionField="order_m_id" />
30             <asp:ControlParameter ControlID="DropDownList1" Name="drink_id"  
31                 PropertyName="SelectedValue" />
32             <asp:ControlParameter ControlID="Label2_drink_name" Name="drink_name"  
33                 PropertyName="Text" Type="String" />
34             <asp:ControlParameter ControlID="DropDownList2_ice" Name="ice_degree"  
35                 PropertyName="SelectedValue" Type="String" />
36             <asp:ControlParameter ControlID="DropDownList3_sweet" Name="sweet_degree" PropertyName="SelectedValue"  
37                 Type="String" />
38             <asp:ControlParameter ControlID="TextBox4_no" Name="drink_no" PropertyName="Text"  
39                 Type="Int32" />
40         </InsertParameters>

 

--------------------------------------------------------------------------------------------------------------------------------

最下方的第三層，最簡單！只是利用 GridView的現成功能。

如上圖，當我們訂購一種飲料。  GridView就會立即出現目前訂購的飲料清單

我們將要解釋下圖「紅色框框」的部份

 

這很簡單啊，當他按下「訂購」按鈕之後，除了把資料寫入，並且讓GridView重新撈資料出來（重新資料繫結，重新DataBinding）如此而已。

本書有五大章（約250頁）都在介紹 GridView各種作法，而這是最簡單的一種。

 

 

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

想不到這個範例，不好說明啊。     

 

完整的程式，請自行下載參閱。Drink_order.rar (C#)

VB版本的範例，請參閱本書「下集」。

    2010/11/10補充：這是網友 Bruce熱情提供的VB版範例，MIS2000.rar (VB)

 

本範例不提供任何保固與回答，僅供參考。

 

 

2011/8/18補充：  [補充]下集，第十四章。Master-Detail（主表明細），確認可以出貨的SQL指令 -- Not Exists

 

 

如果您是初學者，卻看不懂上面的範例。

    第一，您的基礎不穩，很多基本動作都不熟練。

    第二，我在BLOG上面無法解釋太詳細，這是我的錯。

              BLOG上面放太多圖片，文章排版很容易亂掉。很麻煩、速度也會很慢。

 

永遠不要認為自己看不懂，就是「笨」、就是「沒有寫程式的天分」

別放棄自己！

遇見好的指引、好書的帶領，您也有機會立即開竅！

 

 

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

猶如一人以我的燭火點燭，光亮與他同在，我卻不因此身處黑暗。----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.主講   事先錄好的影片，並非上課側錄！   觀看時，有如「一對一」面對面講課。

 

 

 

贊助商連結

BloggerAds