使用ASP.NET MVC 實作購物網站 (四) - 路由簡介(Route) 與 控制器(Controller)

路由規則

如果我們只需要簡單的靜態網頁，那只要理解到Action網址對應就行了。但購物網站一定有基本的增刪查改功能，所以在每個頁面是需要多傳送一些資訊(或者說變數)。例如:

http://localhost/Home/Index [不須傳送變數]
http://localhost/Home/Index/1 [傳送單變數]
http://localhost/Home/Index/?id=1&page=3 [傳送多變數]

不須變數
不須變化的靜態網頁，例如網站關於我介紹。

單變數
單純的CRUD(Create、Read、Update、Delete)操作，基本上只需要index就已足夠

多變數
比較複雜的操作，例如搜尋分頁功能時，需要同時傳送 第幾頁 與 搜尋條件 ，如此就需要同時傳送多個變數至Action


Route範例說明
首先新增一個Controller叫做 RouteTest，步驟如下：

1. 在Controller資料夾按下滑鼠右鍵->加入->控制器

2. 輸入[RouteTestController]後按下[加入]

3. 選擇[MVC 5 控制器 - 空白]後按下[新增]

4. 輸入以下程式碼(文末有原始碼下載)

開始測試
運行專案，輸入以下Url (注意您的port可能會與圖片不盡相同)：

1. 不輸入任何參數
http://localhost:51352/RouteTest/Index

Action沒有接收到任何參數


2. 在Url最後位置加上168

Action接收到名為id的參數，值為168


3. 在Url最後加上id=168

得出與2.相同的結果

4. 在Url最後加上id=168&page=911

Action接收到id及page

結論
由此可知在ASP.NET MVC中，若參數不加上名稱預設是id，如果我們想要傳送多個參數，則可以使用具名的方式來傳遞(id;page等)。其中需注意的是傳遞的參數名稱必須要與Action所宣告的參數名稱匹配。

路由在ASP.NET MVC是最基礎的，更進階的Route設定方式可以參考這裡
Attribute Routing in ASP.NET MVC 5

今天的原始碼請參考這裡

使用ASP.NET MVC 實作購物網站 (三) - MVC概念

今天介紹MVC的概念，

MVC是模型(Model) 檢視(View) 控制器(Controller) 的縮寫，概念是把整個完整的程式邏輯區分為三塊：

• 控制器(Controller) ：負責處理及轉發要求(Request)，可以視情況呼叫Model拿資料，也視情況呼叫View來回應，而控制器中會包含多個動作(Action)。
• 模型(Model) ：專門處理資料的相關邏輯。
• 檢視(View) ：專門展示處理結果給使用者，提供UI。

以ASP MVC舉例，一個正常的Http Request會完成以下動作：

