(Fcu2)mvc 4 net 教育訓練3 v2
72
ASP.NET MVC 4 WEB 課課 課課 :2015/4/23 課課課 : 課課課
-
Upload
duran-hsieh -
Category
Education
-
view
24 -
download
6
Transcript of (Fcu2)mvc 4 net 教育訓練3 v2
ASP.NET MVC 4 WEB 課程
時間 :2015/4/23報告者 : 謝政廷
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
專案經歷• 台灣自來水股份有限公司 ---台灣自來水 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/aspdotnet/mvc/learn/
6
大綱• 作業題目說明• C# 語言簡介• MVC 專案複習
– 快速建立 MVC 專案– Controller 與 View– DEBUG 簡介
• Model 介紹– 實際操作
7
作業題目 (1/2)• 請建立一個具有新增、修改、刪除功能的
表單 (90 分 )– 使用 DisplayAttribute 顯示輸入框標題 (+10
分 )– 使用 DataTypeAttribute 改變輸入型態 (+10
分 )– 使用 Validation 驗證表單 (+10 分 )– 使用 Javascript 驗證表單 (+10 分 )– 使用 Css 修改表單樣式 (+10 分 )– 增加查詢功能 (+10 分 )
8
作業題目 (2/2)– 銜接資料庫進行 CRUD 動作 (+20 分 )– 其他功能 (*)
• 基本功能在課堂有範例– 強調實作– 想做什麼 ? 如何實現 ?
9
C# 語言簡介
10
C# 語言簡介 (1)
• 註解• 類型• 陣列• 字串• 陳述式、運算式和運算子• 類別和結構 • 屬性• 介面• 命名空間
資料來源 :http://msdn.microsoft.com/zh-tw/library/67ef8sbd.aspx
11
C# 語言簡介 (2)
• 索引子• 列舉類型• 委派• 泛型
資料來源 :http://msdn.microsoft.com/zh-tw/library/67ef8sbd.aspx
12
C# 語言簡介 (3)
• 註解 :
13
C# 語言簡介 (4)
• 類型
14
C# 語言簡介 (5)
• 陣列
15
C# 語言簡介 (6)
• 字串
16
C# 語言簡介 (7)
• 陳述式、運算式和運算子
17
C# 語言簡介 (8)
• 陳述式、運算式和運算子
18
C# 語言簡介 (9)
• 陳述式、運算式和運算子
19
C# 語言簡介 (10)
• 類別和結構
20
C# 語言簡介 (11)• 屬性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)• 介面
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)• 命名空間
using System
namespace Sample.Namespace { class SampleClass { public void SampleMethod() { System.Console.WriteLine( “Hello"); } } }
用於組織大型的程式碼專案以 . 分隔
23
C# 語言簡介 (14)• 索引子
24
C# 語言簡介 (15)• 列舉類型
25
C# 語言簡介 (16)• 委派
26
C# 語言簡介 (17)• 泛型
27
練習• 使用 applacation 模式練習與法• Console.WriteLine(“message");• Ctrl + F5 啟動
28
MVC專案複習
29
MVC 架構介紹• MVC(Model View Controller)
Model
View Controller
重
笨
輕
30
MVC 架構介紹
Request Controller
View
Model
Response
31
快速建立 MVC 專案 (1)
Step 1 ：點選 Visual Studio 2013
32
快速建立 MVC 專案 (2)
Step 1 ：檔案 / 新增專案
33
快速建立 MVC 專案 (3)Step 2 ：已安裝的 / 範本 / Visual C# / Web / ASP.NET MVC 4 WEB 應用程式
34
快速建立 MVC 專案 (4)
Step 3 ：選取網際網路應用程式
35
Controller與 View
36
Controller與 View
表單呈現
表單處理
37
Controller與 View
呈現內容
共用內容
38
Controller與 View
3. 呈現內容
2. 整體版面
1.View 起點
39
Controller與 View• 何謂整體版面 ?
導覽列
網頁內容
footer
40
Controller與 View
導覽列
網頁內容
footer
41
Controller與 View
Header
Footer
MenuOr
SideBar Content
• 整體版面• 1.Header• 2.Menu• 3.Content( 變動 )• 4.Footer
42
Controller與 View• RenderSection
– 保留區塊，用來作為選單或側欄
( 共用 )• RenderBody
– 呈現內容
版面配置
43
Controller與 View
Controller ( 路由決定呈現內容的 View)
_ViewStart.cshtml ( 決定整體版面 )
_Layout.cshtml ( RenderBody 區塊呈現內容 )
Index.cshtml ( 呈現內容 )
44
DEBUG• 設定中斷點方式，一行一行追蹤問題
– 設定中斷點– 追蹤程式流程
• 優點– 快速追蹤問題點– 查詢物件資料
45
Model介紹
46
Model介紹• 何謂 Model
– ( 廣義 )Controller 與 View 以外的就是 Model
資料呈現(ViewModel)
邏輯運算(Logic)
資料庫操作(ORM)
47
Controller、 View與Model
Controller ( 決定帶入的 Model)
_ViewStart.cshtml
_Layout.cshtml
Index.cshtml ( 呈現內容 )
Model
Model
Model
Model
資料呈現(ViewModel)
48
Model與 View@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
Controller
_ViewStart.cshtml
_Layout.cshtml
Index.cshtml
邏輯運算(Logic)
Model
Request
(Service or method)
50
Controller、 View與Model
Controller
_ViewStart.cshtml
_Layout.cshtml
Index.cshtml
資料庫操作(ORM)
Model
Request
Database
將資料庫結構 (Schema)轉換成
Model 直接進行操作
51
如何設計一個Model
52
The Answer is …
!要什麼資料就
怎麼設計
53
以學生綜合資料卡為例 (ViewModel)
1. 學號2. 姓名3. 班級4. 通訊地址5. 電子信箱6. 連絡電話
I need…
54
建立Modelpublic 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
標題…
.
攻城屍
56
加入Display1. 學號 (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
姓名要必填啊 !!
電子信箱怎麼可以沒有@
連絡電話只填數字
攻城屍
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 ?
Model
View Controller
重
笨
輕
表單應用
表單 輸入邏輯程式
資料庫
送出
儲存資料
輸出邏輯程式
應用程式
網頁讀取資料
顯示
Controller
表單應用
表單 輸入邏輯程式
資料庫
送出
儲存資料
輸出邏輯程式
應用程式
網頁讀取資料
顯示
Controller
62
Model• Available Attributes
– DataTypeAttribute– DisplayAttribute– Validation
• RequiredAttribute• StringLengthAttribute• RegularExpressionAttribute• CompareAttribute
63
實作
64
實作
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
實作• 建置專案
67
實作• 增加 Controller
68
實作 (舊版畫面 )
69
實作 (新版畫面 )
70
實作
71
實作• 建立成功後，執行程式• 路由改為 /Student• 觀看 Views-> Student 資料夾中 :
– Index.cshtml– Create.cshtml– …
• 依據上課內容，增加 annotation 後，觀看表單效果
