使用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

[Visual C#] 在啟動寫入之後無法設定此屬性 WebRequest

今天使用.NET的HttpWebRequest玩API串接，結果出現錯誤訊息：

在啟動寫入之後無法設定此屬性

原因是使用HttpWebRequest物件時，設定ContentLength一定要比寫入RequestStream還要早。


            var data = "data";
            myHttpWebRequest.ContentLength = data.Length;
            using (Stream stream = myHttpWebRequest.GetRequestStream())
            {                        
                stream.Write(Encoding.UTF8.GetBytes(data) , 0, data.Length);            
            }

HTTP request with post

HOW TO:使用 WebRequest 類別，傳送資料