ASP.Net MVC Framework

MVC與Web Form的不同
• MVC沒有控制項
• MVC沒有ViewState
• MVC沒有讓你昏倒的一堆事件
• MVC是開放原始碼
• MVC注重開發習慣

習慣勝於配置
• 良好的習慣比一堆奇奇怪怪的文件還重要

什麼是開發的好習慣
• 可以準時下班的都是好習慣

要點故事描述要以業務層面出發
要有範圍,估算,重要性 , 並且顧及品質
故事內容要明確, 並且符合產品負責人所要求
太大的故事可拆成小故事
故事拆分成任務
技術故事盡量用可衡量業務價值說明
產品負責人需定義驗收標準,並對重要項目估算
估算不是承若
紀錄項目
(索引卡)
識別碼名稱重要性估算如何展示註解 ,
其他…
估算方式本能估算
生產率計算
使用計畫撲克

真的在執行Scrum嗎?
• 1. 你們有固定的反覆運算週期麼？你們的反覆運算週期是否以某個特定的
時間開始並以某個固定的時間結束，且反覆運算週期必須少於6周？（回答
否定的則不符合反覆運算開發原則）
• 2. 在每個反覆運算週期結束時，你們能提供可以工作的軟體麼？（回答否
定的則不符合反覆運算開發原則）
• 3. 在反覆運算開始之前，你們是否需要必須有一個完整細緻的需求說明？
（回答肯定的則不符合反覆運算開發原則）
• 4. 是否將測試作為反覆運算增量開發的一部分，在開發過程中進行測試？
（回答否定的則不符合反覆運算開發原則）

XP(極限編程)
• 規劃策略(The Planning Game)；
結對程式設計(Pair programming)
測試(Testing)
重構(Refractoring)
簡單設計(Simple Design)
代碼集體所有權(Collective Code Ownership)
持續集成(Continuous Integration)
現場客戶(On-site Customer)
小型發佈（Small Release）
每週40小時工作制（40-hour Week）
編碼規範（Code Standards）
系統隱喻（System Metaphor）

為什麼要用MVC?
• 可以準時下班

介紹一下MVC
• MVC專案有一堆資料夾,放錯檔案就慘了~!

如何開始
• 要先瞭解MVC這三個是在做啥的之前,要先瞭解物件導向。

兩個重點
責任分
派
內聚/
耦合的
平衡點

MVC的好處
好寫好改好簡單

進入正題
MVC各由三個名詞取第一個字母拼裝而成
• M->Model
• V->View
• C->Controller

Model
• 負責定義資料格式與資料存取的介面。主要任務如下:
• 定義資料結構
• 負責與資料來源溝通
• 資料格式驗證
• 對資料進行加工處理
簡單來說… Model就是在處理資料的物件。

View
• 負責使用者介面相關呈現,包括輸出入。
• 輸出
• 從Controller取得資料,並顯示在用戶端介面上。
• 參考Model中所定義的資料格式。
• 輸入
• 基本資料格式驗證。
• 利用Get/Post與Controller互動。
簡單來說… View就是在處理畫面的物件。

Controller
• 負責控制系統運行的流程,決定網頁操作的流程與動線,主要任務如下:
• 決定與用戶端溝通的協定。
• 決定系統運作的流程。
• 從Model取得資料。
• 決定該顯示那一個View。
簡單來說… Controller就是在決定系統好不好用的物件。

Model討論的議題
• Linq
• ORM
• Entity Framework
• Repository Pattern

Linq
• 全名: Language-Integrated Query
• .Net Framework 3.5引進的技術
• 徹底解決以一種語法存取各種不同資料來源。
• 有兩種Style:
• Function
• 類SQL
參考網站: http://msdn.microsoft.com/zh-tw/library/bb397926.aspx

概觀
• 共分幾種:
• Linq to Object
• Linq to XML
• Ling to Entity
• Linq to XXX
• Linq開放Provider,任何人都可以設計出自己所需要的Linq資料來源。

兩個重要的介面(Interface)
• IEnumerable<T>
• IQueryable<T>

匿名類別
• Linq使用上經常會與匿名類別配合

Linq的查詢作業
1. 取得資料來源
2. 篩選(Where)
3. 排序(Order)
4. 群組(Group)
5. 聯結(Join)
6. 投影(Projection)

從集合物件轉換成XML
studentsToXML:

