ASP.NET MVC 4 WEB課程
時間:2015/4/23
報告者:謝政廷
講師資料(I)
2
姓 名 謝政廷(Duran) 職 稱 高級工程師
部 門 凌網科技 智慧科技發展事業處
學 歷 逢甲大學資訊工程所 碩士
工作總年資 3年
專 長 程式開發
認 證 Oracle Certified Professional, Java SE 6 Programmer
Programming in HTML5 with JavaScript and CSS3 Specialist
講師資料(II)
姓 名 賴怡君(Ina) 職 稱 工程師
部 門 凌網科技 智慧科技發展事業處
學 歷 逢甲大學資訊工程所 碩士
工作總年資 5年
專 長 程式開發
認 證 The Sun Certified Java Programmer 5
Programming in HTML5 with JavaScript and CSS3 Specialist
3
專案經歷
4
• 台灣自來水股份有限公司---台灣自來水103年用戶
新改裝工程管理系統委外建置案
• 行政院勞工委員會中部辦公室---技能職類測驗能力
認證資訊系統建置及維護
• 台灣自來水股份有限公司---台灣自來水102年用戶
新改裝工程管理系統委外建置案
• 國家實驗研究院國家災害防救科技中心---災害事件
簿查詢展示系統
• 宜誠資訊---國防部史政編譯室史料與軍書影像委外
建置
• 國立政治大學---政大數典101年擴充案
• 國家圖書館---國家圖書館「臺灣學術網路資源選介
主題資料庫」建置案
• 入出國與移民署---行動查緝服務建置案
推薦書籍與網站
•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
大綱
• 作業題目說明
• C# 語言簡介
• MVC專案複習
– 快速建立MVC專案
– Controller與View
– DEBUG簡介
• Model介紹
– 實際操作
6
作業題目(1/2)
• 請建立一個具有新增、修改、刪除功能的
表單(90分)
– 使用DisplayAttribute顯示輸入框標題(+10分)
– 使用DataTypeAttribute改變輸入型態(+10分)
– 使用Validation驗證表單 (+10分)
– 使用Javascript驗證表單 (+10分)
– 使用Css修改表單樣式(+10分)
– 增加查詢功能(+10分)
7
作業題目(2/2)
– 銜接資料庫進行CRUD動作(+20分)
– 其他功能(*)
• 基本功能在課堂有範例
– 強調實作
– 想做什麼? 如何實現?
8
C# 語言簡介
9
C# 語言簡介(1)
•註解
•類型
•陣列
•字串
•陳述式、運算式和運算子
•類別和結構
•屬性
•介面
•命名空間
10資料來源:http://msdn.microsoft.com/zh-tw/library/67ef8sbd.aspx
C# 語言簡介(2)
•索引子
•列舉類型
•委派
•泛型
11資料來源:http://msdn.microsoft.com/zh-tw/library/67ef8sbd.aspx
C# 語言簡介(3)
•註解:
12
C# 語言簡介(4)
•類型
13
C# 語言簡介(5)
•陣列
14
C# 語言簡介(6)
•字串
15
C# 語言簡介(7)
•陳述式、運算式和運算子
16
C# 語言簡介(8)
•陳述式、運算式和運算子
17
C# 語言簡介(9)
•陳述式、運算式和運算子
18
C# 語言簡介(10)
•類別和結構
19
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;
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
C# 語言簡介(13)
•命名空間
22
using System
namespace Sample.Namespace
{
class SampleClass
{
public void SampleMethod()
{
System.Console.WriteLine( “Hello");
}
}
}
用於組織大型的程式碼專案
以 . 分隔
C# 語言簡介(14)
•索引子
23
C# 語言簡介(15)
•列舉類型
24
C# 語言簡介(16)
•委派
25
C# 語言簡介(17)
•泛型
26
練習
• 使用applacation模式練習與法
• Console.WriteLine(“message");
• Ctrl + F5啟動
27
MVC專案複習
28
MVC架構介紹
•MVC(Model View Controller)
29
Model
View Controller
重
笨
輕
MVC架構介紹
30
Request Controller
View
Model
Response
快速建立MVC專案(1)
31
Step 1 :
點選Visual Studio 2013
快速建立MVC專案(2)
32
Step 1 :檔案 / 新增專案
快速建立MVC專案(3)
33
Step 2:已安裝的 / 範本 / Visual C#
/ Web / ASP.NET MVC 4 WEB 應用程式
快速建立MVC專案(4)
34
Step 3 :選取網際網路應用程式
Controller與View
35
Controller與View
36
表單呈現
表單處理
Controller與View
37
呈現內容
共用內容
Controller與View
38
3.呈現內容
2.整體版面
1.View起點
Controller與View
• 何謂整體版面?
39
導覽列
網頁內容
footer
Controller與View
40
導覽列
網頁內容
footer
Controller與View
41
Header
Footer
Menu
Or
SideBar
Content
• 整體版面
• 1.Header
• 2.Menu
• 3.Content(變動)
• 4.Footer
Controller與View
• RenderSection
– 保留區塊,用來
作為選單或側欄
(共用)
• RenderBody
– 呈現內容
42
版面配置
Controller與View
43
Controller (路由決定呈現內容的View)
_ViewStart.cshtml (決定整體版面)
_Layout.cshtml ( RenderBody區塊呈現內容)
Index.cshtml (呈現內容)
DEBUG
• 設定中斷點方式,一行一行追蹤問題
– 設定中斷點
– 追蹤程式流程
• 優點
– 快速追蹤問題點
– 查詢物件資料
44
Model介紹
45
Model介紹
• 何謂Model
– (廣義)Controller與View以外的就是Model
46
資料呈現
(ViewModel)
邏輯運算
(Logic)
資料庫操作
(ORM)
Controller、View與Model
47
Controller (決定帶入的Model)
_ViewStart.cshtml
_Layout.cshtml
Index.cshtml (呈現內容)
Model
Model
Model
Model
資料呈現
(ViewModel)
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
Controller、View與Model
49
Controller
_ViewStart.cshtml
_Layout.cshtml
Index.cshtml
邏輯運算
(Logic)
Model
Request
(Service or method)
Controller、View與Model
50
Controller
_ViewStart.cshtml
_Layout.cshtml
Index.cshtml
資料庫操作
(ORM)
Model
Request
Database
將資料庫結構(Schema)
轉換成
Model直接進行操作
如何設計一個Model
51
The Answer is …
52
要什麼資料就
怎麼設計
以學生綜合資料卡為例(ViewModel)
53
1.學號
2.姓名
3.班級
4.通訊地址
5.電子信箱
6.連絡電話
I need…
建立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
標
題
….
攻城屍
加入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
姓名要必填啊!!
電子信箱怎麼可以沒有@
連絡電話只填數字
攻城屍
加入驗證
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; }
}
What is Model ?
59
Model
View Controller
重
笨
輕
表單應用
表單 輸入邏輯程式
資料庫
送出
儲存資料
輸出邏輯程式
應用程式
網頁
讀取資料
顯示
Controller
表單應用
表單 輸入邏輯程式
資料庫
送出
儲存資料
輸出邏輯程式
應用程式
網頁
讀取資料
顯示
Controller
Model
• Available Attributes
– DataTypeAttribute
– DisplayAttribute
– Validation
• RequiredAttribute
• StringLengthAttribute
• RegularExpressionAttribute
• CompareAttribute
62
實作
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
實作
• 增加Controller
67
實作(舊版畫面)
68
實作(新版畫面)
69
實作
70
實作
• 建立成功後,執行程式
• 路由改為/Student
• 觀看Views-> Student資料夾中:
– Index.cshtml
– Create.cshtml
– …
• 依據上課內容,增加annotation後,觀看
表單效果
71
2015 年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3

