ASP.NET MVC 4 WEB 課程

時間 :2015/4/30報告者 : 賴怡君

2

講師資料 (I)

姓 名 謝政廷 (Duran) 職 稱 高級工程師

部 門 凌網科技 智慧科技發展事業處

學 歷 逢甲大學資訊工程所 碩士

工作總年資 3 年

專 長 程式開發

認 證Oracle Certified Professional, Java SE 6 Programmer

Programming in HTML5 with JavaScript and CSS3 Specialist

3

講師資料 (II)

姓 名 賴怡君 (Ina) 職 稱 工程師

部 門 凌網科技 智慧科技發展事業處

學 歷 逢甲大學資訊工程所 碩士

工作總年資 5 年

專 長 程式開發

認 證The Sun Certified Java Programmer 5

Programming in HTML5 with JavaScript and CSS3 Specialist

4

課程大綱• MVC 架構介紹 (3/26)• Controller, Model(4/9)• View, CSS, JavaScript(4/23)• Database, Linq, Entity Framework(4/30)• 其他 (IIS 設定 , 工具使用 )(5/7)

5

大綱

• 上週實作 ( 續 )• Linq• IIS 設定• Entity Framework

6

View (1)• 新增檢視一 ( 從檔案目錄新增檢視 )

– 對 View 資料夾 ( 或內部資料夾 ) 點選右鍵 -> 加入 -> 檢視

7

View (2)• 新增檢視二 ( 從 Controller 加入 view)

– 在 Controller 中的 Action 中點選右鍵– 選擇加入檢視

8

View (3)• 新增檢視 ( 設定 )

– 輸入名稱– 選擇檢視引擎– 選擇型別類型– 選擇建立部分檢視– 選擇主版– 點選加入完成檢視

9

View (4)• Razor

– 更輕量化且直覺的語法，減少在 View 中輸出資料時使用的語法，讓 View 的指令更加簡潔，

– 例如使用 "@" + 變數名稱 的方式，就可以輸出程式中的變數，不必再用 <% %> 來設定。如果程式有多行，可以使用 @{ } 的方式來設定。

