2015 年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
Download as PPTX, PDF1 like399 views
该文档记录了一门关于ASP.NET MVC 4的网络课程，讲师信息和课程大纲包括C#语言简介及MVC架构。课程涉及多个软件开发项目和实操练习，强调CRUD操作及表单验证。学生将学习如何创建模型（model）、控制器（controller）和视图（view），并应用相关的验证属性。
![加入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; }
}](https://image.slidesharecdn.com/fcu2mvc4net3v2-150804184107-lva1-app6891/85/2015-ASP-NET-MVC-4-3-56-320.jpg)
![加入驗證
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; }
}](https://image.slidesharecdn.com/fcu2mvc4net3v2-150804184107-lva1-app6891/85/2015-ASP-NET-MVC-4-3-58-320.jpg)
2015 年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
- 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
- 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"); } } } 用於組織大型的程式碼專案 以 . 分隔
- 27. 練習 • 使用applacation模式練習與法 • Console.WriteLine(“message"); • Ctrl + F5啟動 27
- 28. MVC專案複習 28
- 29. MVC架構介紹 •MVC(Model View Controller) 29 Model View Controller 重 笨 輕
- 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 應用程式
- 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
- 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
- 51. 如何設計一個Model 51
- 52. The Answer is … 52 要什麼資料就 怎麼設計
- 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; } }
- 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 重 笨 輕
- 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
- 68. 實作(舊版畫面) 68
- 69. 實作(新版畫面) 69
- 70. 實作 70
- 71. 實作 • 建立成功後，執行程式 • 路由改為/Student • 觀看Views-> Student資料夾中: – Index.cshtml – Create.cshtml – … • 依據上課內容，增加annotation後，觀看 表單效果 71
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 選擇模型類別 選擇資料庫內容