1

Lab: AJAX/ASP.NET MVC Message Board

with Facebook Authentication on Windows

Azure

課程：智慧終端裝置與雲端計算

助教：郭羿呈

實驗目的

使用 Visual Studio 2010、Windows Azure SDK for .NET、jQuery及 Facebook API

開發 “AJAX/ASP.NET MVC Message Board with Facebook Authentication on

Windows Azure”。

您將了解：

如何建置Windows Azure 開發環境

如何使用 Visual Studio 進行 ASP.NET MVC 3 開發

如何使用 jQuery API進行基於 Json的 AJAX開發

如何使用 Facebook Graph API 進行 OAuth 2.0的身分認證與授權

如何使用 SQL Azure 資料庫將資料儲存在雲端中

如何將您的應用程式部署至 Windows Azure

2

List

一、 設定開發環境................................................................................................ 3

二、 建立 ASP.NET MVC 3 應用程式 .............................................................. 5

三、 加入 SQL 資料庫支援 ................................................................................ 9

四、 建構MVC ................................................................................................... 12

五、 準備好您的應用程式以部署至本地伺服器 (IIS 7) ................................. 16

六、 將應用程式部署至 WINDOWS AZURE ................................................. 21

七、 設定 SQL AZURE ...................................................................................... 28

八、 在雲端執行您的應用程式.......................................................................... 32

九、 實作 Facebook Authentication .................................................................... 36

十、 Homework.................................................................................................... 39

十一、 Reference ..................................................................................................... 40

3

本次的實驗將引導您逐步建立 AJAX/ASP.NET Message Board with Facebook

Authentication，使其於 Windows Azure 中執行，並將其資料儲存在 SQL Azure

中，此應用程式裝載在 Web 角色執行個體中，當 Web 角色執行個體在雲端中

執行時，其本身會裝載在專用虛擬機器 (VM) 中。

一、 設定開發環境

您需要取得相關工具並設定開發環境，才可以開始開發 Windows Azure 應用程

式。

1. 若要安裝 Windows Azure SDK for .NET，請利用下面的網址下載：

https://www.windowsazure.com/en-us/develop/downloads

當出現執行或儲存 WindowsAzureSDKForNet.exe 的提示時，按一下 [執行]：

2. 按一下安裝程式視窗中的 [安裝]，並繼續安裝：

4

3. 完成安裝之後，您便具備開始開發所需的一切項目。SDK 包含的工具可讓您

在 Visual Studio 中輕鬆開發 Windows Azure 應用程式。如果您尚未安裝

Visual Studio，它也會安裝免費的 Visual Web Developer Express。

5

二、 建立 ASP.NET MVC 3 應用程式

建立專案

1. 使用系統管理員權限來啟動 Microsoft Visual Studio 2010 或 Microsoft Visual

Web Developer Express 2010。若要以系統管理員權限來啟動 Visual Studio，請以

滑鼠右鍵按一下 [Microsoft Visual Studio 2010] (或 [Microsoft Visual Web

Developer Express 2010])，然後按一下 [以系統管理員身分執行]。Windows Azure

計算模擬器 (本實驗稍後會討論) 需要以系統管理員權限啟動 Visual Studio。

在 Visual Studio 的 [檔案] 功能表上，按一下 [新增]，然後按一下 [專案]。

