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

2015 年逢甲大學資訊系:ASP.NET MVC 4 教育訓練2
ASP.NET MVC 4 WEB課程時間:2015/4/8 報告者:謝政廷
講師資料(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
大綱 •網頁系統簡介 •Html簡介 •CSS、Javascript套版 •View – 版面配置 •Helper – 其他表單欄位製作 6
網頁系統簡介(1/4) 7 使用者 (Client) 網頁伺服器 (Client) 請求回覆
網頁系統簡介(2/4) 8 使用者 (Client) 網頁伺服器 (Client) 請求回覆瀏覽器 JavaScript ASP PHP JSP …. IIS、Tomcat…
網頁系統簡介(3/4) 9 使用者 (Client) 網頁伺服器 (Client) 請求回覆瀏覽器 JavaScript ASP PHP JSP …. 存取資料庫 (Database) MS SQL MY SQL ORACLE SYBASE …. IIS、Tomcat…
網頁系統簡介(4/4) 10
Html簡介(1/2) • 超文件標示語言 • 「網頁建立和其它可在網頁瀏覽器中看到的資訊」的一種標示語言 • 副檔名.html , .htm 11來源：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> 檔案類型宣告主體區表頭區通常是用來描述和整份文件有關的基本內容
基本標籤 • 標題： <h3>常用</h3> • 按鈕： <input type="button" value="按鈕名稱">
表單標籤 • 輸入框： <input type="text" value="輸入框文字" name="text> • 密碼輸入框： <input type="password" name="password" value="passwordValue"> • Radio Button： <input type="radio" name="radio" value="radioValue"> 14
表單標籤 • 下拉選單： <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" > 15
表單標籤 • 隱藏： <input type="hidden" name="hidden" value="hiddenValue"> • 日期： input type="date" name="date "> • 送出： <input type="submit" name="submit" value="submit"> 16
標籤(版面配置) • <table> <tr> <th>標籤</th> </tr> <tr> <td>內容</td> </tr> </table> • <div></div> • <span></span> • <p></p> 17
表單
表單應用表單輸入邏輯程式資料庫送出儲存資料輸出邏輯程式應用程式網頁讀取資料顯示
表單標籤
練習(一) html練習 • http://jsbin.com/?html,js,output 21
CSS、Javascript套版 (1) • CSS簡介 22
CSS、Javascript套版 (2) • CSS 基本語法介紹 - type selectors table { color:red } ul { color:red } <table id=“mytable”> </table> 23
CSS、Javascript套版 (3) • CSS 基本語法介紹 - .class selectors table.fancy { color:red } div.fancy { color:red } <table id=“mytable” class=“fancy”> </table> 24
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> 25
CSS、Javascript套版 (5) • CSS 基本語法介紹 - [attribute] selectors 26
CSS、Javascript套版 (6) • CSS 基本語法介紹 - [attribute] selectors 27
CSS、Javascript套版 (7) • CSS 基本語法介紹 - selector chains 28
CSS、Javascript套版 (8) • CSS 基本語法介紹 - selector chains 29
CSS、Javascript套版 (9) • CSS 基本語法介紹 – 繼承 p { color: #00FF00; } strong { font-size:20px; } 資料測試資料測試 <p>資料測試 <strong>資料測試</strong> </p> 30
CSS、Javascript套版 (10) – Box 31
CSS、Javascript套版 (11) • CSS 基本語法介紹 – 屬性介紹 – Margin – Border – Padding 32
CSS、Javascript套版 (12) • CSS 基本語法介紹 – 屬性介紹 – Margin – Border – Padding 33 • 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; } 34
CSS、Javascript套版 (13) • CSS 基本語法介紹 – 屬性介紹 – position • position • top • right • left • bottom • overflow • z-index 35
CSS、Javascript套版 (14) • CSS 基本語法介紹 – 屬性介紹 – Font • font-family • font-size • font-weight • font-style • font-variant 36
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> 37
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" /> 38
CSS、Javascript套版 (17) • 優先權 – 內行套用的樣式表 (Inline stylesheet) – 嵌入套用的樣式表 (Embedded stylesheet) – 匯入套用的樣式表 (Imported stylesheet) – 外部連接套用的樣式表 (Linked stylesheet) – 瀏覽器本身的樣式表 (Browser's own stylesheet) 39
CSS、Javascript套版 (18) • CSS 基本語法介紹 – 流覽器使用DEBUG與簡易測試 – DEMO 40
CSS、Javascript套版 (19) • 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” > XXXX </script> 41
CSS、Javascript套版 (20) • JavaScript 使用方式 – DEMO 42
練習(二) 套用CSS練習 • 下載範例程式 • 嘗試修改內容: – 變更字體顏色 – 變更字體大小 – 移動效果(Hover) – …. 43
View – 版面配置(1) 44 一般使用的 View Paritial View 母版View
View – 版面配置(2) 45 • 加入View的方法1
View – 版面配置(3) 46 • 加入View的方法2
View – 版面配置(4) 47 1.輸入名稱(從 Controller會自動命名) 2.使用引擎 3.部分檢視 4.使用配置
View – 版面配置(5) 48
View – 版面配置(8) 51 Header Footer Menu Or SideBar Content • Layout母版 • 1.Header • 2.Menu • 3.Content(變動) • 4.Footer
View – 版面配置(9) • RenderSection – 保留區塊，用來作為選單或側欄 • RenderBody – 一般View放置區塊(Content) 52 一般使用的版面配置 (不一定如此)
練習(三) 版面配置 53 • 下載範例程式 • 嘗試修改內容: – 移除側欄位置 – 改變測欄位置 – …
Helper – 其他表單欄位製作(1) 54 • TextBox & TextArea – Html.TextBox("Textbox") – Html.TextAreaFor(model => model.textbox) – Html.TextArea("TextArea") – Html.TextAreaFor(model => model.textArea)
Helper – 其他表單欄位製作(2) 55 • Hidden – Html.Hidden(“Hidden") – Html.HiddenFor(model => model. Hidden)
Helper – 其他表單欄位製作(3) • Password – Html.Password(" Html.Password ") – Html.PasswordFor(model => model.Password) 56
Helper – 其他表單欄位製作(4) 57 • RadioButton – Html.RadioButton("RadioButton", 3) – Html.RadioButton(model => model.RadioButton, 3)
Helper – 其他表單欄位製作(5) 58 • CheckBox – Html.CheckBox("CheckBox1") – Html.CheckBoxFor(“model => model.CheckBox1")
Helper – 其他表單欄位製作(6) • Dropdownlist 59
Helper – 其他表單欄位製作(7) • Dropdownlist 60

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

Check these out next

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

Recomendados

Más contenido relacionado

Presentaciones para ti(19)

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

Más de Duran Hsieh(19)

Último(20)

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

Hinweis der Redaktion