(Fcu2)mvc 4 net 教育訓練4 v1
52
ASP.NET MVC 4 WEB 課課 課課 :2015/4/23 課課課 : 課課課
-
Upload
duran-hsieh -
Category
Education
-
view
26 -
download
3
Transcript of (Fcu2)mvc 4 net 教育訓練4 v1
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
大綱• 上週實作 ( 續 )• View
– 新增檢視– Razor– 參數傳遞方法– helper
7
實作
8
實作
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; }}}
10
實作• 建置專案
11
實作• 增加 Controller
12
實作 (舊版畫面 )
13
實作 (新版畫面 )
14
實作
15
實作• 建立成功後，執行程式• 路由改為 /Student• 觀看 Views-> Student 資料夾中 :
– Index.cshtml– Create.cshtml– …
• 依據上課內容，增加 annotation 後，觀看表單效果
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; }}
17
問題處理• Create( 新增 ) 的時候出現錯誤訊息
– 缺少 ID (PK)
• 如何建立 ID
18
View (1)• 新增檢視一 ( 從檔案目錄新增檢視 )
– 對 View 資料夾 ( 或內部資料夾 ) 點選右鍵 -> 加入 -> 檢視
19
View (2)• 新增檢視二 ( 從 Controller 加入 view)
– 在 Controller 中的 Action 中點選右鍵– 選擇加入檢視
20
View (3)• 新增檢視 ( 設定 )
– 輸入名稱– 選擇檢視引擎– 選擇型別類型– 選擇建立部分檢視– 選擇主版– 點選加入完成檢視
21
View (4)• Razor
– 更輕量化且直覺的語法，減少在 View 中輸出資料時使用的語法，讓 View 的指令更加簡潔，
– 例如使用 "@" + 變數名稱 的方式，就可以輸出程式中的變數，不必再用 <% %> 來設定。如果程式有多行，可以使用 @{ } 的方式來設定。
– 容易學習。– 可相容於現在的程式語言 (ex: C#) 。– 透過 Visual Studio ，可享有 Intellisense 能力。– 可混用 HTML 與程式語言指令。
• Razor 基本語法– 註解方法 @* *@– 程式區塊 @{ }@– 取得變數與內容 @ViewBag.Title
22
View (5)
23
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")');
24
View (7)• 導引換頁：
– @Html.ActionLink(“ 名稱 ", “action", “controller")• 超連結• 參數一：顯示名稱• 參數二： action• 參數三： controller
25
View(8)– @Url.Action(“action”,”controller”)
• 參數一： action• 參數二： controller• 導向位置，可用於 Button• <input type="button" value=" 重新填寫 "
onclick="javascript:window.location='@Url.Action(“modify", “profile")'" />
26
View(9)• 部份檢視 (partial view)
27
View(10)• 部份檢視 (partial view)
28
實作• 從 Controller 建立 View• 使用 ActionLink 建立連結• 使用 Url.Action 建立連結
29
資料傳遞方法 (1)• ViewData• ViewBag• TempData• ViewModel
30
資料傳遞方法 (2)
Controller加入
ViewBag.message=“message test”
View加入
@ViewBag.message
31
實作• 練習 ViewBag
32
Helper - 表單 (1)• 表單 (form)
33
Helper - 表單 (2)• 表單 (form)
34
Helper - 表單 (3)
• @using (Html.BeginForm("Index", “Student", FormMethod.Post, new { enctype = "multipart/form-data" , id="CityId" })){ }
• 四個參數： Action , Controller , Form Method , 其他屬性
Action Controller
Method(Get or Post)Other Attribute
35
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">
36
Helper - 表單 (5)• 加入送出按鈕
– <input type="submit" value="Create" />
Controller 裡的 Create Action
37
Helper - 表單 (6)• @using (Html.BeginForm(“Create", “Student",
FormMethod.Post, new { enctype = "multipart/form-data" , id="CityId" })) { }
38
Helper - 表單 (7)• 一般使用方法
– @Html.TextBox("name","1")
– <input id="name" name="name" type="text" value="1">
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
40
Helper - 表單 (9)• 一般使用方法
– @Html.TextBox("name", "1", new { Style="color:red;" })
41
Helper - 表單 (10)• 一般使用方法
– <input id="name" name="name" type="text" value="1">
42
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="">
43
Helper - 表單 (12)• ViewModel 綁定
@model WebApplication2.Models.Student
@Html.TextBoxFor(model => model.ID)
44
Helper – 表單欄位製作 (1)• TextBox & TextArea
– Html.TextBox("Textbox")– Html.TextAreaFor(model => model.textbox)
– Html.TextArea("TextArea")– Html.TextAreaFor(model => model.textArea)
45
Helper – 其他表單欄位製作 (2)
• Hidden– Html.Hidden(“Hidden")– Html.HiddenFor(model => model. Hidden)
46
Helper – 其他表單欄位製作(3)
• Password– Html.Password(" Html.Password ")– Html.PasswordFor(model =>
model.Password)
47
Helper – 其他表單欄位製作 (4)
• RadioButton– Html.RadioButton("RadioButton", 3)– Html.RadioButton(model =>
model.RadioButton, 3)
48
Helper – 其他表單欄位製作 (5)
• CheckBox– Html.CheckBox("CheckBox1")– Html.CheckBoxFor(“model =>
model.CheckBox1")
49
Helper – 其他表單欄位製作 (6)
• Dropdownlist
50
Helper – 其他表單欄位製作(7)
• Dropdownlist
51
實作• 使用 Html BeginForm 建立簡單表單• 練習使用 html helper ，配合 ViewModel 建
立強型別表單