– 容易學習。– 可相容於現在的程式語言 (ex: C#) 。– 透過 Visual Studio ，可享有 Intellisense 能力。– 可混用 HTML 與程式語言指令。

• Razor 基本語法– 註解方法 @* *@– 程式區塊 @{ }@– 取得變數與內容 @ViewBag.Title

10

View (5)

11

View (6)• 引入檔案

– Url.Content()– 相對路徑轉絕對路徑– 能用於引入 js 、影像檔案、音樂檔案… etc

– <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")"></script>

– background-image: url('@Url.Content("~/Content/Images/seizurerobots.gif")');

12

View (7)• 導引換頁：

– @Html.ActionLink(“ 名稱 ", “action", “controller")• 超連結• 參數一：顯示名稱• 參數二： action• 參數三： controller

13

View(8)– @Url.Action(“action”,”controller”)

• 參數一： action• 參數二： controller• 導向位置，可用於 Button• <input type="button" value=" 重新填寫 "

onclick="javascript:window.location='@Url.Action(“modify", “profile")'" />

14

View(9)• 部份檢視 (partial view)

15

View(10)• 部份檢視 (partial view)

16

實作• 從 Controller 建立 View• 使用 ActionLink 建立連結• 使用 Url.Action 建立連結

17

資料傳遞方法 (1)• ViewData• ViewBag• TempData• ViewModel

18

資料傳遞方法 (2)

Controller加入

ViewBag.message=“message test”

View加入

@ViewBag.message

19

實作• 練習 ViewBag

20

Helper - 表單 (1)• 表單 (form)

21

Helper - 表單 (2)• 表單 (form)

22

Helper - 表單 (3)

• @using (Html.BeginForm("Index", “Student", FormMethod.Post, new { enctype = "multipart/form-data" , id="CityId" })){ }

• 四個參數： Action , Controller , Form Method , 其他屬性

Action Controller

Method(Get or Post)Other Attribute

23

Helper - 表單 (4)• @using (Html.BeginForm(“Create", “Student",

FormMethod.Post, new { enctype = "multipart/form-data" , id="CityId" })) { }

• <form action="/Student/Create" enctype="multipart/form-data" id="CityId" method="post">

24

Helper - 表單 (5)• 加入送出按鈕

– <input type="submit" value="Create" />

Controller 裡的 Create Action

25

Helper - 表單 (6)• @using (Html.BeginForm(“Create", “Student",

FormMethod.Post, new { enctype = "multipart/form-data" , id="CityId" })) { }

26

Helper - 表單 (7)• 一般使用方法

– @Html.TextBox("name","1")

– <input id="name" name="name" type="text" value="1">

Helper - 表單 (8)• 一般使用方法

– @Html.TextBox("name", "1", new { Style="color:red;" })

– <input id="name" name="name" type="text" value="1" style="color:red;">

27

NAME VALUE Other attribute

28

Helper - 表單 (9)• 一般使用方法

– @Html.TextBox("name", "1", new { Style="color:red;" })

29

Helper - 表單 (10)• 一般使用方法

– <input id="name" name="name" type="text" value="1">

30

Helper - 表單 (11)• ViewModel 綁定

– @model WebApplication2.Models.Student

– @Html.TextAreaFor(model => model.ID)

– <input class="text-box single-line" id="ID" name="ID" type="text" value="">

31

Helper - 表單 (12)• ViewModel 綁定

@model WebApplication2.Models.Student

@Html.TextBoxFor(model => model.ID)

32

Helper – 表單欄位製作 (1)• TextBox & TextArea

– Html.TextBox("Textbox")– Html.TextAreaFor(model => model.textbox)

– Html.TextArea("TextArea")– Html.TextAreaFor(model => model.textArea)

33

Helper – 其他表單欄位製作 (2)

• Hidden– Html.Hidden(“Hidden")– Html.HiddenFor(model => model. Hidden)

34

Helper – 其他表單欄位製作(3)

• Password– Html.Password(" Html.Password ")– Html.PasswordFor(model =>

model.Password)

35

Helper – 其他表單欄位製作 (4)

• RadioButton– Html.RadioButton("RadioButton", 3)– Html.RadioButton(model =>

model.RadioButton, 3)

36

Helper – 其他表單欄位製作 (5)

• CheckBox– Html.CheckBox("CheckBox1")– Html.CheckBoxFor(“model =>

model.CheckBox1")

37

Helper – 其他表單欄位製作 (6)

• Dropdownlist

38

Helper – 其他表單欄位製作(7)

• Dropdownlist

39

實作• 使用 Html BeginForm 建立簡單表單• 練習使用 html helper ，配合 ViewModel 建

立強型別表單

40

IIS(1)• 網 際 網 路 資 訊 服 務 (Internet Information

Services,IIS)– 具有彈性、安全且容易管理的網頁伺服器。

41

IIS(2)

42

IIS(3)

IIS安裝1. 控制台 -> 程式集

43

IIS(4)

IIS安裝2. 開啟或關閉Windows 功能

44

IIS(5)

IIS安裝3. 勾選安裝套件

45

IIS(6)

IIS安裝4. 安裝5. 完成安裝

46

IIS(7)• 使用 Visual Studio 2010 進行專案發佈

47

IIS(8)

48

IIS(9)• Web Deploy 、 WebDeploy 、 FTP

、檔案系統

49

IIS(10)

50

IIS(11)

51

IIS(12)

52

IIS(13)

53

IIS(14)

54

IIS(15)

55

IIS(16)

56

IIS(17)

57

Entity Framework (1)• 物件關連對應 (Object Relational Mapping,ORM)

– 將不同資料轉換成 物件導向的技術

58

Entity Framework (2)• ADO

59

Entity Framework (3)• ORM

60

Entity Framework (2)• Database First• Model First• Code First

61

Entity Framework (3)• 利用資料庫產生模組

62

Entity Framework (4)• 利用資料庫產生模組

63

Entity Framework (5)

64

Entity Framework (6)

65

Entity Framework (7)

66

Entity Framework (8)

67

Entity Framework (9)• 利用模組直接產生相對應的

Controller 、 View 與 Model– DEMO ：