服務與資料庫_WCF+JQuery+LINQToSQL實戰

為了讓自己充分瞭解Framework3.5的各項功能，從前端JQuery到後端WCF服務及LINQToSQL，做一個簡單的整理，並且從第一個步驟開始完成這整個流程。

整個流程分為三個部分，第一是建立資料庫與程式的Object Relational Mapping，第二部份是WCF服務的建立，第三部份則是使用JQuery來接收WCF服務，並將資料呈現出來。大致分為12個步驟，來吧！跟著Ola做一次就會了！

1. 開啟2010，並且新增一個乾淨的Web專案(ASP.NET空白Web應用程式)

2. 首先我們要先完成ORM的動作，所以加入一個LINQ To SQL類別(DataClasses1)。

3. 加入後，利用伺服器總管連接要使用的資料庫，並且將要使用的資料表拖曳到設計介面上。完成後VS將會自動幫我們建立相關ORM的程式碼，若是沒有特殊需求不需要進行變更。假使進行變更，爾後再調整設計介面時更改的內容會被重新覆寫(所以自訂Class可以新增另一個來放置)。

4. 完成ORM後，就可以新增WCF服務來進行連接，但因為本篇預備使用JQuery做為前端的連接服務的語法，所以新增時選擇(已啟用AJAX的WCF服務)。

5.新增完成後，就可以開始撰寫相關的服務，這邊寫的是查詢的服務。

[OperationContract]
public List GetAllData()
{
DataClasses1DataContext context = new DataClasses1DataContext();
var result = (from T1 in context.PatrolHole select T1).ToList();
return result;
}

6. 完成撰寫以後，必須要先測試服務才可以在錯誤時往正確的方向測試錯誤來源。所以先建置一下專案，然後右鍵瀏覽服務，會發現有錯誤產生。

可以直接照著上面的說明進行更改，也就是在相對應的位置上加上相關設定。

再次瀏覽就可以看到結果頁面正常顯示。

7. 接下來，新增一個Web Form(*.aspx)，開始撰寫前端接服務的程式。

8.因為要使用JQuery做為前端語言，所以必須要先加入相關的Script函式庫，需要的檔案共有三個，分別是jquery-1.4.1.js、MicrosoftAjax.debug.js、MicrosoftAjaxTemplates.debug.js。

9.接下來就可以在我們新增的aspx檔案中引入相關的Script函式庫，並且加入剛剛製作的服務參考。在頁面上拉一個ScriptManager，並且指定參考檔案。

10.完成設定以後，就可以開始準備要裝資料的容器，在這邊是使用DataView，所以在body內加入命名，並且設定一個tbody來承接DataView。

11. 容器完成後，使用JQuery呼叫服務，並且將資料放到表格當中。

var dv = $create(Sys.UI.DataView, {}, {}, {}, $get("tbTemplate"));
var service = new AjaxOlaWCF.Service1();

$(function () {
ShowTable();
});

function ShowTable() {
service.GetAllData(function (data) { dv.set_data(data); $("#tbTemplate").show(); });
}

12. 最後，可以瀏覽網頁看看囉！


從專案建立開始，到寫完自己要看的Word文件，最後放上ola的家，就花了兩個多小時，如果你看到這篇！趕快試試看吧！扣除前端的JQuery，對於SilverLight應該也是很有幫助的。