SPA專案架構

MVC書一次都教一堆東西...
RAZOR語法、實體資料庫模型、LINQ語法、IENUMERABLE型態...
實在有點懶的學

20150403補充:原來這個叫做SPA架構
前輩教的類MVC架構
1.Modal-就只是個Modal，放屬性欄位而已
2.DAL-資料庫存取相關功能(Data Access Level)
3.主要專案-前端功能

應用在網站專案、Console專案、winform等等都可

1.Visuao Studio建立空白解決方案
2.建立類別庫專案-Modal，想到再加入類別即可
3.建立類別庫專案-DAL
4.建立主要專案，以一般ASP.NET網站專案為例
網站專案加入參考Modal與DAL
DAL加入Modal參考
Modal不參考任何專案，獨立

5.假設要做一個客戶主檔維護功能，有新增刪除修改顯示(CRUD)基本功能
客戶主檔資料表:
SID、客戶名稱、客戶電話三個欄位就好

Modal底下建立客戶主檔類別
public class Customer
{
    ///<summary>流水號</summary>
    public int SID{get;set;}
    ///<summary>客戶名稱</summary>
    public string Name {get;set;}
    ///<summary>客戶電話</summary>
    public string PhoneNumber {get;set;}
}

新增、更新、刪除時的訊息類別
public class msgCRUD
{
    public static const string STATUS_SUCCESS="success";
    public static const string STATUS_ERROR="error";
    public string status {get;set;}
    public string msg {get;set;}
}

DAL底下建立類別
using Modal;
public class CustomerController
{
     public List<Customer> searchData(out msgCRUD msg)
    {
         msg=new msgCRUD();
         List<Customer> list=new List<Customer>();
         DataTable dt=new DataTable();
         try
        {
             //資料庫處理，結果塞到DataTable
             if(dt.Rows.Count>0)
             {
                   foreach(DataRow dr in dt.Rows)
                  {
                       list.Add(new Customer(){
                           SID = dr["SID"].ToString(),
                           Name = dr["Name"].ToString(),
                           PhoneNumber = dr["PhoneNumber"].ToString()
                       });
                  }
             }
         }
         catch(Exception ex)
        {
             msg.status=msgCRUD.STATUS_ERROR;
             msg.msg="搜尋時發生錯誤:"+ex.ToString();
         }
         return list;
    }
}

網站專案底下建立ASP網頁
後端Customer.aspx.cs
[WebMethod]
protected string searchData()
{
    CustomerController cc=new CustomerController();
    List<Customer> list=cc.searchData();
    string myJson=JsonConvert.SerializeObject(list);
    return myJson;
}

前端Customer.aspx
使用JQuery AJAX語法取得資料
...
</form>
<script type="javascript">
function searchData()
{
 if (!window.ajaxValidPass) {
            var sdata = { };
            $.ajax({
                type: "POST",
                async: true,
                url: "Customer.aspx/searchData",
                data: JSON.stringify(sdata),
                contentType: "application/json; charset=UTF-8",
                dataType: 'json',
                success: function (data) {
                    var ary = $.parseJSON(data.d);
                    if (ary) {
                        //處理撈回來的東西
                        }
                        else {
                            alert('找不到資料');
                        }
                    }
                },
                error: function (response) {
                    console.log('error:' + response.responseText);
                    alert('error:' + response.responseText);
                }
            });
        }
}
</script>

到此即為基本的前端到後端，後端到資料存取層的資料傳輸方式
可以擺脫Server Control夾帶的垃圾CODE
又可以保持架構上的彈性