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 – 版面配置(6)
49
View – 版面配置(7)
50
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

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

Editor's Notes

  • #9 1.網頁流程簡圖 2.瀏覽器:限制、資源 3.JavaScript近年也發展 Server開發
  • #45 View的種類
  • #46 新增View的方法(複習)
  • #47 PartialView
  • #48 母版面配至介紹