2016年逢甲大學資訊系:asp.net mvc 4 教育訓練4
TRANSCRIPT
ASP.NET MVC 4 WEB課程
時間:2015/3/26報告者:賴怡君
大綱
•MVC架構介紹
•快速建立MVC專案
•Visual Studio環境認識與操作
2
推薦書籍與網站
•ASP.net MVC 5 網站開發美學
•MSDN
–http://www.microsoft.com/taiwan/msdn/aspdotnet/mvc/learn/
•MVA
–http://www.microsoftvirtualacademy.com/
3
MVC架構介紹(1)
• 表示一種軟體架構模式，把系統分成三個種核心: – Model
– View
– Controller
• 目的：– 各種元件處理不同的工作。
– 對程式的修改和擴充功能簡化。
– 增加程式可用性
4
MVC架構介紹(2)
5
MVC架構介紹(3)
6
MVC架構介紹(4)
表單
資料庫
送出 儲存資料
網頁
讀取資料顯示
ModelController
MVC架構介紹(5)
• 優點：– 使程式結構更加直覺– 增加程式可用性– 程式方便管理– 程式擴充性高– 有例於團隊開發
• 缺點：– 不適用於小型專案– 管理文件增加– 嚴謹的系統架構與規劃– 需要重覆的測試
8
MVC架構介紹(6)
•View
–視圖，包含畫面、顯示的邏輯
9
MVC架構介紹(7)
•Controller
–處理和回應使用者輸入和互動
–控制程式流程
10
MVC架構介紹(8)
•Model
–資料傳輸物件
–實作商業邏輯
–資料庫進行操作
11
MVC架構介紹(9)
•MVC(Model View Controller)
12
Model
View Controller
重
笨
輕
MVC架構介紹(9)
– MVC工作分配
–讓不同工作的人員專注於自己的工作
–Controller：專注於使用者互動、流程控制
–View：專注於資料顯示、UI設計與美工
–Model：專注於資料庫管理、商業邏輯撰寫
13
MVC架構介紹(10)
–分層架構
–專案維護性提高
–簡化程式碼
–提高程式碼可用性
–路由資源豐富
14
Visual studio
• 下載位置
– https://www.visualstudio.com/en-
us/products/visual-studio-express-vs.aspx
– https://www.dreamspark.com/ (Dreamspark)
15
快速建立MVC專案(1)
16
Step 1 ：點選Visual Studio 2013
快速建立MVC專案(2)
17
Step 1 ：檔案 / 新增專案
快速建立MVC專案(3)
18
Step 2：已安裝的 / 範本 / Visual C#
/ Web / ASP.NET MVC 4 WEB 應用程式
快速建立MVC專案(4)
19
Step 3 ：選取網際網路應用程式
快速建立MVC專案(5)
20
Step 4.檔案結構
App_Data: 自定設定檔
App_Start: MVC設定檔
Content : css
Controllers
Models
Scripts: JavaScript
Views
快速建立MVC專案(6)
– MVC開發配置
–避免程式碼混亂
–程式碼位置管理
–命名規則
–以習慣代替配置
21
Controller與View
22
練習
• 新增一個說明頁面
1. 在HomeController中新增一個Desc Action
2. 新增一個Desc檢視
3. 執行程式
4. 於網址列後端輸入/Home/Desc
23
練習步驟
• 在HomeController中新增一個Desc Action
24
練習步驟
• 新增一個Desc檢視
25
26
Controller Action
27
Request Controller
View
Model
Response
ActionResult
型別 說明 方法
ViewResult 回傳View View
PartialViewResult 回傳Partial View PartialView
ContentResult 回傳文字 Content
EmptyResult 回傳空
FileResult 回傳檔案 File
JsonResult 回傳Json格式資料 Json
RedirectResult 導向另一個Url Redirect
RedirectPermanent
RedirectToRouteResult 導向另一個Action RedirectToAction
RedirectToActionPermanent
RedirectToRoute
RedirectToRoutePermanent
28
ActionResult
型別 說明 方法
JavaScriptResult 回傳一段JavaScript JavaScript
HttpUnauthorizedResult 回傳HTTP 401(未授權)
HttpNotFoundResult 回傳HTTP 404(找不到檔案) HttpNotFound
HttpStatusCodeResult 回傳指定的HTTP代碼
29
練習
• 使用下列方式練習各種ActionResult
–於Desc中修改
30
型別 使用方法 練習項目
ViewResult View 導至Contact view
ContentResult Content 回傳”Hello World”文字
EmptyResult
FileResult File 回傳任一檔案
RedirectResult Redirect 導至逢甲首頁(www.fcu.edu.tw)
RedirectToRouteResult RedirectToAction 導至Contact action
Controller與View
31
呈現內容
共用內容
Controller與View
32
3.呈現內容
2.整體版面
1.View起點
Controller與View
33
導覽列
網頁內容
footer
Controller與View
34
Header
Footer
Menu
Or
SideBar
Content
• 整體版面• 1.Header
• 2.Menu
• 3.Content(變動)
• 4.Footer
Controller與View
• RenderSection
–保留區塊，用來作為選單或側欄
(共用)
• RenderBody
–呈現內容
35
版面配置
Controller與View
36
Controller (路由決定呈現內容的View)
_ViewStart.cshtml (決定整體版面)
_Layout.cshtml ( RenderBody區塊呈現內容)
Index.cshtml (呈現內容)
資料傳遞方式
• 從Controller傳到View
1. ViewData
–只存在於一個頁面
2. ViewBag
–使用dynamic 型別，用法同ViewData
3. TempData
–可以跨Action使用
4. ViewModel (下周內容)
37
資料傳遞方式
• ViewData
–只存在於一個頁面
–使用key-value方式
– Controller使用方法
• ViewData[“message”] = “我的訊息";
– View使用方法
• @ViewData[“message”]
38
資料傳遞方式
• ViewBag
–只存在於一個頁面
–使用dynamic型別
– Controller使用方法
• ViewBag.message = “我的訊息";
– View使用方法
• @ViewBag.message
39
資料傳遞方式
• TempData
–只存在於一個Request
–可以跨Action使用
– Controller使用方法
• TempData[“message”] = “我的訊息";
– View使用方法
• @TempData[“message”]
40
資料傳遞方式
• 從View傳到Controller
1. 參數傳遞
2. ViewModel (下周內容)
41
練習
• 使用參數將View內容傳到Controller
–於View內新增一個表單
–定義Action input參數內容
• 參數名稱必須與View的input name一致
42
練習
• 於View內新增一個表單
• 定義Action input參數內容
43
@using (Html.BeginForm("GoDesc","Home")){
<input type="text" name="name" /><input type="submit" value="submit" />
}
public ActionResult GoDesc(string name){
TempData["message"] = "我是" + name;return RedirectToAction("Contact");
}