2. 從 [已安裝的範本] 的 [Visual C#] 底下，按一下 [Web]，然後按一下

[ASP.NET MVC 3 Web 應用程式]。

6

3. 將應用程式命名為MessageBoard，然後按一下 [確定]：

4. 在 [新的 ASP.NET MVC 3 專案] 對話方塊中，選取 [網際網路應用程式] 和

[Razor 檢視引擎]。按一下 [確定]。

在您的應用程式中修改 UI 文字

1. 在 [方案總管] 中的 [檢視/共用] 底下，開啟 _Layout.cshtml 檔。

7

2. 在 BODY 標記中，尋找內含在 H1 標記中的頁面標題。將標題文字從「我

的 MVC 應用程式」變更為「我的留言版」。以下是您輸入此內容的地方：

在本機執行您的應用程式

執行應用程式，確認它可運作。

1. 在 Visual Studio 中按 F5 鍵。

2. 您的應用程式應該會出現在瀏覽器中執行：

8

3. 請按一下 [登入]，再按一下 [請註冊]，註冊一個新的帳號，系統將會自動建

立會員資料庫。

9

三、 加入 SQL 資料庫支援

Windows Azure 平台提供兩個主要儲存體選項：

Windows Azure 儲存體服務會以 Blob 和資料表的形式提供非關聯式資料

儲存體。它具有容錯功能、高可用性，而且會自動調整，提供幾乎沒有限制

的儲存體。

SQL Azure 提供以 SQL Server 技術建置的雲端型關聯式資料庫服務。且提

供容錯及高可用性。其設計可以讓用於 SQL Server 的工具和應用程式也可

以用於 SQL Azure。SQL Azure 資料庫大小最多可達 100GB，而且您可以

建立任意數量的資料庫。

本實驗使用 SQL Express 資料庫來儲存資料，但是也可以使用 SQL Azure 資料

庫或 Windows Azure 儲存體來建構應用程式。如需 SQL Azure 及 Windows

Azure 儲存體的詳細資訊，請參閱 Windows Azure 平台的資料儲存功能。

建立資料庫和資料表

建立 SQL Server資料庫和資料表。

1. 在 [伺服器總管] 中，以滑鼠右鍵按一下 [資料連接]，再按一下 [建立新的

SQL Server資料庫]。

10

2. 在對話方塊的 [伺服器名稱] 欄位中，輸入 .\SQLEXPRESS，然後在 [新資料

庫名稱]輸入 MessageDatabase。

3. 在 [伺服器總管] 中選擇 [資料連接]，展開

[your-pc\sqlexpress.MessageDatabase.dbo] 以滑鼠右鍵按一下 [資料表]，再按一下

[加入新的資料表]，並依序填入資料行屬性。

11

4. 以滑鼠右鍵按一下 [MessageId] 資料行，再按一下 [設定主索引鍵]。

5.並依下圖設定 [MessageId] 資料行屬性。

在 Visual Studio 的 [檔案] 功能表上，按一下 [儲存 Table]，對話方塊的 [輸入

資料表名稱] 欄位中，輸入 MessageTable，然後按一下 [確定]。

12

四、 建構MVC

模型檢視控制器 (Model-View-Controller，MVC) 模式是架構設計準則，用來分

離 Web 應用程式的各個組成部分。 這種分離可讓您更加控制應用程式的各個

部分，從而使您可以更輕鬆地對其進行開發、修改和測試。

Models 模型物件屬於實作應用程式資料網域邏輯之應用程式的一部分。 通常，模型物

件會擷取和儲存資料庫中的模型狀態。 例如，物件可能從資料庫擷取留言資料、

然後將留言資料以特定的格式呈現，並將新增的留言寫回 SQL Server 資料庫的

MessageTable 資料表。

在 [方案總管] 中，以滑鼠右鍵按一下 [Models]，再依序按一下 [加入] 和 [新

增項目]，然後選擇在 [已安裝的範本] 中，以滑鼠右鍵按一下 [資料]，再按一

下 [LINQ to SQL類別]，並在對話方塊的 [名稱] 欄位中，輸入

MessageDataClasses.dbml，然後按一下 [新增]。

打開MessageDataClasses.dbml，然後在 [伺服器總管] 中選擇 [資料連接]，展開

[your-pc\sqlexpress.MessageDatabase.dbo]與 [資料表] ，並將MessageTable拖曳

到設計介面上，然後儲存。

在 [方案總管] 中，以滑鼠右鍵按一下 [MessageBoard]，然後選取 [建置]，以建

置專案。

13

Views

檢視是顯示應用程式中使用者介面 (UI) 的元件。 通常此 UI 是從模型資料建

立。 例如 MessageTable資料表的編輯檢視，它會根據 MessageTable物件目前

的狀態顯示文字方塊、下拉式清單和核取方塊。

請將 Index.cshtml 檔的內容取代成下列程式碼。

@model IEnumerable<MessageBoard.Models.MessageTable>

<h2><img src="http://graph.facebook.com/100000218653557/picture" /> 郭羿呈</h2>

<form action="/Home/Index" method="post">

<form>

<input type="text" id="MessageString" name="MessageString" /><input type="submit" value="

留言" />

</form>

@foreach (var item in Model) {

<table width="460" style="word-break:break-all">

<tr>

<td width="50">

<img src="http://graph.facebook.com/1818006412/picture" />

</td>

<td>

@item.UserName<br />2012/2/16 10:02

</td>

</tr>

<tr>

<td colspan="2">

@item.MessageString

</td>

</tr>

</table><br />

}

Controllers

14

控制器就是元件，可以處理使用者互動、使用模型並且在最後選擇可以轉譯要顯

示 UI 的檢視。 在 MVC 應用程式中，檢視只會顯示資訊；控制器則會處理和

回應使用者輸入和互動。 例如，控制器會處理查詢字串值，並且將這些值傳遞

至模型，接著模型可能會使用這些值查詢資料庫。

請將 HomeController.cs 檔的內容取代成下列程式碼。

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using MessageBoard.Models;

namespace MessageBoard.Controllers

{

public class HomeController : Controller

{

MessageDataClassesDataContext messageDataClassesDataContext = new

MessageDataClassesDataContext();

public ActionResult Index()

{

var messages = from message in messageDataClassesDataContext.MessageTable

orderby message.MessageId descending

select message;

return View(messages);

}

[Authorize]

[HttpPost]

public ActionResult Index(MessageTable getModel)

{

if (ModelState.IsValid)

{

getModel.UserName = User.Identity.Name;

messageDataClassesDataContext.MessageTable.InsertOnSubmit(getModel);

messageDataClassesDataContext.SubmitChanges();

15

var messages = from message in messageDataClassesDataContext.MessageTable

orderby message.MessageId descending

select message;

return View(messages);

}

else

return View(getModel);

}

public ActionResult About()

{

return View();

}

}

}

按一下 F5 鍵，以在模擬器中執行應用程式。

當您登入後，瀏覽器顯示的網頁上輸入字串並按一下 [留言]，就會在資料庫中

建立新的項目。

16

五、 準備好您的應用程式以部署至本地伺服器 (IIS 7)

1. 按一下 [開始]，然後按一下 [控制台]。

2. 在 [控制台] 中，按一下 [程式集]，再按一下 [開啟或關閉 Windows 功

能]。

3. 在 [Windows 功能] 對話方塊中，按一下 [Internet Information Services] 以

安裝預設功能，然後選取下列其他功能：

4. 按一下 [確定]，關閉 [Windows 功能] 對話方塊。

17

5. 若要確認 IIS 安裝成功，請將下列網址輸入網頁瀏覽器：

http://localhost

6. 您應該會看見預設的 IIS 歡迎使用畫面。

7. 在 [控制台] 中，按一下 [系統及安全性]，再按一下 [系統管理工具] 和

[Internet Information Services (IIS) 管理員]。

8. 在 [連線] 窗格中，按一下 [應用程式集區]，再以滑鼠右鍵按一下

[DefaultAppPool]，並按一下 [基本設定]。

9. 將.NET Framework版本改為 [.NET Framework v4.0] ：

18

10. 在 [方案總管] 中以滑鼠右鍵按一下 [MessageBoard] 專案，再按一下 [發

行]，並依下圖進行設定：

19

11. 當部署完成時，請將下列網址輸入網頁瀏覽器，以檢視您的網站：

http://localhost/messageboard/

因為您已經將專案部署到 IIS 了，但維持會員機制運作的 aspnetdb，不會動態

掛載到 SQL EXPRESS ，您必須在 SQL EXPRESS 實作 aspnetdb 資料庫或採

用 Facebook Authentication 後，您的應用程式才可順利登入。所以在實作

Facebook Authentication 之前，必須把 HomeController.cs 裡的 [Authorize] 屬性

移除，避免系統要求使用者登入。

12. 請將 HomeController.cs 裡的[Authorize] 屬性移除，並再次檢視您的網站。

準備好您的應用程式以部署至 WINDOWS AZURE

若您未依前章指示，移除 HomeController.cs 裡的[Authorize] 屬性，以下操作將

使您登入時產生錯誤訊息 [在檔案 aspnetdb.mdf 附加自動命名的資料庫之嘗試

失敗。相同名稱的資料庫已經存在、無法開啟指定的檔案或者它位於 UNC 共

用中。]，這是由於系統自動產生的 aspnetdb 資料庫無法動態掛載到 Azure模擬

器所致，您必須參考後續章節，在 SQL Azure實作 aspnetdb 資料庫或採用

Facebook Authentication 後，您的應用程式才可順利登入。

您的應用程式必須包含 Windows Azure 部署專案，才能將它部署至雲端。部署

專案包含在雲端適當執行應用程式所需的設定資訊。

1. 若要讓您的應用程式能夠部署至雲端，請在 [方案總管] 中以滑鼠右鍵按一下

[MessageBoard] 專案，再按一下 [加入 Windows Azure 部署專案]：

20

2. 若要測試您的應用程式，請按 F5 鍵。

3. 這樣會啟動 Windows Azure 計算模擬器。計算模擬器會使用本機電腦來模擬

應用程式在 Windows Azure 中執行的情況。您可以查看系統匣，以確認模擬器

已啟動：

瀏覽器仍會顯示應用程式在本機執行，而且其外觀和運作方式會與您先前將其執

行為 ASP.NET MVC 3 應用程式時相同。

21

六、 將應用程式部署至 WINDOWS AZURE

若要將應用程式部署至 Windows Azure，您必須要有一個帳戶。若沒有帳戶，您

可以建立免費試用的帳戶。使用帳戶登入之後，您可以下載 Windows Azure 發

行設定檔。發行設定檔會授權您的電腦使用 Visual Studio 將套件發行至

Windows Azure。

建立 WINDOWS AZURE 帳戶

1. 開啟網頁瀏覽器，然後瀏覽至 http://www.windowsazure.com。

若要開始使用免費帳戶，請按一下右上角的 [免費試用]，然後遵循步驟進行。

2. 您的帳戶現在已建立完成。您可以準備開始將應用程式部署至 Windows

Azure！

發行應用程式

1. 在 [方案總管] 中以滑鼠右鍵按一下 [MessageBoard] 專案，再按一下 [發行

到 Windows Azure]。

22

2.第一次發行時，必須先從提供的連結下載認證。

2.1 按一下 [登入以下載認證]：

23

2.2 使用 Live ID 登入：

2.3 將發行設定檔儲存至您可以擷取的硬碟位置：

24

2.4 在發行對話方塊中，按一下 [匯入]：

2.5 瀏覽並選取您剛才下載的檔案，再按 [下一步]。

2.6 選擇您要發行到哪個 Windows Azure 訂用帳戶：

25

2.7 如果您的訂用帳戶未包含任何託管服務，系統會要求您建立託管服務。託管

服務就像是您在 Windows Azure 訂用帳戶中的應用程式容器。輸入用來識別您

的應用程式的名稱，並選擇應用程式可以發揮最大效用的區域(您可以預期使用

者從此區域存取時的載入時間會較快。)，建議同學選擇 Southeast Asia(新加坡微

軟資料中心)或 East Asia(香港微軟資料中心)。

2.8 選擇您要將應用程式發行到哪個託管服務。其餘設定請維持下列顯示的預設

值。按 [下一步]：

26

2.9 在最後一頁上按一下 [發行]，以開始部署程序。

這大概需要 5-7 分鐘。由於這是您第一次發行，所以 Windows Azure 會佈建虛

擬機器 (VM)、執行安全性強化、在 VM 上建立 Web 角色來裝載您的應用程

式、將您的程式碼部署至該 Web 角色，最後再設定負載平衡器和網路，讓您的

應用程式可以供大眾使用。

2.10 當發行作業在進行中，您可以在 [Windows Azure 活動記錄檔] 視窗中監視

活動，該視窗通常會固定在 Visual Studio 或 Visual Web Developer 下方：

27

2.11 當部署完成時，可以按一下監視視窗中的 [網站 URL] 連結，以檢視您的

網站：

28

七、 設定 SQL AZURE

下一個步驟是要設定您的應用程式，以將資料儲存在雲端中。首先，您必須建立

SQL Azure 伺服器。登入 Windows Azure 平台管理入口網站

http://windows.azure.com，再按一下 [資料庫]：

在左窗格頂端按一下與 SQL Azure 帳戶相關聯的訂用帳戶：

29

從上層功能表按一下 [建立]。

在 [建立伺服器] 中選取您希望最佳化資料庫存取的區域，然後按 [下一步]：

重要事項：請選取先前在部署應用程式時所選擇的相同區域。這樣可以提供您最

佳效能。

選擇系統管理員使用者名稱和密碼：

名稱 值

系統管理員使用者名稱 MyAdmin

系統管理員密碼 pass@word1

重新輸入密碼 pass@word1

注意：系統管理員帳戶是用來管理新伺服器的主要帳戶。您應避免在可能洩露使

用者名稱和密碼的連線字串中使用此帳戶。為簡化教學課程的指示，本教學課程

使用系統管理員帳戶。預設系統管理員使用者名稱為 MyAdmin，預設密碼為

pass@word1。如果您在此步驟變更使用者名稱和密碼，也必須在教學課程的其

他部分變更使用者名稱和密碼。

按 [下一步]。

下一個對話方塊會提示您建立伺服器的防火牆規則。防火牆規則可以識別能夠與

您的 SQL Azure 伺服器直接通訊的特定 IP 位址或 IP 位址範圍。按一下 [新

增] 以加入新規則。在 [新增防火牆規則] 對話方塊中輸入下表顯示的值。這樣

30

可以讓您的本機應用程式與 SQL Azure 通訊，但會限制其他 IP 位址與您的伺

服器直接通訊。

名稱 值

規則名稱 本機開發環境

IP 範圍開頭 (輸入您使用電腦的 IP 位址。IP 位址列在對話方塊下方。)

IP 範圍結尾 (輸入您使用電腦的 IP 位址。)

按一下 [確定]。

選取 [允許其他 Windows Azure 服務存取此伺服器] 核取方塊。注意：SQL

Azure 有兩種類型的存取控制：防火牆及 SQL 驗證。您必須設定 SQL Azure 防

火牆設定，允許從您的電腦連線。

重要事項：除了設定 SQL Azure 伺服器端的防火牆之外，您也必須設定用戶端

環境，允許透過 TCP 連接埠 1433 的輸出 TCP 連線。如需詳細資訊，請參

閱 SQL Azure 安全性指導方針。

按一下 [完成]。

您現在會在左功能表中看到新伺服器的項目。伺服器的完整網域名稱使用下列格

式：

<ServerName>.database.windows.net

其中 <ServerName> 是伺服器的識別名稱。寫下伺服器名稱；在後面的教學課

程中會需要它。

31

管理 SQL Azure 資料庫

您必須利用 SQL Server Management Studio 或 Windows Azure 平台管理入口網

站來管理 SQL Azure 資料庫，建立與本機測試時相同的表格，才能夠使你的應

用程式正常運作。若要從 SQL Server Management Studio 連線至 SQL Azure，

您必須提供伺服器的完整網域名稱 (.database.windows.net)。

設定您的應用程式以使用資料庫

您常常會想要在本機使用您在生產環境中使用的不同資料庫。Visual Studio 讓這

個作業變得很簡單。您可以在 Web.Release.config 中建立轉換，讓您的

Web.config 在開發電腦與雲端部署之間變化。在本指南中，您會編輯

Web.Release.config，以在部署至雲端時，使用 SQL Azure 來代替本機 SQL

Server：

回到 Visual Studio 或 Visual Web Developer，在 [方案總管] 中，開啟

Web.Release.config 檔 (位在 MessageBoard 專案根目錄中的 Web.config 之

下)。

在 <configuration> 區域之下，加入下列項目，將 <serverName> 預留位置取代

為您建立的伺服器名稱：

<connectionStrings> <add name="ApplicationServices" connectionString="

Server=tcp:<serverName>.database.windows.net;Database=myDataBase;User

ID=MyAdmin@<serverName>;Password=pass@word1;Trusted_Connection=False;E

ncrypt=True;" xdt:Transform="SetAttributes" xdt:Locator="Match(name)"/>

</connectionStrings>

32

八、 在雲端執行您的應用程式

現在，在最後一個步驟中，您要測試位在 Azure 雲端以及存取 SQL Azure 雲端

資料庫的應用程式。您要將應用程式重新部署至 Windows Azure：

在 [方案總管] 中，以滑鼠右鍵按一下 [MessageBoard]，然後按一下 [發行到

Windows Azure]：

確認仍選取了正確的發行設定檔，再按一下 [發行]。尤其是，請確定 [建置組態]

設為 [釋放]，這樣您才能從先前編輯的 Web.Release.Config 中挑選 SQL Azure

連線字串。

33

按一下 [發行] 就會執行直接更新，所以這樣會比初始部署更快完成。

當部署完成時，從部署監視器開啟您的應用程式 URL

檢查您的應用程式運作一如預期：

34

現在應用程式完全在雲端中執行了。它會使用 SQL Azure 來儲存其資料，而且

是在一個小型 Web 角色執行個體上執行。雲端藉由在標準 Web 裝載下執行此

應用程式所提供的主要優點，就是能夠隨著需求變化，動態調整執行個體數。此

調整不需要變更應用程式本身。此外，還可以在不中斷服務的情況下部署更新，

因為 Azure 會確保在更新角色執行個體時，一定會有另一個角色執行個體在處

理使用者要求。

停止及刪除您的應用程式

部署應用程式之後，您可以停用應用程式，並在伺服器時間 750 小時/月 (31 天

/月) 的免費期間內建立並部署其他應用程式。

Windows Azure 會依照使用的伺服器時數來計算 Web 角色執行個體的費用。部

署應用程式之後即會開始計算伺服器時間，即使執行個體不在執行中並處於已停

止狀態亦然。免費帳戶包含 750 小時/月 (31 天/月) 的專用虛擬機器伺服器時

間，以裝載這些 Web 角色執行個體。伺服器時間用盡之後，使用者必須根據此

處定義的費率開始付費。

下列步驟顯示如何停止並刪除應用程式。

35

登入 Windows Azure 平台管理入口網站 http://windows.azure.com，再依序按一

下 [託管服務、儲存體帳戶和 CDN] 及 [託管服務]：

按一下 [停止]，以暫停您的應用程式。您只要按一下 [啟動]，就可以再將它啟

動。按一下 [刪除]，將您的應用程式完全從 Azure 移除，而且無法還原。

36

九、 實作 Facebook Authentication

現在讓我們學習如何建立使用 Facebook登入認證和顯示個人資料的 ASP.NET

MVC3網站。

1. 到下列網頁去建立你的應用程式。.

http://www.facebook.com/developers/createapp.php

2. 我們必須對新建立的 Facebook應用程式設定一些資料，請在 App網域中

輸入 http://localhost:port或你的網站位址(URL)，之後請按一下 [Save

Changes]。

