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

網頁系統簡介(2/4)
10
使用者 (Client) 網頁伺服器 (Server)
請求
回覆

11
使用者 (Client) 網頁伺服器 (Server)
請求
回覆
瀏覽器
JavaScript
ASP
PHP
JSP
….
IIS、Tomcat…

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 基本語法介紹 - type selectors
table { color:red }
ul { color:red }
<table id=“mytable”> </table>
27

• CSS 基本語法介紹 - .class selectors
table.fancy { color:red }
div.fancy { color:red }
<table id=“mytable” class=“fancy”> </table>
28

• 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 基本語法介紹 - [attribute] selectors
30

• CSS 基本語法介紹 - [attribute] selectors
31

• CSS 基本語法介紹 - selector chains
32

• CSS 基本語法介紹 - selector chains
33

• CSS 基本語法介紹 – 繼承
p { color: #00FF00; }
strong { font-size:20px; } 資料測試資料測試
<p>資料測試
<strong>資料測試</strong>
</p>
34

– Box
35

• CSS 基本語法介紹 – 屬性介紹
– Margin
– Border
– Padding
36

– Margin
– Border
– Padding
37
– Margin
– Border
– Padding
12345
12345

– 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

– position
• position
• top
• right
• left
• bottom
• overflow
• z-index
39

– Font
• font-family
• font-size
• font-weight
• font-style
• font-variant
40

• 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 基本語法介紹 – 使用方式
– 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

• 優先權
– 內行套用的樣式表 (Inline stylesheet)
– 嵌入套用的樣式表 (Embedded stylesheet)
– 匯入套用的樣式表 (Imported stylesheet)
– 外部連接套用的樣式表 (Linked stylesheet)
– 瀏覽器本身的樣式表 (Browser's own
stylesheet)
43

• CSS 基本語法介紹
– 流覽器使用DEBUG與簡易測試
– DEMO
44

• JavaScript用於
• 前端驗證
• 特效畫面
• 非同步資料存取(ajax)
45

• 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

49
• 加入View的方法1

50
• 加入View的方法2

51
1.輸入名稱(從
Controller會自
動命名)
2.使用引擎
3.部分檢視
4.使用配置

55
Header
Footer
Menu
Or
SideBar
Content
• Layout母版
• 1.Header
• 2.Menu
• 3.Content(變動)
• 4.Footer

• 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)

59
• Hidden
– Html.Hidden(“Hidden")
– Html.HiddenFor(model => model. Hidden)

• Password
– Html.Password(" Html.Password ")
– Html.PasswordFor(model => model.Password)
60

61
• RadioButton
– Html.RadioButton("RadioButton", 3)
– Html.RadioButton(model =>
model.RadioButton, 3)

62
• CheckBox
– Html.CheckBox("CheckBox1")
– Html.CheckBoxFor(“model =>
model.CheckBox1")

• Dropdownlist
63

• Dropdownlist
64

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

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

More Related Content

What's hot

Viewers also liked

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

More from Duran Hsieh

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

Editor's Notes