首页 > 代码库 > 利用Bootstrap+Avalonjs+EntityFramework 开发ASP.NET WebForm应用程序（上）
利用Bootstrap+Avalonjs+EntityFramework 开发ASP.NET WebForm应用程序（上）
本文将介绍如何利用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 = http://www.mamicode.com/from item in db.ContactLists>
（二）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="http://www.mamicode.com/el.contactname" /> </td> <td > <input ms-value="http://www.mamicode.com/el.tel" /> </td> <td > <input ms-value="http://www.mamicode.com/el.address" /> </td> <td > <input type="button" value="http://www.mamicode.com/删除" ms-click="delContact(el)" /> </td> </tr> </tbody> </table> </div>
现在，就可以在document的ready里进行处理了。
$(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 = http://www.mamicode.com/data.replace(/&/g,"\",\""); data = http://www.mamicode.com/data.replace(/=/g,"\":\""); data = "http://www.mamicode.com/{/"" + data + "\"}"; return data; }
现在，运行页面，一个简单的数据显示，增加和删除的功能就完成了。
（三）源代码下载
http://files.cnblogs.com/mqingqing123/ContactSample.rar
利用Bootstrap+Avalonjs+EntityFramework 开发ASP.NET WebForm应用程序（上）