利用Bootstrap+Avalonjs+EntityFramework 開發ASP.NET WebForm應用程式（上）

標籤：des   style   blog   http   io   color   ar   os   使用   

本文將介紹如何利用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裡進行處理了。

            $(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應用程式（上）