Upload
duran-hsieh
View
222
Download
9
Embed Size (px)
Citation preview
推薦書籍與網站
•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架構介紹(5)
• 優點:– 使程式結構更加直覺– 增加程式可用性– 程式方便管理– 程式擴充性高– 有例於團隊開發
• 缺點:– 不適用於小型專案– 管理文件增加– 嚴謹的系統架構與規劃– 需要重覆的測試
8
MVC架構介紹(9)
– MVC工作分配
–讓不同工作的人員專注於自己的工作
–Controller:專注於使用者互動、流程控制
–View:專注於資料顯示、UI設計與美工
–Model:專注於資料庫管理、商業邏輯撰寫
13
Visual studio
• 下載位置
– https://www.visualstudio.com/en-
us/products/visual-studio-express-vs.aspx
– https://www.dreamspark.com/ (Dreamspark)
15
快速建立MVC專案(5)
20
Step 4.檔案結構
App_Data: 自定設定檔
App_Start: MVC設定檔
Content : css
Controllers
Models
Scripts: JavaScript
Views
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
34
Header
Footer
Menu
Or
SideBar
Content
• 整體版面• 1.Header
• 2.Menu
• 3.Content(變動)
• 4.Footer
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內新增一個表單
• 定義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");
}