2019/0515/RWD Utility+Card&MVC ViewModel+CRUD(RD)
#RWD Utility
上次講的是排版方式 flexbox bs4
這次繼續講通用Utility類別 字型 字體 顏色 背景
Bs4比bs3顏色更多
全幅背景圖??
##Utility顏色
###Keyword 文字
text- …
###Keyword 背景色
bg- …
###Keyword 複習
p ? padding
mb ? marginbotton
bs3沒有通用屬性要自己下css
transparent 透明
###RWD/11Utility_Color.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<div class="container">
<p class="text-primary">Welcome My Website</p>
<p class="text-secondary">Welcome My Website</p>
<p class="text-success">Welcome My Website</p>
<p class="text-danger">Welcome My Website</p>
<p class="text-warning">Welcome My Website</p>
<p class="text-info">Welcome My Website</p>
<p class="text-light bg-dark">Welcome My Website</p>
<p class="text-dark">Welcome My Website</p>
<p class="text-body">Welcome My Website</p>
<p class="text-muted">Welcome My Website</p>
<p class="text-white bg-dark">Welcome My Website</p>
<hr />
<div class="text-white bg-primary p-3 mb-2">Welcome My Website</div>
<div class="text-white bg-secondary p-3 mb-2">Welcome My Website</div>
<div class="text-white bg-success p-3 mb-2">Welcome My Website</div>
<div class="text-white bg-danger p-3 mb-2">Welcome My Website</div>
<div class="text-white bg-warning p-3 mb-2">Welcome My Website</div>
<div class="text-white bg-info p-3 mb-2">Welcome My Website</div>
<div class="text-white bg-dark p-3 mb-2">Welcome My Website</div>
<div class="text-dark bg-light p-3 mb-2">Welcome My Website</div>
<div class="text-dark bg-transparent p-3 mb-2">Welcome My Website</div>
</div>
</body>
</html>
##Utility格式
keyword
<h1-6>
<small>
<pre>
<code>
<kbd>
沒套的時候其實只是有含意的區位沒有樣式
###RWD/12Utility_Text.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title></title>
<!--<link href="Content/bootstrap.min.css" rel="stylesheet" />-->
<style>
</style>
</head>
<body>
<div class="container">
<h1>h1. Bootstrap 4</h1>
<h2>h2. Bootstrap 4</h2>
<h3>h3. Bootstrap 4</h3>
<h4>h4. Bootstrap 4</h4>
<h5>h5. Bootstrap 4</h5>
<h6>h6. Bootstrap 4</h6>
<p class="h1">h1. Bootstrap 4</p>
<p class="h2">h2. Bootstrap 4</p>
<p class="h3">h3. Bootstrap 4</p>
<p class="h4">h4. Bootstrap 4</p>
<p class="h5">h5. Bootstrap 4</p>
<p class="h6">h6. Bootstrap 4</p>
<span class="h1">h1. Bootstrap 4</span>
<span class="h2">h2. Bootstrap 4</span>
<span class="h3">h3. Bootstrap 4</span>
<span class="h4">h4. Bootstrap 4</span>
<span class="h5">h5. Bootstrap 4</span>
<span class="h6">h6. Bootstrap 4</span>
<hr />
<h1>Welcome My Website<small>sub title</small></h1>
<h2>Welcome My Website<small>sub title</small></h2>
<h3>Welcome My Website<small>sub title</small></h3>
<hr />
<pre>
function updateData() {
$.ajax({
type: 'GET',
url: 'https://ptx.transportdata.tw/MOTC/v2/Rail/TRA/LiveBoard?$format=JSON',
format: 'json',
success: function (data) {
//alert(data.length);
var TripLine;
var DelayTime;
var Direction;
$('#tb1').append("<thead><tr><td>站名</td><td>車次</td><td>車種</td><td>山/海線</td><td>行車方向</td><td>到站時間</td><td>發車時間</td><td>誤點時間</td></tr></thead>");
$('#tb1').append("<tbody>");
for (var i = 0; i < data.length; i++) {
switch (data[i].TripLine) {
case 0:
TripLine = "不經山海線";
break;
case 1:
TripLine = "山線";
break;
case 2:
TripLine = "海線";
break;
}
DelayTime = data[i].DelayTime == 0 ? "準點" : "<span style='color:red'>誤點" + data[i].DelayTime+"分鐘</span>"
Direction = data[i].Direction == 0 ? "順行" : "逆行";
$('#tb1').append("<tr><th>" + data[i].StationName.Zh_tw + "</th><th>" + data[i].TrainNo + "</th><th>" + data[i].TrainTypeName.Zh_tw + "</th><th>" + TripLine + "</th><th>" + Direction + "</th><th>" + data[i].ScheduledArrivalTime + "</th><th>" + data[i].ScheduledDepartureTime + "</th><th>" + DelayTime + "</th></tr>");
}
$('#tb1').append("</tbody>");
},
error: function () {
alert('Error!!');
}
});
setTimeout("updateData()",1000);
}
updateData();
</pre>
<hr />
<code>alert('Error!!');</code>
<hr />
<span>請按下<kbd>Ctrl+F</kbd>進行文件搜尋</span>
</div>
</body>
</html>
##格式對齊
###justify自動切齊 ( 字跟字寬度自動平均
###badge 徽章
###以斷點做文字對齊 sm md lg xs(太小不用寫)
###truncate 隱藏多於的資料 (( sql 看過 則為刪除資料不留log
<div class="row">
<div class="col-2 text-truncate">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
</div>
</div>###相對
<div class="row">
<div class="d-inline-block text-truncate" style="max-width:150px">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
</div>
</div>###絕對
### Overflow = break ? 卷軸
其實以上bsclass css裡面就是overflow hidden
還有很多例如
去除底線
開頭字變大寫 capitalize 其實都是 css style 只是在稍加更改
### /RWD/13Utility_Text2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<div class="container">
<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>
<p class="text-capitalize">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>
<p class="text-left">h1. Bootstrap 4</p>
<p class="text-center">h1. Bootstrap 4</p>
<p class="text-right">h1. Bootstrap 4</p>
<p class="text-sm-left">h1. Bootstrap 4</p>
<p class="text-md-center">h1. Bootstrap 4</p>
<p class="text-lg-right">h1. Bootstrap 4</p>
<p class="text-xl-center">h1. Bootstrap 4</p>
<hr />
<div class="badge badge-danger text-wrap" style="width:50px">
This text window aaaaaa ssss aaaaaaa
</div>
<hr />
<div class="row">
<div class="col-2 text-truncate">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
</div>
</div>
<div class="row">
<div class="d-inline-block text-truncate" style="max-width:150px">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
</div>
</div>
<hr />
<p class="text-break">
PneumonoultramicroscopicsilicovolcanoconiosisPneumonoultramicroscopicsilicovolcanoconiosisPneumonoultramicroscopicsilicovolcanoconiosisPneumonoultramicroscopicsilicovolcanoconiosisPneumonoultramicroscopicsilicovolcanoconiosisPneumonoultramicroscopicsilicovolcanoconiosis
</p>
</div>
</body>
</html>##邊框 border
Rem 從根 window 繼承
### /RWD/14Utility_Borders.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<style>
span{
width:200px;height:200px;
}
</style>
</head>
<body>
<div class="container">
<hr />
<div class="row">
<div class="col-sm-12 bg-dark">
<span class="border"> </span>
<span class="border-top"> </span>
<span class="border-right"> </span>
<span class="border-bottom"> </span>
<span class="border-left"> </span>
</div>
</div>
<div class="row">
<div class="col-sm-12 bg-dark">
<span class="border border-danger"> </span>
<span class="border-top border-info"> </span>
</div>
</div>
<div class="row">
<div class="col-sm-12 bg-dark">
<span class="rounded"> </span>
<span class="rounded-top"> </span>
<span class="rounded-left"> </span>
<span class="rounded-circle"> </span>
<span class="rounded-pill"> </span>
</div>
</div>
</div>
</body>
</html>## Utility總結 比較牽涉到版型設計頂多牽涉到UX跟功能較無關
Display 顯示
Flex 對齊
color顏色
border邊框
剩下的老師沒講需要在看docs
##BS 對表格影響
table
caption
tfoot
thead
tr td
原本都有自己的位置定位
但放入bs就會整個布局都不一樣
有很多種bs樣式要去docs看比較清楚
然後連hover都會有改變
#改核心不要直接改
最好的方式是 複製起來然後自己弄個自己網站的css後置程式碼 然後改顏色等等 然後?只要link位置比原bs.css引入得更後面 就會吃越後面link那種
Table有沒有響應式呢? table-responsive-md
### 15Table.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="MyStyle.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="table-responsive-md">
<table class="table table-striped table-borderless table-hover">
<caption>成績單</caption>
<tfoot>
<tr>
<th colspan="9" class="">製表人:林老師</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
</tr>
<tr>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
</tr>
<tr>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
</tr>
<tr>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
</tr>
<tr>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
</tr>
<tr>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
</tr>
</tbody>
<thead class="table-dark">
<tr class="">
<th>姓名</th>
<th>性別</th>
<th>成績</th>
<th>姓名</th>
<th>性別</th>
<th>成績</th>
<th>姓名</th>
<th>性別</th>
<th>成績</th>
</tr>
</thead>
</table>
</div>
<hr />
<table class="table table-sm">
<caption>成績單</caption>
<tfoot>
<tr>
<th colspan="9" class="">製表人:林老師</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
</tr>
<tr>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
</tr>
<tr class="bg-dark text-light">
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
</tr>
<tr>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
</tr>
<tr>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
</tr>
<tr>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
</tr>
</tbody>
<thead class="table-dark">
<tr class="">
<th>姓名</th>
<th>性別</th>
<th>成績</th>
<th>姓名</th>
<th>性別</th>
<th>成績</th>
<th>姓名</th>
<th>性別</th>
<th>成績</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
##Card ( 有階層性
Pano? Bs3 改成
Card bs4
Components 組件
Content 內容
###階層性
Card-header/body/footer
接著用用flexbox去排版 col-md-4 …
Columns 列
Row 行
如果要擺圖片?
首先圖片先給響應式class card-img
1擺在卡片最上方
然後跟header/body/footer同階層
接著又分左側右側
2圖片左邊文字右邊 ( 卡片系統無法 ???
所以要利用網格系統 ( 會很多層 ( 好像是 卡片系統無法跟網格系統互相 扛拜 所以需要用 div下網格系統在 包住 卡片系統
還可以扛拜很多東西，老師說自己看 …
### /RWD/16Card.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="MyStyle.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="card bg-warning">
<div class="card-header">
Header
</div>
<img src="Desert.jpg" style="width:100%" />
<div class="card-body">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="OK" class="btn btn-primary" />
</footer>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card bg-danger">
<div class="card-header">
Header
</div>
<div class="card-body">
<h1>Title</h1>
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="OK" class="btn btn-outline-light" />
</footer>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card bg-primary">
<div class="card-header">
Header
</div>
<div class="row no-gutters">
<div class="col-md-4">
<img src="Desert.jpg" class="card-img" />
</div>
<div class="col-md-8">
<div class="card-body">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
</div>
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="OK" class="btn btn-warning" />
</footer>
</div>
</div>
</div>
</div>
</body>
</html>
###Card內容
Card-text/title/subtitle
Card-link
###List ul li
List-group
List-group-item
List-group-flush
也可以直接放到gridsystem ??
然後下head 可以融合看起來像一體設計
就是大小顏色樣式寫好了 可以共存的style
一樣去官網看
### /RWD/16Card.html ( 同一個檔案下半段
<hr />
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<h6 class="card-subtitle">Sub Card Title</h6>
<p class="card-text">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</p>
<a href="#" class="card-link">加入購物車</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card">
<div class="card-header">
Header
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">aaaaaa</li>
<li class="list-group-item">bbbbbb</li>
<li class="list-group-item">cccccc</li>
</ul>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card bg-primary">
<div class="card-header">
Header
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">aaaaaa</li>
<li class="list-group-item">bbbbbb</li>
<li class="list-group-item">cccccc</li>
</ul>
<img src="Desert.jpg" style="width:100%" />
<div class="card-body">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="OK" class="btn btn-primary" />
</footer>
</div>
</div>
</div>
<hr />
<ul class="list-group">
<li class="list-group-item">aaaaaa</li>
<li class="list-group-item">bbbbbb</li>
<li class="list-group-item">cccccc</li>
</ul>
</div>
##卡片系統搭配其他系統只要扛拜出來即可
##補充
預設是gridsystem https://getbootstrap.com/docs/4.0/layout/grid/
除了content 也可以用 row 或 card-group
總之card可以跟其他組件扛拜 要舉一反三十六
### /RWD/16Card.html ( 補充扛拜系統程式碼
<hr />
<div class="card-group">
<div class="card bg-warning">
<div class="card-header">
Header
</div>
<img src="Desert.jpg" style="width:100%" />
<div class="card-body">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="OK" class="btn btn-primary" />
</footer>
</div>
<div class="card bg-danger">
<div class="card-header">
Header
</div>
<div class="card-body">
<h1>Title</h1>
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="OK" class="btn btn-outline-light" />
</footer>
</div>
<div class="card bg-primary">
<div class="card-header">
Header
</div>
<div class="row no-gutters">
<div class="col-md-4">
<img src="Desert.jpg" class="card-img" />
</div>
<div class="col-md-8">
<div class="card-body">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
</div>
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="OK" class="btn btn-warning" />
</footer>
</div>
</div>
</div>
###/RWD/16Card.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="MyStyle.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="card bg-warning">
<div class="card-header">
Header
</div>
<img src="Desert.jpg" style="width:100%" />
<div class="card-body">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="OK" class="btn btn-primary" />
</footer>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card bg-danger">
<div class="card-header">
Header
</div>
<div class="card-body">
<h1>Title</h1>
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="OK" class="btn btn-outline-light" />
</footer>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card bg-primary">
<div class="card-header">
Header
</div>
<div class="row no-gutters">
<div class="col-md-4">
<img src="Desert.jpg" class="card-img" />
</div>
<div class="col-md-8">
<div class="card-body">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
</div>
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="OK" class="btn btn-warning" />
</footer>
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<h6 class="card-subtitle">Sub Card Title</h6>
<p class="card-text">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</p>
<a href="#" class="card-link">加入購物車</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card">
<div class="card-header">
Header
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">aaaaaa</li>
<li class="list-group-item">bbbbbb</li>
<li class="list-group-item">cccccc</li>
</ul>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card bg-primary">
<div class="card-header">
Header
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">aaaaaa</li>
<li class="list-group-item">bbbbbb</li>
<li class="list-group-item">cccccc</li>
</ul>
<img src="Desert.jpg" style="width:100%" />
<div class="card-body">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="OK" class="btn btn-primary" />
</footer>
</div>
</div>
</div>
<hr />
<div class="card-group">
<div class="card bg-warning">
<div class="card-header">
Header
</div>
<img src="Desert.jpg" style="width:100%" />
<div class="card-body">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="OK" class="btn btn-primary" />
</footer>
</div>
<div class="card bg-danger">
<div class="card-header">
Header
</div>
<div class="card-body">
<h1>Title</h1>
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="OK" class="btn btn-outline-light" />
</footer>
</div>
<div class="card bg-primary">
<div class="card-header">
Header
</div>
<div class="row no-gutters">
<div class="col-md-4">
<img src="Desert.jpg" class="card-img" />
</div>
<div class="col-md-8">
<div class="card-body">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
</div>
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="OK" class="btn btn-warning" />
</footer>
</div>
</div>
</div>
</body>
</html>
#MVC
Mvc 利用 tD(tDept) tE(tEmp)一個 model 只能配一個 view
那怎讓兩個Model配同一個view??
2種方式
ViewModel ( 為了一個view讀兩個model特地去做一個新的model出來 跟MVVM是兩碼子是
patidView
ViewModel
先介紹第一種 首先建立基底MODEL 接著建立一個新資料夾取名叫ViewModel藉此區分 ( 也可以放在原資料夾 接著在ViewModel資料夾中新增一個CVM.CS 要將兩個Model合併在這一個class中 記得要引入另外一個models才可以使用物件 using _05ViewModel.Models;
首先使用泛型list塞 tDepartment與tEmployee 這兩個class建立 CVM這個model
接著就要去編輯Controller 記得要把基底,model與原本的model都要進來 但是還是要將 dbEmployeeEntities 建立物件 接著藉由CVM這個類別建立新物件 將資料塞進去 直接將 CVM這個物件return回view
然後不用範本直接空view
打開只會看到layout
接著用razor引入 model資料 @model _05ViewModel.ViewModel.CVM
就開始用BS gridsystem排版左邊引入tDepartment 類別資料右邊tEmployee資料
此時已經把資料合併為CVM而且 讀出來了在這個頁面了
只要寫RAZOR 寫C#即可把資料做顯示
接著做塞選 點左側連結後後右側顯示塞選後的內容
接著要去修改controller傳過去的資料庫model內容要改成查詢式where
即可
###資料庫
###model
###/05ViewModel/Models/tDepartment.cs
//------------------------------------------------------------------------------
// <auto-generated>
// 這個程式碼是由範本產生。
//
// 對這個檔案進行手動變更可能導致您的應用程式產生未預期的行為。
// 如果重新產生程式碼，將會覆寫對這個檔案的手動變更。
// </auto-generated>
//------------------------------------------------------------------------------
namespace _05ViewModel.Models
{
using System;
using System.Collections.Generic;
public partial class tDepartment
{
public int fDepId { get; set; }
public string fDepName { get; set; }
}
}
### 05ViewModel/Models/tEmployee.cs
//------------------------------------------------------------------------------
// <auto-generated>
// 這個程式碼是由範本產生。
//
// 對這個檔案進行手動變更可能導致您的應用程式產生未預期的行為。
// 如果重新產生程式碼，將會覆寫對這個檔案的手動變更。
// </auto-generated>
//------------------------------------------------------------------------------
namespace _05ViewModel.Models
{
using System;
using System.Collections.Generic;
public partial class tEmployee
{
public string fEmpId { get; set; }
public string fName { get; set; }
public string fPhone { get; set; }
public Nullable<int> fDepId { get; set; }
}
}
###ViewModel
###05ViewModel/ViewModel/CVM.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using _05ViewModel.Models;
namespace _05ViewModel.ViewModel
{
public class CVM
{
public List<tDepartment> department { get; set; }
public List<tEmployee> employee { get; set; }
}
}
###/05ViewModel/Controllers/HomeController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
//06-2-3 using _06ViewModel.Models及using _06ViewModel.ViewModel
using _05ViewModel.Models;
using _05ViewModel.ViewModel;
namespace _05ViewModel.Controllers
{
public class HomeController : Controller
{
//06-2-4 於HomeController建立DB物件
dbEmployeeEntities db = new dbEmployeeEntities();
// GET: Home
//06-2-5 編輯ActionResult Index()的內容
public ActionResult Index(int id=1)
{
CVM cvm = new CVM()
{
department = db.tDepartment.ToList(),
employee = db.tEmployee.Where(m => m.fDepId == id).ToList()
};
return View(cvm);
}
}
}
###/05ViewModel/Views/Home/Index.cshtml
@*//06-3-3 在最上方加上@model _06ViewModel.ViewModel.CVMDepEmp*@
@model _05ViewModel.ViewModel.CVM
@{
ViewBag.Title = "部門員工列表";
}
<h2>Index</h2>
@*//06-3-5 在Index View中撰寫顯示畫面*@
<div class="row">
<div class="col-xs-3">
@foreach (var item in Model.department)
{
<p>
@Html.ActionLink(item.fDepName, "Index", new { id = item.fDepId })
</p>
}
</div>
<div class="col-xs-9">
<table class="table">
<tr>
<th>工號</th>
<th>姓名</th>
<th>電話</th>
<th>部門</th>
</tr>
@foreach (var item in Model.employee)
{
<tr>
<th>@item.fEmpId</th>
<th>@item.fName</th>
<th>@item.fPhone</th>
<th>@item.fDepId</th>
</tr>
}
</table>
</div>
</div>
###老師步驟
//06-1 建立ViewModel
//06-1-1 建立dbEmployee.mdb資料庫Model
// 在Models上按右鍵,選擇加入,新增項目,資料,ADO.NET實體資料模型
// 來自資料庫的EF Designer
// 連接dbEmployee.mdf資料庫,連線名稱不修改,按下一步按鈕
// 選擇Entity Framework 6.x, 按下一步按鈕
// 資料表"全選", 按完成鈕
// 若跳出詢問方法按確定鈕
//06-1-2 在專案上按右鍵,建置
//06-1-3 加入ViewModel資料夾
//06-1-4 using _06ViewModel.Models
//06-1-5 建立tDepartment和tEmployee的List物件
//06-2 建立HomeController
//06-2-1 在Controllers資料夾上按右鍵,加入,控制器,選擇 MVC5Controller-Empty
//06-2-2 指定控制器名稱為HomeController,並開啟HomeController
//06-2-3 using _06ViewModel.Models及using _06ViewModel.ViewModel
//06-2-4 於HomeController建立DB物件
//06-2-5 編輯ActionResult Index()的內容
//06-3 建立各個View
//06-3-1 在public ActionResult Index()上按右鍵,新增檢視,建立Index View
//06-3-2 進行下列設定:
// View name:Index
// Template:Empty (Without model)
// 勾選Use a layout pages
// 按下Add
//06-3-3 在最上方加上@model _06ViewModel.ViewModel.CVMDepEmp
接著做新增功能
一個是get 一個是 post 所以有兩個 action 因為要把資料帶到view給下拉式選單用 所以get裡面要傳tD
接著處理 POST 把接收到的前端資料寫到參數傳入ACTION 在傳入資料庫 儲存
要RETURN到你當初編輯前的頁面所以要帶部門參數
接著新增CREATE檢視頁面 ( 一樣不用範本 一樣引入資料MODEL
簡單繫結 form
Bs畫表單 ( 還沒教先講
Keyword
Form-horizontal/group/comtrol
然後利用gridsystem排版
Label for
弄完一個按鈕後 複製四次 改繫結位置 與 顯示字 即可
最後 用一個 submit的按鈕 Bs排版 offset 空格
更改部門欄位改為下拉式 回圈顯示選項 ( 要動態的從資料庫顯示出來 ( 不要寫死 不然維護麻煩
到此新增功能完成
###/05ViewModel/Controllers/HomeController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
//06-2-3 using _06ViewModel.Models及using _06ViewModel.ViewModel
using _05ViewModel.Models;
using _05ViewModel.ViewModel;
namespace _05ViewModel.Controllers
{
public class HomeController : Controller
{
//06-2-4 於HomeController建立DB物件
dbEmployeeEntities db = new dbEmployeeEntities();
// GET: Home
//06-2-5 編輯ActionResult Index()的內容
public ActionResult Index(int id=1)
{
CVM cvm = new CVM()
{
department = db.tDepartment.ToList(),
employee = db.tEmployee.Where(m => m.fDepId == id).ToList()
};
return View(cvm);
}
//06-2-6 於HomeController建立GET與POST的Create Action
public ActionResult Create()
{
return View(db.tDepartment.ToList());
}
[HttpPost]
public ActionResult Create(tEmployee emp)
{
db.tEmployee.Add(emp);
db.SaveChanges();
return RedirectToAction("Index",new { id=emp.fDepId});
}
}
}
###05ViewModel/Views/Home/Create.cshtml
@*//06-3-9 加入給下拉選單用的資料*@
@model IEnumerable<_05ViewModel.Models.tDepartment>
@{
ViewBag.Title = "新增員工";
}
@*//06-3-10 將英文字改為中文字*@
<h2>新增員工</h2>
@*//06-3-11 建立員工資料新增表單*@
<form method="post" action="@Url.Action("Create")">
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-2 control-label" for="fEmpId">員工代號</label>
<div class="col-md-10">
<input id="fEmpId" name="fEmpId" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="fDepId">部門</label>
<div class="col-md-10">
<select id="fDepId" name="fDepId" class="form-control">
@foreach (var item in Model)
{
<option value="@item.fDepId">@item.fDepName</option>
}
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="fName">姓名</label>
<div class="col-md-10">
<input id="fName" name="fName" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="fPhone">電話</label>
<div class="col-md-10">
<input id="fPhone" name="fPhone" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-md-offset-2">
<input id="Submit1" type="submit" value="新增" class="btn btn-danger" />
</div>
</div>
</div>
</form>
###老師步驟
//06-1 建立ViewModel
//06-1-1 建立dbEmployee.mdb資料庫Model
// 在Models上按右鍵,選擇加入,新增項目,資料,ADO.NET實體資料模型
// 來自資料庫的EF Designer
// 連接dbEmployee.mdf資料庫,連線名稱不修改,按下一步按鈕
// 選擇Entity Framework 6.x, 按下一步按鈕
// 資料表"全選", 按完成鈕
// 若跳出詢問方法按確定鈕
//06-1-2 在專案上按右鍵,建置
//06-1-3 加入ViewModel資料夾
//06-1-4 using _06ViewModel.Models
//06-1-5 建立tDepartment和tEmployee的List物件
//06-2 建立HomeController
//06-2-1 在Controllers資料夾上按右鍵,加入,控制器,選擇 MVC5Controller-Empty
//06-2-2 指定控制器名稱為HomeController,並開啟HomeController
//06-2-3 using _06ViewModel.Models及using _06ViewModel.ViewModel
//06-2-4 於HomeController建立DB物件
//06-2-5 編輯ActionResult Index()的內容
//06-2-6 於HomeController建立GET與POST的Create Action
//06-3 建立各個View
//06-3-1 在public ActionResult Index()上按右鍵,新增檢視,建立Index View
//06-3-2 進行下列設定:
// View name:Index
// Template:Empty (Without model)
// 勾選Use a layout pages
// 按下Add
//06-3-3 在最上方加上@model _06ViewModel.ViewModel.CVMDepEmp
//06-3-5 在Index View中撰寫顯示畫面
//06-3-6 執行及測試
//06-3-7 在public ActionResult Create()上按右鍵,新增檢視,建立CreateView
//06-3-8 進行下列設定:
// View name:Create
// Template:Empty (Without model)
// 勾選Use a layout pages
// 按下Add
//06-3-9 加入給下拉選單用的資料
//06-3-10 將英文字改為中文字
//06-3-11 建立員工資料新增表單
//06-3-12 執行及測試
#接著刪除功能 刪除後返回原來頁面
在view 寫 razor 用 actionlink 傳送 刪除的物件的id與指令
因為刪除沒有刪除自己的特別頁面所以可以從view寫回control
等等看程式碼
###/05ViewModel/Views/Home/Index.cshtml
@*//06-3-3 在最上方加上@model _06ViewModel.ViewModel.CVMDepEmp*@
@model _05ViewModel.ViewModel.CVM
@{
ViewBag.Title = "部門員工列表";
}
<h2>Index</h2>
@*//06-3-5 在Index View中撰寫顯示畫面*@
<div class="row">
<div class="col-xs-3">
@foreach (var item in Model.department)
{
<p>
@Html.ActionLink(item.fDepName, "Index", new { id = item.fDepId })
</p>
}
</div>
<div class="col-xs-9">
<table class="table">
<tr>
<th>工號</th>
<th>姓名</th>
<th>電話</th>
<th>部門</th>
<th>刪除</th>
</tr>
@foreach (var item in Model.employee)
{
<tr>
<td>@item.fEmpId</td>
<td>@item.fName</td>
<td>@item.fPhone</td>
<td>@item.fDepId</td>
<td>
@Html.ActionLink("刪除","Delete",new { id=item.fEmpId},new { @class="btn btn-danger", onclick="return confirm('確定刪除?')"})
</td>
</tr>
}
</table>
</div>
</div>
###05ViewModel/Controllers/HomeController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
//06-2-3 using _06ViewModel.Models及using _06ViewModel.ViewModel
using _05ViewModel.Models;
using _05ViewModel.ViewModel;
namespace _05ViewModel.Controllers
{
public class HomeController : Controller
{
//06-2-4 於HomeController建立DB物件
dbEmployeeEntities db = new dbEmployeeEntities();
// GET: Home
//06-2-5 編輯ActionResult Index()的內容
public ActionResult Index(int id=1)
{
CVM cvm = new CVM()
{
department = db.tDepartment.ToList(),
employee = db.tEmployee.Where(m => m.fDepId == id).ToList()
};
return View(cvm);
}
//06-2-6 於HomeController建立GET與POST的Create Action
public ActionResult Create()
{
return View(db.tDepartment.ToList());
}
[HttpPost]
public ActionResult Create(tEmployee emp)
{
db.tEmployee.Add(emp);
db.SaveChanges();
return RedirectToAction("Index",new { id=emp.fDepId});
}
public ActionResult Delete(string id)
{
var emp = db.tEmployee.Where(m=>m.fEmpId==id).FirstOrDefault();
db.tEmployee.Remove(emp);
db.SaveChanges();
return RedirectToAction("Index", new { id = emp.fDepId });
}
}
}
等老師最後程式碼與步驟 再一起貼 ???
#CRUD 接著做一次 MVC 新增修改刪除查詢 ( 細節觀念 也會交代
CRUD 新增修改刪除查詢 正統不講
create, read, update, and delete
修改跟新增其實很像
新增model 名稱其實可以跟資料庫不一樣是脫鉤的可以自取
Db first 有db 在建立model
建立好後建置編譯
接著 進入 model 確定 資料內容
首先 displayname ( 可以在view改或在model就做好
且要先 using componentmodel 這個 packge class
以MVC宗旨 ( 商業邏輯必須寫在 Model ( 如何寫呢?
應用程式端 或 model (擴充功能 跟類別很像castan) (下個單元會講 ?
Model好後右建新增control
Using model近來使用
使用模組物件 建立一個資料庫物件
利用return 將資料 db.tproduct.tolist() 到 index 這個 action
然後產生view用範本
model => model.fName
Lambda
###model
###/06CRUD/Models/tProduct.cs
//------------------------------------------------------------------------------
// <auto-generated>
// 這個程式碼是由範本產生。
//
// 對這個檔案進行手動變更可能導致您的應用程式產生未預期的行為。
// 如果重新產生程式碼，將會覆寫對這個檔案的手動變更。
// </auto-generated>
//------------------------------------------------------------------------------
namespace _06CRUD.Models
{
using System;
using System.Collections.Generic;
using System.ComponentModel;
public partial class tProduct
{
[DisplayName("產品編號")]
public string fId { get; set; }
[DisplayName("品名")]
public string fName { get; set; }
[DisplayName("單價")]
public Nullable<decimal> fPrice { get; set; }
[DisplayName("圖示")]
public string fImg { get; set; }
}
}
###06CRUD/Controllers/HomeController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using _06CRUD.Models;
namespace _06CRUD.Controllers
{
public class HomeController : Controller
{
dbProductEntities db = new dbProductEntities();
// GET: Home
public ActionResult Index()
{
return View(db.tProduct.ToList());
}
}
}
###/06CRUD/Views/Home/Index.cshtml
@model IEnumerable<_06CRUD.Models.tProduct>
@{
ViewBag.Title = "產品列表";
}
<h2>產品列表</h2>
<p>
@Html.ActionLink("新增商品", "Create")
</p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.fName)
</th>
<th>
@Html.DisplayNameFor(model => model.fPrice)
</th>
<th>
@Html.DisplayNameFor(model => model.fImg)
</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.fName)
</td>
<td>
@Html.DisplayFor(modelItem => item.fPrice)
</td>
<td>
@*@Html.DisplayFor(modelItem => item.fImg)*@
<img src="~/images/@item.fImg" width="120" />
</td>
<td>
@Html.ActionLink("修改", "Edit", new { id=item.fId }) |
@*@Html.ActionLink("Details", "Details", new { id=item.fId }) |*@
@Html.ActionLink("刪除", "Delete", new { id=item.fId })
</td>
</tr>
}
</table>
#接著講刪除但還是用之前的做法 ( 出現確認視窗刪除 ( 刪除資料檔案與資料庫欄位資料
正式的刪除頁面進行刪除
刪除除了資料庫內的檔案路徑要刪掉外
還要刪除實體檔案資料
首先在action 建立 delete
建造一個變數塞查詢式
接著把路徑資料抓出來
System.IO ( 只要跟實際檔案上傳下載刪除有關的類別
方法為 Delete
Server.MapPath (邏輯路徑跟實體路徑轉換)
刪除檔案後
然後將欄位資料位置給刪除
儲存
傳送至index
回到view用actionlink 傳送 確認刪除的alert
###/06CRUD/Controllers/HomeController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using _06CRUD.Models;
namespace _06CRUD.Controllers
{
public class HomeController : Controller
{
dbProductEntities db = new dbProductEntities();
// GET: Home
public ActionResult Index()
{
return View(db.tProduct.ToList());
}
public ActionResult Delete(string id)
{
var products = db.tProduct.Where(m => m.fId == id).FirstOrDefault();
string fileName = products.fImg;
System.IO.File.Delete(Server.MapPath("~/images/"+fileName));
db.tProduct.Remove(products);
db.SaveChanges();
return RedirectToAction("Index");
}
}
}
###/06CRUD/Views/Home/Index.cshtml
@model IEnumerable<_06CRUD.Models.tProduct>
@{
ViewBag.Title = "產品列表";
}
<h2>產品列表</h2>
<p>
@Html.ActionLink("新增商品", "Create")
</p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.fName)
</th>
<th>
@Html.DisplayNameFor(model => model.fPrice)
</th>
<th>
@Html.DisplayNameFor(model => model.fImg)
</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.fName)
</td>
<td>
@Html.DisplayFor(modelItem => item.fPrice)
</td>
<td>
@*@Html.DisplayFor(modelItem => item.fImg)*@
<img src="~/images/@item.fImg" width="120" />
</td>
<td>
@Html.ActionLink("修改", "Edit", new { id=item.fId }) |
@*@Html.ActionLink("Details", "Details", new { id=item.fId }) |*@
@Html.ActionLink("刪除", "Delete", new { id=item.fId },new { onclick="return confirm('確定刪除??')"})
</td>
</tr>
}
</table>
#CRUD剩下CU 下次繼續 ( 重點為空值??
Last updated
Was this helpful?