排序資料
方法名稱描述
OrderBy 將值依遞增順序排序
OrderByDescending 將值依遞減順序排序
ThenBy 以遞增序執行次要排序
ThenByDescending 以遞減順序執行次要排序
Reverse 反轉集合中項目的順序
http://msdn.microsoft.com/zh-tw/library/bb546145.aspx

設定作業
方法名稱描述
Distinct 移除集合中的重複值
Except 傳回集合差異,表示出現在某個集合中,但沒有
出現在另一個集合中的項目
Intersect 傳回集合交集,表示同時出現在兩個集合中的
項目
Union 傳回集合聯集,表示將兩個集合集結後的項目
(去除重複值)

篩選
方法名稱描述
OfType 根據是否可以轉換為指定的型別來選取值
Where 根據述詞函式來選取值

集合判斷
方法名稱描述
All 判斷序列中的項目是否全都符合條件
Any 判斷序列中是否有任何項目會符合條件
Contain 判斷序列是否包含指定的項目

選取
方法名稱描述
Select 投影以轉換函式為基礎的值
SelectMany 投影以轉換函式為基礎的值序列,然後將它們
簡化成單一序列

分割
方法名稱描述
Skip 略過序列中的項目,直到指定的位置為止
SkipWhile 根據述詞函式略過項目,直到項目不符合條件
為止
Take 取用佇列中的項目,直到指定的位置為止
TakeWhile 根據述詞函式取用項目,直到項目不符合條件
為止

聯結
方法名稱描述
Join 根據索引鍵選取器函式聯結兩個序列,並擷取
值組
GroupJoin 根據索引鍵選取器函式聯結兩個序列,並將每
個項目產生的相符項目分組

分組
方法名稱描述
GroupBy 將擁有共同屬性的項目分組。每個群組都由一
個Igrouping<Tkey,Telement>物件代表
ToLookup 根據索引鍵選取器函式,將項目插入至
Lookup<Tkey,Telement>

產生
方法名稱描述
DefaultIfEmpty 將空集合取代為填入預設值的單一集合
Empty 傳回空集合
Range 產生包含一串數字的集合
Repeat 產生包含一個重複值的集合

相等比較
方法名稱描述
SequenceEqual 利用配對方式比較項目,以判斷兩個序列是否
相等

項目
方法名稱描述
ElementAt 傳回位於集合中所指定索引處的項目
ElementAtOrDefault 傳回位於集合中所指定索引處的項目,如果索
引超出範圍,則會傳回預設值
First 傳回集合中的第一個項目,或符合條件的第一
個項目
FirstOrDefault 傳回集合中的第一個項目,或符合條件的第一
個項目。如果沒有,則會傳回預設值。
Last 傳回集合中的最後一個項目,或符合條件的最
後一個項目
LastOrDefault 傳回集合中的最後一個項目,或符合條件的最
後一個項目。如果沒有,則會傳回預設值。
Single 傳回集合的唯一一個項目,或符合條件的唯一
項目。
SingleOrDefault 傳回集合的唯一一個項目,或符合條件的唯一
一個項目,如果沒有,則會傳回預設值。

轉換(1)
方法名稱描述
AsEnumerable 傳回型別為IEnumerable<T>的物件
AsQueryable 將IEnumerable轉換成IQueryable
Cast 將集合的項目轉換為指定的型別
OfType 根據是否可以轉換為指定的型別來篩選值

轉換(2)
方法名稱描述
ToArray 將集合轉換為陣列。這個方法會強制執行查詢。
ToDicionary 根據索引鍵選取函式,將項目放入
Dictionary<Tkey, Tvalue>。這個方法會強制執
行查詢。
ToList 將集合轉換為List<T>。這個方法會強制執行
查詢
ToLookup 根據索引鍵選取器函式,將項目放入
Lookup<Tkey,Telement>。這個方法會強制執行
查詢

彙總
方法名稱描述
Aggregate 對集合中的值執行自訂彙總作業
Average 將集合中的值計算平均值
Count 計算集合中的項目個數,可以選擇性地僅計算
滿足述詞函式的項目的個數
LongCount 計算大型集合中的項目個數,可能選擇地僅計
算滿足述詞函式的項目
Max 判斷集合中的最大值
Min 判斷集合中的最小值
Sum 計算集合中所有值的總合

ORM
• 全名: Object Relational Mapping
• 用來實現物件導向設計中不同類型資料庫之間的轉換。