1. 某個Web使用者點選了網頁連結為[http://localhost.test.com/Home/Index]
2. 路由(route)決定交付名稱為Home的控制器中的Index動作(Action)來進行
3. Index動作先跟Model拿了資料
4. Index動作將取得的資料交給View
5. View根據資料來顯示畫面給Web使用者觀看

如此完成了一個要求。


而在ASP.NET MVC 的方案目錄結構如下圖(各位可以開啟你的專案來對照囉)：

App_Data - 預設ASP.NET User的本機資料庫檔案
AppStart - 網站起始設定
Content - 存放css檔案 (*.css)
Controller - 所有控制器的原始碼(*.cs)
fonts- 字型
Models - 與模型相關的原始碼
Scripts - 存放JavaScript檔案(*.js)
View - 所有檢視的原始碼，依據不同的Controller名稱會有對應名稱的目錄

以上讀者可能會覺得無聊，這是概念性的內容，當初我也是花了一段時間才全盤了解MVC架構的，所以暫時看不懂也沒關係，不會影響接下來的操作。

開始動手吧~

在ASP.NET MVC中，路由可視為處理Url進入點，所有進入點都是URL，也就是像[http://localhost/Home/Index]這種東東，我們現在打開HomeController.cs吧：

我們新增一個名為Index2的Action，內容如下：

運行結果：

第一個修改已經完成了，又往前一步囉，有沒有發現其實在ASP.NET MVC的框架下寫出Web應用程式其實很簡單呢？我們會慢慢熟悉MVC架構的，明天將針對路由作更詳細的介紹。

使用ASP.NET MVC 實作購物網站 (二) - 第一個Web應用程式

開啟Visual Studio後，依序選擇 [新增專案→Visaul C#→ASP.NET Web 應用程式→輸入名稱Carts→點選確定]：

選擇範本[MVC]後點選確定，可以看到Visual Studio開發環境：

開發環境大致常用為下列三個功能區塊：

• 工具列：一些常用的功能，例如開啟專案、偵錯、建置等。
• 原始碼：這裡可以看到我們每個專案的原始碼。
• 方案總管：整個方案的目錄結構，例如Controller、View、Models等目錄。

點選工具列上的[偵錯->開始偵錯]可以看到Web網站被運行起來的畫面：

我們的第一個Web應用程式完成囉，現在來動點小修改吧，開啟方案總管的[Views→Shared→_Layout.cshtml]：

將 應用程式名稱 改為 IT鐵人購物網站 後重新運行，將會看到網站標題改變囉：

是不是很簡單呢，明天我們繼續~

※要注意的一點是偵錯中是無法修改Web應用程式的內容的，必須要停止偵錯才能修改原始碼。
※今天的專案原始碼可在這裡下載

使用ASP.NET MVC 實作購物網站 (一)

下載Visual Studio 2013 Express版本 [http://www.asp.net/vwd]
下載 SQL Server 2014 Express with Management tools[http://msdn.microsoft.com/zh-tw/evalcenter/dn434042.aspx]
[http://www.microsoft.com/zh-tw/download/details.aspx?id=42299]


預計三十天分享如何從無到有使用ASP MVC建構一個入門的基礎購物網站，我希望自己每天以花一小時內的時間來撰寫，也可以盡量讓文章閱讀者可以輕鬆上手，增加學習的成就感。

「工欲善其事，必先利其器」，我們第一步驟是下載並安裝下列兩樣東西：
1. Visual Studio 2013 Express for Web 版本 [http://www.asp.net/vwd]
2. SQL Server 2014 Express with Management tools [http://www.microsoft.com/zh-tw/download/details.aspx?id=42299]
-基本上都是下一步安裝法，伺服器組態選擇混合模式記下sa密碼(建議sa123)，以後會較有彈性。如果只在同一台機器上開發測試，使用Window驗證模式也是可以的。

SQL Server 執行
SQL Server Express 成功安裝後，開啟[開始->Microsoft SQL Server 2014->SQL Server 2014 Management Studio]可以看到以下畫面:

使用Windows驗證登入後，可以任意選取系統資料表，如果成功SELECT則恭喜可以正常使用SQL Server了：

Visual Studio 2013 Express 安裝成功並執行[開始->VS Express 2013 for Web]，選擇不要連接賬戶＆不要登入Azure可以看到以下畫面

點選[新增專案]:

恭喜可以準備開發Web囉

Mac 常用快速鍵

Option + Command + Esc = 關閉程序
Shift + Command + 3 = Snap
Shift + Command + 4 = Snap Area


- Finder
Command + Shift + A =  Application
Command + Shift + U = Utility
Command + Shift + G = Go


-Sublime
Command + Shift + P = Package
Ctrl + ~ = command line


thanks to Gary, Alan

[JavaScript] JavaScript考題

請問以下代碼運行結果為何?

function foo(){
foo.abc = function(){alert('def')}
this.abc = function(){alert('xyz')}
abc = function(){alert('@@@@@')};
var abc = function(){alert('$$$$$$')}
}
foo.prototype.abc = function(){alert('456');}
foo.abc = function(){alert('123');}
var f = new foo();
f.abc();
foo.abc();
abc();


 輸出為:
alert('xyz')
alert('def')


解釋:
var f = new foo();　
//新建了一個foo對象，注意這時個上下文環境到了foo()中

f.abc();
//查找這個對象的abc()方法，輸出xyz，注意如果找不到就會去f.prototype裡找，到那時才會輸出456

foo.abc();
//在foo()中找到abc()方法，輸出def, 如果找不到會跳出foo() 到外面找到abc，輸出123

abc();
//在window中找到abc()方法，ie拋錯


 [Reference]
  http://jsfiddle.net/eMHY3/
  http://www.iteye.com/topic/268801

----------------------------------------------------
var b = function(b){ alert(b); }( function(){ alert(2); return '3'; }() );

結果為 ->2 ->3

[Visual C#] 如何透過SMTP伺服器寄送郵件

public static bool Send(string To, string Subject, string Message, string From = "")

{

                using (System.Net.Mail.MailMessage message = new System.Net.Mail.MailMessage())

                {

                    if (String.IsNullOrEmpty(From))

                    {

                        message.From = new System.Net.Mail.MailAddress(Models.GlobalSettings.ServiceMail, Models.GlobalSettings.ServiceName);

                    }

                    else

                    {

                        message.From = new System.Net.Mail.MailAddress(From, From);

                    }

                    message.To.Add(To);

                    message.Subject = Subject;                  

                    message.Body = Message;

                    message.IsBodyHtml = true;

                    message.Priority = System.Net.Mail.MailPriority.Normal;



                    using (System.Net.Mail.SmtpClient mySmtp = new System.Net.Mail.SmtpClient(""mail.abc.com""))

                    {

                        System.Net.CredentialCache mycache = new System.Net.CredentialCache();

                        System.Net.NetworkCredential netcare = new System.Net.NetworkCredential(GlobalSettings.SMTPAuthUsername, GlobalSettings.SMTPAuthPassword,"mail.abc.com"); //設定帳號 密碼 與SMTP主機位置



                        mySmtp.Port = 25;

                        mySmtp.UseDefaultCredentials = false;

                        mySmtp.DeliveryMethod = System.Net.Mail.SmtpDeliveryMethod.Network;

                        mySmtp.Credentials = netcare;

                        mySmtp.EnableSsl = false;

                        mySmtp.Send(message);

                        return true;

                    }

                }

   }

Reference :

http://www.codeproject.com/Tips/301836/Simple-SMTP-E-Mail-Sender-in-Csharp-Console-applic