Short-term Training Course For Beginners in Feng Chia University Including: Web Applicatiion, ASP .Net C# MVC 4 ,Database , IIS

1. ASP.NET MVC 4 WEB課程
時間:2015/4/23
報告者:謝政廷

2. 講師資料(I)
2
姓 名 謝政廷(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
3

4. 專案經歷
4
• 台灣自來水股份有限公司---台灣自來水103年用戶
新改裝工程管理系統委外建置案
• 行政院勞工委員會中部辦公室---技能職類測驗能力
認證資訊系統建置及維護
• 台灣自來水股份有限公司---台灣自來水102年用戶
新改裝工程管理系統委外建置案
• 國家實驗研究院國家災害防救科技中心---災害事件
簿查詢展示系統
• 宜誠資訊---國防部史政編譯室史料與軍書影像委外
建置
• 國立政治大學---政大數典101年擴充案
• 國家圖書館---國家圖書館「臺灣學術網路資源選介
主題資料庫」建置案
• 入出國與移民署---行動查緝服務建置案

5. 推薦書籍與網站
•ASP.net MVC 4 (保哥)
–http://blog.miniasp.com/post/2012/12/29/My-
ASPNET-MVC-4-book-was-published-on-December-
20th-2012.aspx
•ASP.NET MVC 5：網站開發美學
–http://www.books.com.tw/products/0010647207
•MSDN
–http://www.microsoft.com/taiwan/msdn/aspdot
net/mvc/learn/
5

6. 大綱
• 作業題目說明
• C# 語言簡介
• MVC專案複習
– 快速建立MVC專案
– Controller與View
– DEBUG簡介
• Model介紹
– 實際操作
6

7. 作業題目(1/2)
• 請建立一個具有新增、修改、刪除功能的
表單(90分)
– 使用DisplayAttribute顯示輸入框標題(+10分)
– 使用DataTypeAttribute改變輸入型態(+10分)
– 使用Validation驗證表單 (+10分)
– 使用Javascript驗證表單 (+10分)
– 使用Css修改表單樣式(+10分)
– 增加查詢功能(+10分)
7

8. 作業題目(2/2)
– 銜接資料庫進行CRUD動作(+20分)
– 其他功能(*)
• 基本功能在課堂有範例
– 強調實作
– 想做什麼? 如何實現?
8

9. C# 語言簡介
9

10. C# 語言簡介(1)
•註解
•類型
•陣列
•字串
•陳述式、運算式和運算子
•類別和結構
•屬性
•介面
•命名空間
10資料來源:http://msdn.microsoft.com/zh-tw/library/67ef8sbd.aspx

11. C# 語言簡介(2)
•索引子
•列舉類型
•委派
•泛型
11資料來源:http://msdn.microsoft.com/zh-tw/library/67ef8sbd.aspx

12. C# 語言簡介(3)
•註解:
12

13. C# 語言簡介(4)
•類型
13

14. C# 語言簡介(5)
•陣列
14

15. C# 語言簡介(6)
•字串
15

16. C# 語言簡介(7)
•陳述式、運算式和運算子
16

17. C# 語言簡介(8)
•陳述式、運算式和運算子
17

18. C# 語言簡介(9)
•陳述式、運算式和運算子
18

19. C# 語言簡介(10)
•類別和結構
19

20. C# 語言簡介(11)
•屬性
20
class TimePeriod
{
private double seconds;
private string name = “Hello”;
public double Hours
{
get { return seconds / 3600; }
set { seconds = value * 3600; }
}
public string Name
{
get { return name; }
protected set { name = value}
}
}
TimePeriod t = new TimePeriod();
t.Hours = 24;

21. C# 語言簡介(12)
•介面
21
interface IEquatable<T>
{
bool Equals(T obj);
}
public class Car : IEquatable<Car>
{
public string Make { get; set;}
public string Model { get; set; }
public string Year { get; set; }
// Implementation of IEquatable<T> interface
public bool Equals(Car car)
{
if (this.Make == car.Make
&& this.Model == car.Model
&& this.Year == car.Year)
{
return true;
}
else
return false;
}
}
IEquatable
Car

22. C# 語言簡介(13)
•命名空間
22
using System
namespace Sample.Namespace
{
class SampleClass
{
public void SampleMethod()
{
System.Console.WriteLine( “Hello");
}
}
}
用於組織大型的程式碼專案
以 . 分隔

23. C# 語言簡介(14)
•索引子
23

24. C# 語言簡介(15)
•列舉類型
24

25. C# 語言簡介(16)
•委派
25

26. C# 語言簡介(17)
•泛型
26

27. 練習
• 使用applacation模式練習與法
• Console.WriteLine(“message");
• Ctrl + F5啟動
27

28. MVC專案複習
28

29. MVC架構介紹
•MVC(Model View Controller)
29
Model
View Controller
重
笨
輕

30. MVC架構介紹
30
Request Controller
View
Model
Response

31. 快速建立MVC專案(1)
31
Step 1 ：
點選Visual Studio 2013

32. 快速建立MVC專案(2)
32
Step 1 ：檔案 / 新增專案

33. 快速建立MVC專案(3)
33
Step 2：已安裝的 / 範本 / Visual C#
/ Web / ASP.NET MVC 4 WEB 應用程式

34. 快速建立MVC專案(4)
34
Step 3 ：選取網際網路應用程式

35. Controller與View
35

36. Controller與View
36
表單呈現
表單處理

37. Controller與View
37
呈現內容
共用內容

38. Controller與View
38
3.呈現內容
2.整體版面
1.View起點

39. Controller與View
• 何謂整體版面?
39
導覽列
網頁內容
footer

40. Controller與View
40
導覽列
網頁內容
footer

41. Controller與View
41
Header
Footer
Menu
Or
SideBar
Content
• 整體版面
• 1.Header
• 2.Menu
• 3.Content(變動)
• 4.Footer

42. Controller與View
• RenderSection
– 保留區塊，用來
作為選單或側欄
(共用)
• RenderBody
– 呈現內容
42
版面配置

43. Controller與View
43
Controller (路由決定呈現內容的View)
_ViewStart.cshtml (決定整體版面)
_Layout.cshtml ( RenderBody區塊呈現內容)
Index.cshtml (呈現內容)

44. DEBUG
• 設定中斷點方式，一行一行追蹤問題
– 設定中斷點
– 追蹤程式流程
• 優點
– 快速追蹤問題點
– 查詢物件資料
44

45. Model介紹
45

46. Model介紹
• 何謂Model
– (廣義)Controller與View以外的就是Model
46
資料呈現
(ViewModel)
邏輯運算
(Logic)
資料庫操作
(ORM)

47. Controller、View與Model
47
Controller (決定帶入的Model)
_ViewStart.cshtml
_Layout.cshtml
Index.cshtml (呈現內容)
Model
Model
Model
Model
資料呈現
(ViewModel)

48. Model與View
48
@model WebApplication2.Models.Student
<dl class="dl-horizontal">
<dt>
@Html.DisplayNameFor(model => model.NAME)
</dt>
<dd>
@Html.DisplayFor(model => model.NAME)
</dd>
</dl>
Razor

49. Controller、View與Model
49
Controller
_ViewStart.cshtml
_Layout.cshtml
Index.cshtml
邏輯運算
(Logic)
Model
Request
(Service or method)

50. Controller、View與Model
50
Controller
_ViewStart.cshtml
_Layout.cshtml
Index.cshtml
資料庫操作
(ORM)
Model
Request
Database
將資料庫結構(Schema)
轉換成
Model直接進行操作

51. 如何設計一個Model
51

52. The Answer is …
52
要什麼資料就
怎麼設計

53. 以學生綜合資料卡為例(ViewModel)
53
1.學號
2.姓名
3.班級
4.通訊地址
5.電子信箱
6.連絡電話
I need…

54. 建立Model
54
public class Student
{
public string ID { get; set; }
public string NAME { get; set; }
public string CLASSROOM { get; set; }
public string ADDRESS { get; set; }
public string EMAIL { get; set; }
public string TEL { get; set; }
}
1.學號(ID)
2.姓名(NAME)
3.班級(CLASSROOM)
4.通訊地址
(ADDRESS)
5.電子信箱(EMAIL)
6.連絡電話(TEL)
攻城屍

55. 55
標
題
….
攻城屍

56. 加入Display
56
1.學號(ID)
2.姓名(NAME)
3.班級
(CLASSROOM)
4.通訊地址
(ADDRESS)
5.電子信箱(EMAIL)
6.連絡電話(TEL)
我是說中文阿…
攻城屍
public class Student
{
[DisplayName("學號")]
public string ID { get; set; }
[DisplayName("姓名")]
public string NAME { get; set; }
[DisplayName("班級")]
public string CLASSROOM { get; set; }
[DisplayName("通訊地址")]
public string ADDRESS { get; set; }
[DisplayName("電子信箱")]
public string EMAIL { get; set; }
[DisplayName("連絡電話")]
public string TEL { get; set; }
}

57. 57
姓名要必填啊!!
電子信箱怎麼可以沒有@
連絡電話只填數字
攻城屍

58. 加入驗證
58
姓名要必填
電子信箱驗證
連絡電話用正規
表達式
攻城屍
public class Student
{
[DisplayName("學號")]
public string ID { get; set; }
[DisplayName("姓名")]
[Required]
public string NAME { get; set; }
[DisplayName("班級")]
public string CLASSROOM { get; set; }
[DisplayName("通訊地址")]
public string ADDRESS { get; set; }
[DisplayName("電子信箱")]
[EmailAddress]
public string EMAIL { get; set; }
[DisplayName("連絡電話")]
[RegularExpression(@"^[0-9]*$")]
public string TEL { get; set; }
}

59. What is Model ?
59
Model
View Controller
重
笨
輕

60. 表單應用
表單 輸入邏輯程式
資料庫
送出
儲存資料
輸出邏輯程式
應用程式
網頁
讀取資料
顯示
Controller

61. 表單應用
表單 輸入邏輯程式
資料庫
送出
儲存資料
輸出邏輯程式
應用程式
網頁
讀取資料
顯示
Controller

62. Model
• Available Attributes
– DataTypeAttribute
– DisplayAttribute
– Validation
• RequiredAttribute
• StringLengthAttribute
• RegularExpressionAttribute
• CompareAttribute
62

63. 實作
63

64. 實作
64

65. • 貼上內容
65
using System.ComponentModel.DataAnnotations;
namespace WebApplication2.Models
{
public class Student
{
public string ID { get; set; }
public string NAME { get; set; }
public string CLASSROOM { get; set; }
public string ADDRESS { get; set; }
public string EMAIL { get; set; }
public string TEL { get; set; }
}
}

66. 實作
• 建置專案
66

67. 實作
• 增加Controller
67

68. 實作(舊版畫面)
68

69. 實作(新版畫面)
69

70. 實作
70

71. 實作
• 建立成功後，執行程式
• 路由改為/Student
• 觀看Views-> Student資料夾中:
– Index.cshtml
– Create.cshtml
– …
• 依據上課內容，增加annotation後，觀看
表單效果
71