系統的考量
• 專案中的系統設計需以可適性為考量,當資料庫或外部資料來源改變
能夠以最短的時間和最高的品質進行修改。

ORM帶來的優點
• 提供系統設計在資料存取方面的可適用性。
• 以物件導向程式語言操作資料庫。
• 提供可預測的資料庫存取效能。

ORM帶來的缺點
• 無法控制SQL語法。
• 資料存取層變得更厚重。
• 與一般資料存取(ADO.Net)效能相差:10倍。

Entity Framework
• 微軟官方的ORM

Entity Framework與各種不同資料庫

不用先設計資料表也能寫程式

三種開發模式
• 資料庫優先
• 模型優先
• 程式碼優先

POCO
• 全名:Plain-Old CRL Object

屬性標籤
屬性標籤說明 Server端 Client端
Compare 是否與另一個欄位的值相同
CreditCard 使用信用卡公式驗證是否為合法卡號
CustomValidation 使用自訂的Method驗證
EmailAddress 設定欄位為Email格式
MaxLength 設定欄位的最大長度
MinLength 設定欄位的最小長度
Phone 設定欄位為電話格式
Range 設定欄位的合法範圍
RegularExpression 指定欄位順序與資料型別
Remote 設定Client端驗證時呼叫Server端的服務做驗證。
Required 設定欄位為必填
StringLength 設定字串的最大和最小長度
Url 設定欄位為網址格式

用於Scaffold的屬性標籤
屬性標籤說明
Key 影響Edit樣版,在使用Edit樣版產生View Page時
設定的屬性會變成Hidden欄位
Scaffold 影響Scaffold樣版產生View Page時是否忽略
Model的屬性

• 一個Context內含一個User Case所需要的Entity。
Entity 與 Context

資料庫建構的方式
• DropCreateDatabaseAlways
• DropCreateDatabaseIfModelChanges
• CreateDatabaseIfNotExists

Fluent API
• 可針對細部做更進一步的設定。
• 覆寫Context中的OnModelCreating方法。

Code First資料庫移轉
• 啟用資料庫移轉
• Enable-Migrations –ContextTypeName [Context完整類別名稱]
• 增加一個更新版本
• Add-Migration [版本名稱]
• 更新資料庫
• Update-Database
• Update-Database –SourceMigration [來源版本名稱]
• Update-Database –SourceMigration [來源版本名稱] –TargetMigration [目標版本名稱]
• Update-Database –SourceMigration [來源版本名稱] –TargetMigration [目標版本名稱] –Script
• Update-Database –TargetMigration: $InitialDatabase

啟用資料庫移轉後
• 多了一個資料夾-Migrations
• Configuration.cs是資料庫移轉時所參考的內容;
• 建構子
設定是否要自動移轉。
• Seed方法
用於設定成功移轉後的後置處理。
• 除了Configurations.cs外,還會有此次Model版本的異動設
定檔。

繼承
• TPH(Table Per Hierarchy)
• TPC(Table Per Concrete Class)
• TPT(Table Per Type)

TPH
• 資料庫中僅有一張表,該表擁有所有子類別的Record,並以一個額外的
欄位區別不同的子類別。

TPH-
Fluent API
以EmployeeType欄位區隔RegularEmployee和ContractEmployee。

TPC
• 資料庫中僅有子類別的資料表。
• 父類別會將自己的屬性各別放置到子類別的資料表中。
• 要注意的部份是鍵值同步的問題。

TPT
• 一個類別對應一張資料表。
• 子類別的資料表會將父類別的主索引鍵作為自己的外主鍵。

關聯
• 一對零/一
• 一對多
• 多對多

一對一
• 兩個實體之間一對一關係:
• 實體參照另一個實體的某個鍵值
• 需特別指定主從角色。

一對一
Fluent API
主為: Department , 從為: Employee

一對零
• 一對一的一種特例:
• 允許某一方為空值

一對零
Fluent API
主為: Department , 從為: Employee

一對多-
FluentAPI
• 一對可以直接使用Model設計來完成,或是採用FluentAPI

多對多
• 這種實體關係不常見,但仍需要瞭解
• 通常在資料表中,會另起一表。
• 可使用Model的方式,或是使用FluentAPI。

Repository樣式
• 過去在撰寫系統時,總會遇到需要去存取資料庫或是外部資料來源,而
總是在最後發現到下列狀況:
• 重覆的程式碼
• 隱含高潛在問題的錯誤在程式碼中
• 弱型別造成撰寫上的負擔
• 資料存取輔助機制有設計的困難度
• 難以為其撰寫單元測試