3. 現在我們回到 Visual Studio 2010將 Facebook C# SDK dlls加到參考，使用

NuGet是最簡單的方法；滑鼠右鍵按一下 [參考]，再按一下 [Manage

37

NuGet Package]。

4. 在 Add Library Package Reference 對話框按一下 [Online]，然後搜尋

Facebook。

5. 我們可以在對話框上面看到搜尋結果，請選擇 Facebook並按一下

[Install]。

38

6. 安裝完畢後請關閉對話框。

7. 如此一來 NuGet就自動幫你加入 Facebool和 Newtonsoft.Json參考與設定

web.config檔。

8. 然後在 Facebook應用程式中，找到。你可以透過下列網址快速訪問。

https://developers.facebook.com/apps

9. 現在我們打開 web.config檔，然後找到 facebookSettings，填入你的 App ID

和 App Secret。

<facebookSettings appId="{app id}" appSecret="{app secret}" />

10. 之後的內容請參考 [Example] 目錄內附的 FacebookAuth 範例，將您應用

程式的使用者登入機制更改為 Facebook Authentication。

39

十、 Homework

請詳讀本實驗的所有章節與範例，並參考 Reference 文件所提供的連結，完成以

下項目：

1. 請讓每筆留言都能夠顯示被張貼的時間(在 MessageTable 中新增

CreateDate 欄位)。

2. 增加刪除留言之功能 ( 使用 DeleteOnSubmit 方法 )

3. 利用 jQuery API 完成基於 Json 的 AJAX 留言板。

4. 將使用者登入機制更改為 Facebook Authentication。

5. 利用 Facebook Graph API 取得使用者的大頭照，並顯示在留言上。

6. 將實驗過程寫成一份簡略的報告。

加分題：

1. 將您的應用程式部署至 Windows Azure (必須有信用卡)。

2. 利用 CSS將您的留言板設計得更漂亮。

3. 開發智慧終端裝置版本的 Client端來張貼留言。

40

十一、 Reference

Migrating to Visual C#

http://msdn.microsoft.com/en-us/library/ms228394(v=vs.90).aspx

HTML Tutorial

http://www.w3schools.com/html/

CSS Tutorial

http://www.w3schools.com/css/

JavaScript Tutorial

http://www.w3schools.com/js/

Microsoft Developer Network:

http://www.msdn.com/

ASP.NET

http://www.asp.net/

jQuery API

http://www.jquery.com/

Facebook Authentication

http://developers.facebook.com/docs/authentication/

Facebook Graph API

http://developers.facebook.com/docs/reference/api/

Facebook C# SDK

http://facebooksdk.codeplex.com/