本文將介紹如何利用Bootstrap+Avalonjs+EntityFramework 開發ASP.NET WebForm應用程序，分為上下兩篇。上篇主要介紹實現，下篇主要介紹界面。

打開Visual Studio Web Express2013新建一個空白應用程序 ContactSample--聯系人示例

?

（1）數據庫

?

引入界面文件BootStrap，JS文件jquery和avalon，建立聯系人頁面Contact.aspx。

?

?

打開數據庫，設計數據庫ContactSample,數據庫比較簡單，一個自增的ID，一個聯系人姓名contactnname，聯系人電話tel，以及地址address。

?

在VS解決資源管理器里，我新加了Model文件夾，存放系統生成的數據，在Model右擊，選擇添加新項，在Data里選擇ADO.NET Entity Data Model

如果你的新加項里沒有這個模塊，可以單擊 http://msdn.microsoft.com/en-us/data/ee712906?查看如何添加。

?

?

在向導里，選擇從數據庫里生成代碼。

?

設置數據庫連接，注意在settings in web.config使用了ContactContext，后面代碼里你將看到利用他來獲取數據庫對象。

?

使用6.0版本

?

引入唯一的一張表ContactLists

?

引入成功后，系統會自動生成相關代碼。

現在，我們打開contact.aspx.cs頁面，增加三個方法，分別是：獲取聯系，添加和刪除聯系人。

在代碼里，在函數的前面增加了[WebMethod] ，這使得ASP.NET允許客戶端調用后臺代碼。另外，代碼是static的

[WebMethod]public static ContactLists[] GetContactLists(){var db = new ContactContext();var data = from item in db.ContactListsorderby item.id descendingselect item;return data.ToArray(); }[WebMethod]public static void DeleteContact(ContactLists data){var db = new ContactContext();var sg = db.ContactLists.FirstOrDefault(contact => contact.id == data.id);if (sg != null){db.ContactLists.Remove(sg);db.SaveChanges();}}[WebMethod]public static object AddContact(ContactLists data){ var db = new ContactContext();db.ContactLists.Add(data);db.SaveChanges(); return data.id;}

?

（二）JS Model

?在使用avalon之前，為了方便，我們先定義一個聯系人模型，為此，定義了JS函數

function contactItem(data) {this.id = data.id;this.contactname = data.contactname; this.tel = data.tel; this.address = data.address; }

首先實現頁面打開時，顯示數據的功能，定義一個ContactPanel，后續所有avalon都在這是針對這個Panel進行操作。

其次，使用一個Table顯示數據。對于數據的循環，使用了ms-repeat-el

?

<div class="ContactPanel" ms-controller="ContactPanel" "><table ><tbody ><tr><th>ID</th><th>聯系人姓名</th><th>聯系人電話</th><th>聯系人地址</th></tr><tr ms-repeat-el="contactlists" > <td> <span ms-text="el.id" /></td> <td> <input ms-value="el.contactname" /></td> <td ><input ms-value="el.tel" /> </td> <td ><input ms-value="el.address" /> </td> <td ><input type="button" value="刪除" ms-click="delContact(el)" /> </td> </tr></tbody></table> </div>

?

?現在，就可以在document的ready里進行處理了。其中使用了model.contactlists.pushArray(contactLists);來加入數據

$(document).ready(function(){$.ajax({type: "POST",url: 'Contact.aspx/GetContactLists',contentType: "application/json; charset=utf-8",dataType: "json",success: function (results) {var contactLists = $.map(results.d, function (item) {return new contactItem(item)}); model.contactlists.pushArray(contactLists);},error: function (err) {alert(err.status + " - " + err.statusText);}})});

?在上面中model的定義如下

var model = avalon.define("ContactPanel", function (vm) {vm.id = "0";vm.contactname = "";vm.tel = "";vm.address = ""; vm.contactlists = [];vm.addContact = function () { var newResult = $("#addaPanel input").serialize(); var newContact = decodeURI(objToString(newResult));$.ajax({type: "POST",url: 'Contact.aspx/AddContact',data: "{data:" + newContact + "}",contentType: "application/json; charset=utf-8",success: function (result) {vm.contactlists.unshift(new contactItem({id:result.d,contactname:vm.contactname,tel: vm.tel,address:vm.address})); vm.contactname = "";vm.tel = "";vm.address = "";},error: function (err) {alert("添加失敗")}});}vm.delContact = function (el) {$.ajax({type: "POST",url: 'Contact.aspx/DeleteContact',data: "{data:"+JSON.stringify(el.$model)+"}",contentType: "application/json; charset=utf-8",success: function (result) {vm.contactlists.remove(el);},error: function (err) {alert("刪除失敗");}});}});

?

最后，代碼里使用了objToString他由于把對象轉好為字符串，這是一個自定義函數。

function objToString(data) {data = data.replace(/&/g, "\",\"");data = data.replace(/=/g, "\":\"");data = "{\"" + data + "\"}";return data;}

?

?現在，運行頁面，一個簡單的數據顯示，增加和刪除的功能就完成了。?

?

?

?

（三）源代碼下載

http://files.cnblogs.com/mqingqing123/ContactSample.rar

總結

以上是生活随笔為你收集整理的利用Bootstrap+Avalonjs+EntityFramework 开发ASP.NET WebForm应用程序（上）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。