Repository父類別 -
建構子

Repository父類別-
GetAll方法

GetOne方法

Add方法

Update方法

同步更新衝突
• 同一筆資料同時多位使用者一起修改

View的概念
• View的職責為畫面與資料的呈現,應要盡可能單純,隨然網頁的View包
含了許多複雜技術,但是為了不要在View中處理資料的存取與商業邏
輯。

ActionResult
ActionResult格式用途說明
ViewResult 使用ASP.Net MVC的View機制,產生Html
PartialViewResult 使用ASP.Net MVC的View機制,產生Html
ContentResult 純文字格式內容輸出
EmptyResult 空白的內容輸出
FileContentResult 以傳送Byte Array的方式輸出檔案
FilePathResult 以傳送檔案路徑的方式輸出檔案
FileStreamResult 以傳送Stream內容的方式輸出檔案,與
FilePathResult和FileContentResult的差異為傳遞
的參數不同,而此三個類別都是繼承自FileResult
HttpStatusCodeResult 自訂回傳HttpResponse的Status
JavaScriptResult 輸出JavaScript格式的內容
JsonResult 輸出JSON格式的內容
RedirectResult 傳入網址參數做網址轉換
RedirectToActionResult 傳入Controller與Action名稱做網址轉換

資料容器
特色 ViewData TempData SessionState Cookie ApplicationState
生命週期非常短,僅一個
Action
非常短,僅1~2個
Request
長,預設可以20
分鐘
長,預設可以直
到關閉Browser
長,直到應用程
式結束
隔離性有有有有無,所有的使用
者都共用
儲存端 Server Server Server Client Server
跨多台Server 無,但ViewData
不需要
儲存在Session中,
所以與Session相
同
預設是InProcess
機制,無法跨多
台伺服器,但可
以修改成放置在
SQL Server
可以設定
Domain讓同一
個Domain Server
都能使用
無
序列化不需要同Session 若不是放在
InProcess就需要
不需要不需要

Razor語法
• 可動態編譯
• 使用@作為語法標記
• 允許擴充既有的Html方法

