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)
請求
回覆

8
請求
回覆
瀏覽器
JavaScript
ASP
PHP
JSP
….
IIS、Tomcat…

9
請求
回覆
瀏覽器
JavaScript
ASP
PHP
JSP
….
存取
資料庫
(Database)
MS SQL
MY SQL
ORACLE
SYBASE
….
IIS、Tomcat…

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

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

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

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

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

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

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

– Box
31

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

– Margin
– Border
– Padding
33
– 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;
}
34

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

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

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

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

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

• 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

• JavaScript 使用方式
– DEMO
42

練習(二) 套用CSS練習
• 下載範例程式
• 嘗試修改內容:
– 變更字體顏色
– 變更字體大小
– 移動效果(Hover)
– ….
43

View – 版面配置(1)
44
一般使用的
View
Paritial View
母版View

45
• 加入View的方法1

46
• 加入View的方法2

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

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

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

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

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

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

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

• Dropdownlist
59

• Dropdownlist
60

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

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

More Related Content

What's hot

Viewers also liked

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

More from Duran Hsieh

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

Editor's Notes