網頁

2010年6月21日 星期一

服務與資料庫_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應該也是很有幫助的。

沒有留言:

張貼留言