本文將介紹如何利用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.ContactLists
orderby item.id descending
select 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;
}
現在，運行頁面，一個簡單的數據顯示，增加和刪除的功能就完成了。
（三）源代碼下載