Razor基本語法
• <p>
現在時刻: @Datetime.Now
</p>
<p>
會員名稱: @(User.Identity.Name + Model.MemberLevel)
啟用狀態: @(ViewBag.IsEnabled ? “啟用”:”停用”
</p>

Razor程式區段
• @{
var name= “Good”;
@:你好, 我是 @name
}

If
• @if(ViewBag.IsEnabled) {
啟用
} else {
不啟用
}

foreach
• <ul>
@foreach(var myItem in Request.ServerVariables) {
<li>@myItem</li>
}
</ul>

自訂函數
@functions {
public IHtmlString GetYesterday() {
var theDay = Datetime.Now.AddDays(-1);
return new HtmlString(theDay.ToShortDateString());
}
}

模型繫結
@model IEnumerable<MvcApplication.Models.Product>

引入命名空間
• @using MvcApplication.Models

Help輔助類別-
超鏈結
語法範例說明
@Html.ActionLink("連結文字", "ActionName") 指向這個View所屬的Controller中的ActionName
@Html.ActionLink("連結文字", "ActionName",
"ControllerName")
連結到名稱為ControllerName的Controller中的
Action名稱為ActionName
@Html.ActionLink("連結文字", "ActionName",
new {id=123, page=5})
設定額外的RouteValue
@Html.ActionLink("連結文字",
"ActionName",null, new {@class="btn"})
針對超鏈結設定CSS類別名稱

Help輔助類別-
輸出表單
@using(Html.BeginForm("ActionName",
"ControllerName",FormMethod.Get,new {enctype="multipart/form-data"}))
{
<p>~</p>
<input type="submit" value="註冊" />
}

Help輔助類別-
輸入欄位
Html輔助方法說明
Html.Label() /Html.LabelFor() 輸出<label>標籤
Html.TextBox()/Html.TextBoxFor () 輸出<input type="text">標籤
Html.TextArea()/Html.TextAreaFor () 輸出<textarea>標籤
Html.Password()/Html.PasswordFor () 輸出<input type="password">標籤
Html.Checkbox()/Html.CheckboxFor () 輸出<input type="checkbox">標籤
Html.RadioButton()/Html.RadioButtonFor () 輸出<input type="radio">標籤
Html.DropDownList()/Html.DropDownListFor () 輸出<select>標籤
Html.ListBox()/Html.ListBoxFor () 輸出<select multiple>標籤
Html.Hidden()/Html.HiddenFor () 輸出<input type="hidden">標籤
Html.ValidationSummary 輸出表單驗證失敗時的錯誤訊息

部份檢視
• 可看成是ASP.Net WebForm中的UserControl

Help輔助類別-
載入部份檢視
使用方式使用範例
Html.Partial(String) Html.Partial("Hello")
Html.Partial(String,Object) Html.Partial("Hello",Model)
Html.Partial(String, ViewData Dictionary) Html.Partial("Hello", ViewData["Hi"])
Html(String, Object, ViewData Dictionary) Html.Partial("Hello",Model,ViewData["Hi"])

從Controller載入
• @Html.Action("PartialView名稱")
• @{Html.RenderAction("PartialView名稱");}
• 這種通常用於全網站都會出現的固定頁,但是會因為一些特殊狀況而
有小變化。
• 例:功能清單

Ajax輔助類別
方法用途
ActionLink 回傳有Ajax設定的<a>標籤,其中href是使用
ActionName與ControllerName
RouteLink 回傳有Ajax設定的<a>標籤,其中href是使用
RouteValues產生
BeginForm 回傳MvcForm並產生有Ajax設定的<form>標籤
BeginRouteForm 回傳MvcForm並產生有Ajax設定的<form>標籤,
但form的action是使用RouteValues產生

AjaxOptions(1)
名稱說明
UpdateTargetId 執行Ajax後,要更新的目標Html DOM Id,必填
Confirm 設定在送出資料前,要顯示的確認訊息,確認後才會送出資料,預設為null
HttpMethod 設定送出Http要求的方法,預設為Post
InsertionMode 對設定UpdateTargetId的Html Element處理模式,有三種:
• Replace:取代原本內容
• InsertBefore:在之前增加Ajax下載的內容
• InsertAfter:在之後增加Ajax下載的內容
• 預設值Replace

AjaxOptions(2)
名稱說明
LoadingElementDuration 顯示載入動畫的持續時間(以毫秒為單位)
LoadingElementId 載入動畫Html DOM Id
OnBegin 在執行Ajax之前呼叫的JavaScript函式名稱
OnComplete 在執行Ajax之後,成功或失敗都會呼叫的
JavaScript函式名稱
OnFailure 在執行Ajax之後,失敗時呼叫的JavaScript函式名
稱
OnSuccess 在執行Ajax之後,成功時呼叫的JavaScript函式名
稱
Url Ajax執行時送出要求的Url,預設會使用<a>的
href或<form>的action值

Url輔助類別
方法用途
Action 使用ActionName與ControllerName產生Url
RouteUrl 使用RouteValue產生Url
HttpRouteUrl 使用RouteValue產生WebApi用的Url
Content 將虛擬路徑轉成相對路徑
Encode 使用Url編碼
IsLocalUrl 判斷是否為本地路徑

檢視範本
• 共有:
• 編輯器範本
• 顯示範本

檢視範本
• 指定編輯器範本:
• Model的屬性加上標籤:DataType(針對編輯器範本)、Display (針對顯示範本)
• 依屬型別選擇範本
• Html輔助方法使用 @Html.EditorFor/ @Html.DisplayFor來顯示特定型
別的編輯器範本。
• 可自訂範本,若沒有自訂的範本,系統會自動詢找內建的範本。

內建範本
• 目前可以對應的型別:
HiddenInput, MultilineText, Password, Text, Collection, PhoneNumber, Url,
EmailAddress, DateTime, Date, Time, Color, Byte, Sbyte, Int32, UInt32, Int64,
UInt64, Boolean, Decimal, String, Object
檢視範本檔案路徑
顯示範本(Display Template) /Views/{ControllerName} /DisplayTemplates
/Views/Shared/DisplayTemplates
編輯器範本(Editor Template) /Views/{ControllerName}/EditorTemplates
/Views/Shared/EditorTemplates

jQuery
• Write less, Do more
• 不須擔心跨瀏覽器的問題,jQuery已經做好了
• 採用CSS3選擇器

jQuery選取器
標籤 $("a")
依Id $("#btn")
依類別 $(".btn")

jQuery選擇器-
篩選(1)
範例說明
eq(index) $("p").eq(2) 取得匹配的第3個元素(註:index從0開始)
filter(expr) $("p").filter(".highlight"); 取得類別為highlight的p元素
not $("p").not(".green, #blueone"); 剃除類別為green且id為blueone的p元素
範例說明
parent(expr) $("p").parent("#btn") 取得上一層父元素id為btn的元素
parents(expr) $("p").parents("#btn") 取得所有的父/祖先元素id為btn的元素
children(expr) $("p").children("#btn") 取得下一層所有子元素id為btn的元素(不含text node)
contents(expr) $("p").contents("#btn") 取得全部元素(含text node,若p成iframe則會取得
document元素)

jQuery選擇器-
篩選(2)
範例說明
next(expr) $("p").next("#btn") 取得p元素其後緊鄰的兄弟元素id為btn的元素
nextAll(expr) $("p").nextAll("#btn") 取得p元素其後所有的兄弟元素id為btn的元素
prev(expr) $("p").prev("#btn") 取得p元素其前緊鄰的兄弟元素id為btn的元素
prevAll(expr) $("p").prevAll("#btn") 取得p元素其前所有的兄弟元素id為btn的元素
siblings(expr) $("p").siblings("#btn") 取得p元素其所有的兄弟元素id為btn的元素
範例說明
find(expr) $("p").find("#btn") 取得p元素底下符合id為btn的元素

jQuery修改內容
範例說明
html()/html(val) $("p").html(); $("p").html("<label>a</label>") 取得/設定 Html內容
text()/text(val) $("p").text(); $("p").text("<label>a</label>") 取得/設定文字內容

jQuery插入元素
範例說明
append(content) $("p").append("<b>hello</b>") 在每個匹配的元素內部最後面加入內容
prepend(content) $("p").prepend("<b>hello</b>") 在每個匹配的元素內部最前面加入內容
before(content) $("p").before("<b>hello</b>") 在每個匹配的元素前面加入內容
after(content) $("p").after("<b>hello</b>") 在每個匹配的元素後面加入內容
範例說明
wrap(html) $("p").wrap("<div></div>") 新增一個div標籤,並將p標籤放置在裡面

jQuery刪除元素
範例說明
empty() $("p").empty() 刪除所有p標籤及其子節點
remove() $("p").remove() 從DOM中刪除p標籤,但不會刪除$("p")物件

jQuery屬性與樣式
• 屬性:
• attr("屬性名稱")/attr("屬性名稱", "值")/attr({ 屬性名稱: "值", 屬性名稱2:"值"})
• 移除屬性: removeAttr("屬性名稱")
• 樣式:
• css("樣式名稱")/css("樣式名稱", "值")/css({樣式名稱:"值",樣式名稱:"值"})

jQuery事件
• 註冊: $("selector").事件(function() { 執行邏輯});
• 觸發事件: $("selector").事件();
• jQuery支援事件:
• blur(失去焦點), change(物件內容改變), click(點擊物件), dblclick(連點兩下), error(下載
檔案發生錯誤), focus(被點擊或取得焦點), keydown(按下鍵盤), keypress(放開鍵盤後),
onkeyup(放開鍵盤時), onload(下載檔案完成), mousedown(滑鼠按下時), mousemove(介
於over與out之間的移動行為), mouseout(滑鼠移開某物件四周時), mousemove(滑鼠離
開某物件四周時), mouseup(放開滑鼠按鍵), resize(視窗大小改變), scroll(捲軸捲動),
select(文字被選取), submit(表單送出時), unload(關閉網頁時)

jQuery動態元素事件綁定
• 綁定事件:
$("selector").on("事件",function() {執行邏輯});
$("selector").on("事件", "sub-selector",function() {執行邏輯});
• 解除事件:
$("selector").off("事件", "sub-selector",function() {執行邏輯});:

jQuery動畫
• 顯示:
• show()show(speed[,callback])
• 隱藏:
• hide()hide(speed[,callback])
• toggle()toggle(speed[,callback])
• 滑動:
• slideUp()slideUp(speed[,callback])slideDown()slideDown(speed[,callback])
• 淡化:
• fadeIn(speed[,callback])fadeout(speed[,callback])faceTo(speed,opacity[,callback])
• 自訂
• animate(params[,duration[,easing[,callback]]])

jQuery Ajax
• 基本的jQuery Ajax型態:
jQuery.ajax(url[,settings])

jQuery Ajax簡短方法
• jQuery.get(url[,data][,success(data,textStatus,jqXHR)][,dataType]) :
• 使用Http Get request從伺服器載入資料
• jQuery.getJson(url[,data][,success(data,textStatus,jqXHR)][,dataType]) :
• 使用Http Get request從伺服器載入Json格式資料
• jQuery.getScript(url[,data][,success(data,textStatus,jqXHR)][,dataType]) :
• 使用Http Get request從伺服器載入Js檔案
• jQuery.post(url[,data][,success(data,textStatus,jqXHR)][,dataType]) :
• 使用Http Post request從伺服器載入資料
• jQuery.load(url[,data][,complete(reponseText,textStatus,XMLHttpRequest)])
• 從伺服器取得Html資料,並將其放置到匹配的元素中

jQuery Promise Object
• 自jQuery 1.5版之後,$.ajax()回傳的物件jqXHR實做了
CommonJs Promises/A Interface,因此,具有Promise Object的特性。
• Promise Object解決了過去ajax回傳物件僅能註冊單一事件的不方便。
• 範例:
var promise = $.ajax({url: "/MyUrl"});
promise.done(func1); promise.done(func2);
promise.fail(func3); promise.fail(func4);

Promise Object的優點
• 可以註冊多個Function到 done()和fail()。
• 即便Ajax呼叫已經結束,仍是可以呼叫 done()和fail()。
• 待兩個promise物件執行完畢後,執行done()或fail()。
• var promise1 = $.ajax("/myUrl1");
var promise2 = $.ajax("/MyUrl2");
$.when(promise1, promise2).done(response1, response2) { //執行邏輯});
• jQuery 1.8版後,可以使用then(func)串接。(註:某一個串接的函數發生錯誤時,
並不會執行fail())

Deferred Object
• 具有三種狀態:
• Pending :Operation處理中
• Resolve :Operation處理成功
• Reject :Operation處理失敗
Deferred Object會依照自己的狀態去執行相對應的註冊方法。
• 開發人員可以藉由Deferred Object開發自己的Promise Object。

Deferred Object範例
• function wait() {
var deferred = $.Deferred();
setTimeout(function() {deferred.resolve();},2000);
return deferred.promise();
}
var promise = wait();
promise.done(function() { alert("hello");});

KnockOut
• Knockouth採用MVVM的開發模式。

Knockout ViewModel
• function MyViewModel(){
var self = this;
self.firstName = ko.observable("Arthur");
self.lastName = ko.observable("Chang");
self.fullName = ko.computed(function() {
return self.firstName() + " " + self.lastName();
})
}
$(function() {
ko.applyBindings(new MyViewModel());
});

Knockout的Html綁定標籤
<tbody data-bind="foreach: users">
<tr>
<td><span data-bind="text: id"></span></td>
<td><span data-bind="text: name"></span></td>
<td><span data-bind="text: score"></span></td>
<td><a href="#" data-bind="click: $root.removeUser">移除</a></td>
</tr>
</tbody>

綁定標籤
文字與顯示
標籤
visible <div data-bind="visible: showMsg">~</div> 關聯DOM元素是否顯示
text <span data-bind=“text: myMsg"></span> 顯示字串,常用於span和em
html <div data-bind="html: details"></div> details本身為html字串
css <div data-bind="css: {btn: height()>0}/></div> 設定元素css的class
style <div data-bind=“color: current()>0? red:’black’ "> 設定css的樣式
attr <div data-bind=“attr:{href: url} "></div> 設定Html元素屬性

綁定標籤
事件
click <button data-bind=“click: add”> 設定button的click事件
event <div data-bind=“event: {mouseover: move}”/> 註冊mouseover事件
submit <form data-bind=“submit: doSomething”> 註冊submit事件
hasfocus <input data-bind=“hasfocus: func” /> 註冊focus事件
checked <input type=“checkbox” data-bind=“checked: func”> 註冊check事件

Knockout與jQuery Ajax配合
Html內容:

Twitter Bootstrap
• 是一種Front-End的框架。
• 結合常用Html+CSS+JavaScript提供給開發人員快速開發前端頁面。
• 跨平臺,且支援Responsible Web Design。

ASP.Net MVC Framework

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to ASP.Net MVC Framework

Similar to ASP.Net MVC Framework (20)

More from 國昭張

More from 國昭張 (20)