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

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

大綱 • 上週實作(續) • View – 新增檢視 – Razor – 參數傳遞方法 – helper 6

• 貼上內容 9 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; } } }

實作 • 增加Controller 11

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

(練習) 16 姓名要必填電子信箱驗證連絡電話用正規表達式攻城屍 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; } }

問題處理 • Create(新增)的時候出現錯誤訊息 – 缺少ID (PK) • 如何建立ID 17

View (1) • 新增檢視一(從檔案目錄新增檢視) – 對View資料夾(或內部資料夾)點選右鍵 -> 加入 -> 檢視 18

View (2) • 新增檢視二(從Controller加入view) – 在Controller中的Action中點選右鍵 – 選擇加入檢視 19

View (3) • 新增檢視(設定) – 輸入名稱 – 選擇檢視引擎 – 選擇型別類型 – 選擇建立部分檢視 – 選擇主版 – 點選加入完成檢視 20

View (4) • Razor – 更輕量化且直覺的語法，減少在 View 中輸出資料時使用的語法，讓 View 的指令更加簡潔， – 例如使用 "@" + 變數名稱的方式，就可以輸出程式中的變數，不必再用 <% %> 來設定。如果程式有多行，可以使用 @{ } 的方式來設定。 – 容易學習。 – 可相容於現在的程式語言 (ex: C#)。 – 透過 Visual Studio，可享有 Intellisense 能力。 – 可混用 HTML 與程式語言指令。 • Razor基本語法 – 註解方法 @* *@ – 程式區塊 @{ }@ – 取得變數與內容 @ViewBag.Title 21

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")'); 23

View (7) • 導引換頁： – @Html.ActionLink(“名稱", “action", “controller") • 超連結 • 參數一：顯示名稱 • 參數二：action • 參數三：controller 24

View(8) – @Url.Action(“action”,”controller”) • 參數一：action • 參數二：controller • 導向位置，可用於Button • <input type="button" value="重新填寫" onclick="javascript:window.location='@Url.Action(“ modify", “profile")'" /> 25

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

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

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

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

資料傳遞方法(2) 30 Controller 加入 ViewBag.message =“message test” View 加入 @ViewBag.message

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

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

Helper - 表單(3) • @using (Html.BeginForm("Index", “Student", FormMethod.Post, new { enctype = "multipart/form-data" , id="CityId" })){ } • 四個參數：Action , Controller , Form Method , 其他屬性 34 Action Controller Method(Get or Post) Other Attribute

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"> 35

Helper - 表單(5) • 加入送出按鈕 – <input type="submit" value="Create" /> 36 Controller裡的Create Action

Helper - 表單(6) • @using (Html.BeginForm(“Create", “Student", FormMethod.Post, new { enctype = "multipart/form-data" , id="CityId" })) { } 37

Helper - 表單(7) • 一般使用方法 – @Html.TextBox("name","1") – <input id="name" name="name" type="text" value="1"> 38

Helper - 表單(8) • 一般使用方法 – @Html.TextBox("name", "1", new { Style="color:red;" }) – <input id="name" name="name" type="text" value="1" style="color:red;"> 39 NAME VALUE Other attribute

Helper - 表單(9) • 一般使用方法 – @Html.TextBox("name", "1", new { Style="color:red;" }) 40

Helper - 表單(10) • 一般使用方法 – <input id="name" name="name" type="text" value="1"> 41

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=""> 42

Helper - 表單(12) • ViewModel綁定 @model WebApplication2.Models.Student @Html.TextBoxFor(model => model.ID) 43

Helper – 表單欄位製作(1) 44 • TextBox & TextArea – Html.TextBox("Textbox") – Html.TextAreaFor(model => model.textbox) – Html.TextArea("TextArea") – Html.TextAreaFor(model => model.textArea)

Helper – 其他表單欄位製作(2) 45 • Hidden – Html.Hidden(“Hidden") – Html.HiddenFor(model => model. Hidden)

Helper – 其他表單欄位製作(3) • Password – Html.Password(" Html.Password ") – Html.PasswordFor(model => model.Password) 46

Helper – 其他表單欄位製作(4) 47 • RadioButton – Html.RadioButton("RadioButton", 3) – Html.RadioButton(model => model.RadioButton, 3)

Helper – 其他表單欄位製作(5) 48 • CheckBox – Html.CheckBox("CheckBox1") – Html.CheckBoxFor(“model => model.CheckBox1")

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

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

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

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

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

More Related Content

What's hot

Viewers also liked

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

More from Duran Hsieh

Recently uploaded

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

Editor's Notes