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

2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
ASP.NET MVC 4 WEB課程時間:2015/3/2 報告者:賴怡君
講師資料(I) 2 姓名謝政廷(Duran) 職稱 C# Developer 工作經歷凌網科技開發工程師、資深工程師、專案經理飛迅設計股份有限公司 C# Developer 學歷逢甲大學資訊工程所碩士工作總年資 4年專長 Java Web、C# MVC .Net、PHP Web程式開發(js, jquery, angularjs, css, SASS) 單元測試、壓力測試、持續整合關聯式資料庫(SQL、Stored procedure) Android手機程式開發 SVN、Git SQL Server、Oracle、MongoDB Tomcat、IIS 認證 Oracle Certified Professional (Java SE 6 Programmer ) Oracle Certified Associate, Professional (Oracle Database)
講師資料(II) 姓名賴怡君(Ina) 職稱工程師工作經歷恆鈦資訊開發工程師逢甲大學資訊處工程師凌網科技智慧科技發展事業處研發工程師學歷逢甲大學資訊工程所碩士工作總年資 7年專長 Java Web、C# MVC .Net Web程式開發(js, jquery, angularjs, css) 關聯式資料庫(SQL、Stored procedure、Trigger) Android手機程式開發 SVN、Git SQL Server、Sybase Tomcat、IIS 認證 The Sun Certified Java Programmer 5 Programming in HTML5 with JavaScript and CSS3 Specialist 3
專案經歷(1/2) 4 • 經濟部中央地質調查所 – 臺灣溫泉露頭資料庫暨網頁建置 • 主計總處 – 家庭收支訪問調查及人力資源調查系統建置 • 台灣自來水股份有限公司 – 102、103年用戶新改裝工程管理系統委外建置案 – 104年用戶新改裝後續擴充案 • 行政院勞工委員會中部辦公室 – 技能職類測驗能力認證資訊系統建置及維護 • 國家實驗研究院國家災害防救科技中心 – 災害事件簿查詢展示系統 – 行動災害調查整合模組(Android)
專案經歷(2/2) 5 • 宜誠資訊 – 國防部史政編譯室史料與軍書影像委外建置 • 國家圖書館 – 國家圖書館「臺灣學術網路資源選介主題資料庫」建置案 • 入出國與移民署 – 行動查緝服務建置案 • 國家台灣文學館 – 102,103年度文物文學典藏系統維護 • 第三方支付金流介接
推薦書籍與網站 •(書籍)ASP.net MVC 5 網站開發美學 •（網站）MVA –http://www.microsoftvirtualacademy.com/ •（網站）PluraSight –http://pluralsight.com •微軟優惠 –https://www.visualstudio.com/zh- tw/products/free-developer-offers-vs 6
課程大綱 • 專案運作、軟體開發流程與網頁程式開發介紹 (2/24) • Html, Css, JavaScript, C# 介紹(3/2) • C# MVC .Net Part 1(3/9) • C# MVC .Net Part 2(3/16) • Database, Linq, Entity Framework(3/23) • 程式發布(IIS設定, Azure, 其他工具)(3/30) 7
大綱 •網頁系統簡介 •Html簡介 •CSS、Javascript套版 •View – 版面配置 •Helper – 其他表單欄位製作 8
網頁系統簡介(1/4) 9
網頁系統簡介(2/4) 10 使用者 (Client) 網頁伺服器 (Server) 請求回覆
網頁系統簡介(3/4) 11 使用者 (Client) 網頁伺服器 (Server) 請求回覆瀏覽器 JavaScript ASP PHP JSP …. IIS、Tomcat…
網頁系統簡介(4/4) 12 使用者 (Client) 網頁伺服器 (Client) 請求回覆瀏覽器 JavaScript ASP PHP JSP …. 存取資料庫 (Database) MS SQL MY SQL ORACLE SYBASE …. IIS、Tomcat…
Html簡介(1/2) • 超文件標示語言 • 「網頁建立和其它可在網頁瀏覽器中看到的資訊」的一種標示語言 • 副檔名.html , .htm 13 來源：http://zh.wikipedia.org/wiki/HTML 例1：<body></body> 例2：<title>123</title> 例3：<input type="text" value="輸入框文字" name="text">
Html簡介(2/2) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="/jquery.js"></script> <link rel="stylesheet" type="text/css" href="/stdtheme.css"> <title>JS Bin</title> </head> <body> </body> </html> 檔案類型宣告主體區表頭區通常是用來描述和整份文件有關的基本內容
Heading • 標題： <h1>h1</h1> <h2>h2</h2> <h3>h3</h3> <h4>h4</h4> <h5>h5</h5> <h6>h6</h6> http://jsbin.com/zuvokaludi/edit?html,output
表單標籤 • 輸入框： <input type="text" value="輸入框文字" name="text> • 密碼輸入框： <input type="password" name="password" value="passwordValue"> • Radio Button： <input type="radio" name="radio" value="radioValue"> 16
表單標籤 • 下拉選單： <select> <option value="yellow">黃色</option> <option value="blue">藍色</option> <option value="gree">綠色</option> </select> • checkbox: <input type="checkbox“ value="checkboxValue" name="checkbox"> • 檔案上傳： <input type="file" name="file" > 17
表單標籤 • 隱藏： <input type="hidden" name="hidden" value="hiddenValue"> • 日期： <input type="date" name="date "> • 送出： <input type="submit" name="submit" value=“submit"> • 取消： <input type="reset" name="reset" value="reset"> 18
• http://jsbin.com/qalakafopi/edit?html,output 19http://jsbin.com/qalakafopi/edit?html,output
標籤(版面配置) • <table> <tr> <th>標籤</th> </tr> <tr> <td>內容</td> </tr> </table> • <div></div> • <span></span> • <p></p> 20 http://jsbin.com/duxuzufuqo/edit?html,output
表單
表單應用表單輸入邏輯程式資料庫送出儲存資料輸出邏輯程式應用程式網頁讀取資料顯示
表單標籤
練習(一) html練習 • 1.開啟記事本 • 2.貼上範例程式 • 3.存成.htm檔案 • 4.使用瀏覽器開啟檔案 24 範例程式： <!DOCTYPE html> <html> <head> <meta charset=“utf-8"> </head> <body> Hello World </body> </html>
練習(一) html練習 • 練習網站 • http://jsbin.com/?html,js,output • 標題範例 • http://jsbin.com/zuvokaludi/edit?html,output • 表單範例 • http://jsbin.com/qalakafopi/edit?html,output • Layout範例 • http://jsbin.com/duxuzufuqo/edit?html,outpu t 25
CSS、Javascript套版 (1) • CSS簡介 26
CSS、Javascript套版 (2) • CSS 基本語法介紹 - type selectors table { color:red } ul { color:red } <table id=“mytable”> </table> 27
CSS、Javascript套版 (3) • CSS 基本語法介紹 - .class selectors table.fancy { color:red } div.fancy { color:red } <table id=“mytable” class=“fancy”> </table> 28
CSS、Javascript套版 (4) • CSS 基本語法介紹 - #id selectors #myTable { color:red } <table id="myTable"> <tbody> <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> </tbody> </table> 29
CSS、Javascript套版 (5) • CSS 基本語法介紹 - [attribute] selectors 30
CSS、Javascript套版 (6) • CSS 基本語法介紹 - [attribute] selectors 31
CSS、Javascript套版 (7) • CSS 基本語法介紹 - selector chains 32
CSS、Javascript套版 (8) • CSS 基本語法介紹 - selector chains 33
CSS、Javascript套版 (9) • CSS 基本語法介紹 – 繼承 p { color: #00FF00; } strong { font-size:20px; } 資料測試資料測試 <p>資料測試 <strong>資料測試</strong> </p> 34
CSS、Javascript套版 (10) – Box 35
CSS、Javascript套版 (11) • CSS 基本語法介紹 – 屬性介紹 – Margin – Border – Padding 36
CSS、Javascript套版 (12) • CSS 基本語法介紹 – 屬性介紹 – Margin – Border – Padding 37 • CSS 基本語法介紹 – 屬性介紹 – Margin – Border – Padding 12345 12345
CSS、Javascript套版 (12) • CSS 基本語法介紹 – 屬性介紹 – Background • p {background-color: 00FF00;} • p {background-color: red;} • p {background-image:url(yp.jpg);} • p { background-image:url(yp.jpg); background-repeat: no-repeat; } • p { background-image:url(yp.jpg); background-repeat: repeat-x; } 38
CSS、Javascript套版 (13) • CSS 基本語法介紹 – 屬性介紹 – position • position • top • right • left • bottom • overflow • z-index 39
CSS、Javascript套版 (14) • CSS 基本語法介紹 – 屬性介紹 – Font • font-family • font-size • font-weight • font-style • font-variant 40
CSS、Javascript套版 (15) • CSS 基本語法介紹 – 使用方式 – 直接使用 <p style=‘font-size:16;color:#FF0000;'>Test</p> – 放在Head中 <head> <style type="text/css"> div { font-size:16; color:#FF0000; } </style> </head> 41
CSS、Javascript套版 (16) • CSS 基本語法介紹 – 使用方式 – Link • 一般 <link rel=stylesheet type="text/css" href=“mp.css"> • C# mvc .net (Razor) <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 42
CSS、Javascript套版 (17) • 優先權 – 內行套用的樣式表 (Inline stylesheet) – 嵌入套用的樣式表 (Embedded stylesheet) – 匯入套用的樣式表 (Imported stylesheet) – 外部連接套用的樣式表 (Linked stylesheet) – 瀏覽器本身的樣式表 (Browser's own stylesheet) 43
CSS、Javascript套版 (18) • CSS 基本語法介紹 – 流覽器使用DEBUG與簡易測試 – DEMO 44
CSS、Javascript套版 (19) • JavaScript用於 • 前端驗證 • 特效畫面 • 非同步資料存取(ajax) 45
CSS、Javascript套版 (20) • JavaScript 使用方式 – 方法一 <script src="@Url.Content("~/Scripts/jquery- 1.5.1.min.js")"></script> <script src="@Url.Content("~/Scripts/modernizr- 1.7.min.js")"></script> – 方法二 <script type=“text/javascript” > function showMessage(message){ alert(message); } </script> 46
練習(二) 套用CSS練習 • 下載範例程式 • 嘗試修改內容: – 變更字體顏色 – 變更字體大小 – 移動效果(Hover) – …. 47
View – 版面配置(1) 48 一般使用的 View Paritial View 母版View
View – 版面配置(2) 49 • 加入View的方法1
View – 版面配置(3) 50 • 加入View的方法2
View – 版面配置(4) 51 1.輸入名稱(從 Controller會自動命名) 2.使用引擎 3.部分檢視 4.使用配置
View – 版面配置(5) 52
View – 版面配置(8) 55 Header Footer Menu Or SideBar Content • Layout母版 • 1.Header • 2.Menu • 3.Content(變動) • 4.Footer
View – 版面配置(9) • RenderSection – 保留區塊，用來作為選單或側欄 • RenderBody – 一般View放置區塊 (Content) 56 一般使用的版面配置 (不一定如此)
練習(三) 版面配置 57 • 下載範例程式 • 嘗試修改內容: – 移除側欄位置 – 改變測欄位置 – …
Helper – 其他表單欄位製作(1) 58 • TextBox & TextArea – Html.TextBox("Textbox") – Html.TextAreaFor(model => model.textbox) – Html.TextArea("TextArea") – Html.TextAreaFor(model => model.textArea)
Helper – 其他表單欄位製作(2) 59 • Hidden – Html.Hidden(“Hidden") – Html.HiddenFor(model => model. Hidden)
Helper – 其他表單欄位製作(3) • Password – Html.Password(" Html.Password ") – Html.PasswordFor(model => model.Password) 60
Helper – 其他表單欄位製作(4) 61 • RadioButton – Html.RadioButton("RadioButton", 3) – Html.RadioButton(model => model.RadioButton, 3)
Helper – 其他表單欄位製作(5) 62 • CheckBox – Html.CheckBox("CheckBox1") – Html.CheckBoxFor(“model => model.CheckBox1")
Helper – 其他表單欄位製作(6) • Dropdownlist 63
Helper – 其他表單欄位製作(7) • Dropdownlist 64

Check these out next

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

Recomendados

Más contenido relacionado

Presentaciones para ti(10)

Similar a 2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3(20)

Más de Duran Hsieh(20)

Último(20)

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

Hinweis der Redaktion