2015 年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3

Editor's Notes

  • #30 1. 表示一種軟體架構模式,把系統分成三個部份: Model、View、Controller 2. 目的為實作動態程式設計,對於日後程式的修改及擴充更加便利,並讓某部分的程式可以重複利用。 3. 優點在於複雜度簡化,使程式結構更加直覺。 4. View 美工、UI與顯示控制 5. Controller 流程控制、處理與使用者的互動 6. Model 資料庫物件與商業邏輯
  • #51 事後補充
  • #60 1. 表示一種軟體架構模式,把系統分成三個部份: Model、View、Controller 2. 目的為實作動態程式設計,對於日後程式的修改及擴充更加便利,並讓某部分的程式可以重複利用。 3. 優點在於複雜度簡化,使程式結構更加直覺。 4. View 美工、UI與顯示控制 5. Controller 流程控制、處理與使用者的互動 6. Model 資料庫物件與商業邏輯
  • #64 專案中,右鍵點選Model,選擇加入,選擇新增項目
  • #65 選擇程式碼 => 程式碼檔 檔案名稱改成Student.cs
  • #68 專案中,右鍵點選加入,點選控制器
  • #69 設定: 輸入名稱StudentCtroller 選擇模型類別 選擇資料庫內容
  • #70 設定: 輸入名稱StudentCtroller 選擇模型類別 選擇資料庫內容