2019/0603/Bootstrap Components RWD End + ASP.NET_MVC Part2 PhotoSharing CodeFirst & Model 驗證
#bootstrap components
##Modal 互動視窗
利用一個盒子把物件隱藏在藉由BUTTON或…觸發顯示
利用DATA-
Fade 淡入淡出
一開始直接顯示modal 所以要用jq show
###ftp://web@10.10.3.189/RWD/36Model.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="modal" id="LoginModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>Login</h3>
<button class="close" data-dismiss="modal"> ×</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="email">Email:</label>
<input id="email" type="email" class="form-control" placeholder="Enter email..." required />
<div>
</div>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input id="pwd" type="password" class="form-control" placeholder="Password" required />
<div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<input id="" type="button" value="Cancel" class="btn btn-light" data-dismiss="modal" />
<input id="" type="button" value="Login" class="btn btn-primary" />
</div>
</div>
</div>
</div>
<div class="text-right">
<input type="button" value="登入" class="btn btn-link" data-toggle="modal" data-target="#LoginModal" /> | <input type="button" value="聯絡我們" class="btn btn-link" />
</div>
<div class="jumbotron ">
<h1 class="MyFontForH"><strong>世界那麼大 我想去看看</strong></h1>
<p class="MyFontForP">錢包那麼小 是要看三小</p>
<hr />
<input id="Button1" type="button" value="了解更多行程" class="btn btn-success MyFontForP" />
</div>
<div class="media">
<div class="media-left">
<img src="images/01.jpg" class="media-object img-thumbnail" width="200" />
</div>
<div class="media-body">
<h3 class="media-heading MyFont">瑪雅金字塔遺跡</h3>
<p class="MyFont">
台南市刑大副大隊長林清榮表示，陳女臉部朝下被壓在一張雙人沙發下，
臉部朝下雙腳及部分頭髮露出沙發外，由於死者衣著整齊，口中被塞入深咖啡色抹布，
被發現時已有屍斑。由於陳女陳屍位置特殊，警方初步推估有他殺可能，並研判是窒息死亡，
詳細死因則待檢察官會同法醫相驗確認。
</p>
</div>
</div>
<div class="media">
<div class="media-body">
<h3 class="media-heading MyFont">柬埔寨吳哥窟</h3>
<p class="MyFont">
台南市刑大副大隊長林清榮表示，陳女臉部朝下被壓在一張雙人沙發下，
臉部朝下雙腳及部分頭髮露出沙發外，由於死者衣著整齊，口中被塞入深咖啡色抹布，
被發現時已有屍斑。由於陳女陳屍位置特殊，警方初步推估有他殺可能，並研判是窒息死亡，
詳細死因則待檢察官會同法醫相驗確認。
</p>
</div>
<div class="media-right">
<img src="images/02.jpg" class="media-object img-thumbnail" width="200" />
</div>
</div>
<div class="media">
<div class="col-md-5">
<div class="media-left media-middle">
<img src="images/03.jpg" class="media-object img-thumbnail" width="200" />
</div>
<div class="media-body">
<h3 class="media-heading MyFont">越南下龍灣</h3>
<p class="MyFont">
台南市刑大副大隊長林清榮表示，陳女臉部朝下被壓在一張雙人沙發下，
臉部朝下雙腳及部分頭髮露出沙發外，由於死者衣著整齊，口中被塞入深咖啡色抹布，
被發現時已有屍斑。由於陳女陳屍位置特殊，警方初步推估有他殺可能，並研判是窒息死亡，
詳細死因則待檢察官會同法醫相驗確認。
</p>
</div>
</div>
<div class="col-md-7">
<div class="media-body">
<h3 class="media-heading MyFont">埃及金字塔與人面獅身</h3>
<p class="MyFont">
台南市刑大副大隊長林清榮表示，陳女臉部朝下被壓在一張雙人沙發下，
臉部朝下雙腳及部分頭髮露出沙發外，由於死者衣著整齊，口中被塞入深咖啡色抹布，
被發現時已有屍斑。由於陳女陳屍位置特殊，警方初步推估有他殺可能，並研判是窒息死亡，
詳細死因則待檢察官會同法醫相驗確認。
</p>
</div>
<div class="media-right">
<img src="images/04.jpg" class="media-object img-thumbnail" width="200" />
</div>
</div>
</div>
<div class="media">
<div class="col-md-6">
<div class="media-body">
<h3 class="media-heading MyFont">梵帝崗聖彼德大教堂</h3>
<p class="MyFont">
桃園市消防局表示，28日晚間9時26分，敬鵬平鎮3廠發生火警，到場時得知有2名移工受困，且當時1樓僅有濃煙，尚未有火光，2名小隊長各帶1組人員總共7人進入1樓，22時26分時指揮所發現狀況不對，用無線電急喊撤退，但只得到游曜陽回應「收到」，就再也聽不到任何回音。
指揮所研判7人發生意外，隨即整備搜救隊伍進入。
</p>
</div>
<div class="media-left media-middle">
<img src="images/05.jpg" width="250" class="media-object img-thumbnail" />
</div>
</div>
<div class="col-md-6">
<div class="media-body">
<h3 class="media-heading MyFont">台北101</h3>
<p class="MyFont">
桃園市消防局表示，28日晚間9時26分，敬鵬平鎮3廠發生火警，到場時得知有2名移工受困，且當時1樓僅有濃煙，尚未有火光，2名小隊長各帶1組人員總共7人進入1樓，22時26分時指揮所發現狀況不對，用無線電急喊撤退，但只得到游曜陽回應「收到」，就再也聽不到任何回音。
指揮所研判7人發生意外，隨即整備搜救隊伍進入。
</p>
</div>
<div class="media-right media-middle">
<img src="images/06.jpg" width="200" class="media-object img-thumbnail" />
</div>
</div>
</div>
<div class="media">
<div class="media-left media-middle">
<img src="images/07.jpg" width="250" class="media-object img-thumbnail" />
</div>
<div class="media-body">
<h3 class="media-heading MyFont">尼加拉瓜大瀑布</h3>
<p class="MyFont">
桃園市消防局表示，28日晚間9時26分，敬鵬平鎮3廠發生火警，到場時得知有2名移工受困，且當時1樓僅有濃煙，尚未有火光，2名小隊長各帶1組人員總共7人進入1樓，22時26分時指揮所發現狀況不對，用無線電急喊撤退，但只得到游曜陽回應「收到」，就再也聽不到任何回音。
指揮所研判7人發生意外，隨即整備搜救隊伍進入。
</p>
</div>
</div>
<div class="media">
<div class="media-body">
<h3 class="media-heading MyFont">雪梨歌劇院</h3>
<p class="MyFont">
桃園市消防局表示，28日晚間9時26分，敬鵬平鎮3廠發生火警，到場時得知有2名移工受困，且當時1樓僅有濃煙，尚未有火光，2名小隊長各帶1組人員總共7人進入1樓，22時26分時指揮所發現狀況不對，用無線電急喊撤退
</p>
</div>
<div class="media-left media-middle">
<img src="images/08.jpg" width="200" class="media-object img-thumbnail" />
</div>
</div>
<div id="carouselOne" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselOne" data-slide-to="0" class="active"></li>
<li data-target="#carouselOne" data-slide-to="1"></li>
<li data-target="#carouselOne" data-slide-to="2"></li>
<li data-target="#carouselOne" data-slide-to="3"></li>
<li data-target="#carouselOne" data-slide-to="4"></li>
<li data-target="#carouselOne" data-slide-to="5"></li>
<li data-target="#carouselOne" data-slide-to="6"></li>
<li data-target="#carouselOne" data-slide-to="7"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/11.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/12.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/13.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/14.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/15.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/16.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/17.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/18.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselOne" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carouselOne" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="Scripts/bootstrap.bundle.min.js"></script>
<script>
$('#carouselOne').carousel({interval:2000});
</script>
</body>
</html>
##NavBar 導覽列
非常多階層要特別注意
Navbar 不等於 nav
所以有個class是 navbar-nav
html5 nav
collapse -> navbar-collaps 摺疊
接著做漢堡選單按鈕 去把折疊的東西叫出來收回去
navbar-toggler-icon
### ftp://web@10.10.3.189/RWD/37NavBar.html
<nav class="navbar navbar-light bg-light">
<div class="container">
<a href="#" class="navbar-brand h1">WDA</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#MyMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="MyMenu">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Features</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact Us</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled">Order</a>
</li>
</ul>
</div>
</div>
</nav>
處理響應式斷點 md改為下拉式選單 sm才是漢堡選單
三版的顏色或大小要去改核心
但四版的有屬性可以扛拜
### ftp://web@10.10.3.189/RWD/37NavBar.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>
<nav class="navbar navbar-expand-md navbar-light bg-info">
<div class="container">
<a href="#" class="navbar-brand h1">WDA</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#MyMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="MyMenu">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Features</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
Item
</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item disabled">Another action</a>
<a href="#" class="dropdown-item">Something else here</a>
<a href="#" class="dropdown-item">Separated link</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact Us</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled">Order</a>
</li>
</ul>
<form class="form-inline" action="https://www.google.com/search" method="get">
<div>
<input id="Text1" name="q" class="form-control" type="text" placeholder="請輸入關鍵字..." />
<input id="Submit1" type="submit" value="Search" class="btn btn-success" />
</div>
</form>
</div>
</div>
</nav>
<div class="container">
<div class="modal fade" id="LoginModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>Login</h3>
<button class="close" data-dismiss="modal"> ×</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="email">Email:</label>
<input id="email" type="email" class="form-control" placeholder="Enter email..." required />
<div>
</div>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input id="pwd" type="password" class="form-control" placeholder="Password" required />
<div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<input id="" type="button" value="Cancel" class="btn btn-light" data-dismiss="modal" />
<input id="" type="button" value="Login" class="btn btn-primary" />
</div>
</div>
</div>
</div>
<div class="text-right">
<input type="button" value="登入" class="btn btn-link" data-toggle="modal" data-target="#LoginModal" /> | <input type="button" value="聯絡我們" class="btn btn-link" />
</div>
<div class="jumbotron ">
<h1 class="MyFontForH"><strong>世界那麼大 我想去看看</strong></h1>
<p class="MyFontForP">錢包那麼小 是要看三小</p>
<hr />
<input id="Button1" type="button" value="了解更多行程" class="btn btn-success MyFontForP" />
</div>
<div class="media">
<div class="media-left">
<img src="images/01.jpg" class="media-object img-thumbnail" width="200" />
</div>
<div class="media-body">
<h3 class="media-heading MyFont">瑪雅金字塔遺跡</h3>
<p class="MyFont">
台南市刑大副大隊長林清榮表示，陳女臉部朝下被壓在一張雙人沙發下，
臉部朝下雙腳及部分頭髮露出沙發外，由於死者衣著整齊，口中被塞入深咖啡色抹布，
被發現時已有屍斑。由於陳女陳屍位置特殊，警方初步推估有他殺可能，並研判是窒息死亡，
詳細死因則待檢察官會同法醫相驗確認。
</p>
</div>
</div>
<div class="media">
<div class="media-body">
<h3 class="media-heading MyFont">柬埔寨吳哥窟</h3>
<p class="MyFont">
台南市刑大副大隊長林清榮表示，陳女臉部朝下被壓在一張雙人沙發下，
臉部朝下雙腳及部分頭髮露出沙發外，由於死者衣著整齊，口中被塞入深咖啡色抹布，
被發現時已有屍斑。由於陳女陳屍位置特殊，警方初步推估有他殺可能，並研判是窒息死亡，
詳細死因則待檢察官會同法醫相驗確認。
</p>
</div>
<div class="media-right">
<img src="images/02.jpg" class="media-object img-thumbnail" width="200" />
</div>
</div>
<div class="media">
<div class="col-md-5">
<div class="media-left media-middle">
<img src="images/03.jpg" class="media-object img-thumbnail" width="200" />
</div>
<div class="media-body">
<h3 class="media-heading MyFont">越南下龍灣</h3>
<p class="MyFont">
台南市刑大副大隊長林清榮表示，陳女臉部朝下被壓在一張雙人沙發下，
臉部朝下雙腳及部分頭髮露出沙發外，由於死者衣著整齊，口中被塞入深咖啡色抹布，
被發現時已有屍斑。由於陳女陳屍位置特殊，警方初步推估有他殺可能，並研判是窒息死亡，
詳細死因則待檢察官會同法醫相驗確認。
</p>
</div>
</div>
<div class="col-md-7">
<div class="media-body">
<h3 class="media-heading MyFont">埃及金字塔與人面獅身</h3>
<p class="MyFont">
台南市刑大副大隊長林清榮表示，陳女臉部朝下被壓在一張雙人沙發下，
臉部朝下雙腳及部分頭髮露出沙發外，由於死者衣著整齊，口中被塞入深咖啡色抹布，
被發現時已有屍斑。由於陳女陳屍位置特殊，警方初步推估有他殺可能，並研判是窒息死亡，
詳細死因則待檢察官會同法醫相驗確認。
</p>
</div>
<div class="media-right">
<img src="images/04.jpg" class="media-object img-thumbnail" width="200" />
</div>
</div>
</div>
<div class="media">
<div class="col-md-6">
<div class="media-body">
<h3 class="media-heading MyFont">梵帝崗聖彼德大教堂</h3>
<p class="MyFont">
桃園市消防局表示，28日晚間9時26分，敬鵬平鎮3廠發生火警，到場時得知有2名移工受困，且當時1樓僅有濃煙，尚未有火光，2名小隊長各帶1組人員總共7人進入1樓，22時26分時指揮所發現狀況不對，用無線電急喊撤退，但只得到游曜陽回應「收到」，就再也聽不到任何回音。
指揮所研判7人發生意外，隨即整備搜救隊伍進入。
</p>
</div>
<div class="media-left media-middle">
<img src="images/05.jpg" width="250" class="media-object img-thumbnail" />
</div>
</div>
<div class="col-md-6">
<div class="media-body">
<h3 class="media-heading MyFont">台北101</h3>
<p class="MyFont">
桃園市消防局表示，28日晚間9時26分，敬鵬平鎮3廠發生火警，到場時得知有2名移工受困，且當時1樓僅有濃煙，尚未有火光，2名小隊長各帶1組人員總共7人進入1樓，22時26分時指揮所發現狀況不對，用無線電急喊撤退，但只得到游曜陽回應「收到」，就再也聽不到任何回音。
指揮所研判7人發生意外，隨即整備搜救隊伍進入。
</p>
</div>
<div class="media-right media-middle">
<img src="images/06.jpg" width="200" class="media-object img-thumbnail" />
</div>
</div>
</div>
<div class="media">
<div class="media-left media-middle">
<img src="images/07.jpg" width="250" class="media-object img-thumbnail" />
</div>
<div class="media-body">
<h3 class="media-heading MyFont">尼加拉瓜大瀑布</h3>
<p class="MyFont">
桃園市消防局表示，28日晚間9時26分，敬鵬平鎮3廠發生火警，到場時得知有2名移工受困，且當時1樓僅有濃煙，尚未有火光，2名小隊長各帶1組人員總共7人進入1樓，22時26分時指揮所發現狀況不對，用無線電急喊撤退，但只得到游曜陽回應「收到」，就再也聽不到任何回音。
指揮所研判7人發生意外，隨即整備搜救隊伍進入。
</p>
</div>
</div>
<div class="media">
<div class="media-body">
<h3 class="media-heading MyFont">雪梨歌劇院</h3>
<p class="MyFont">
桃園市消防局表示，28日晚間9時26分，敬鵬平鎮3廠發生火警，到場時得知有2名移工受困，且當時1樓僅有濃煙，尚未有火光，2名小隊長各帶1組人員總共7人進入1樓，22時26分時指揮所發現狀況不對，用無線電急喊撤退
</p>
</div>
<div class="media-left media-middle">
<img src="images/08.jpg" width="200" class="media-object img-thumbnail" />
</div>
</div>
<div id="carouselOne" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselOne" data-slide-to="0" class="active"></li>
<li data-target="#carouselOne" data-slide-to="1"></li>
<li data-target="#carouselOne" data-slide-to="2"></li>
<li data-target="#carouselOne" data-slide-to="3"></li>
<li data-target="#carouselOne" data-slide-to="4"></li>
<li data-target="#carouselOne" data-slide-to="5"></li>
<li data-target="#carouselOne" data-slide-to="6"></li>
<li data-target="#carouselOne" data-slide-to="7"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/11.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/12.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/13.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/14.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/15.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/16.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/17.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/18.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselOne" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carouselOne" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="Scripts/bootstrap.bundle.min.js"></script>
<script>
$('#carouselOne').carousel({ interval: 2000 });
// $('#LoginModal').modal('show');
</script>
</body>
</html>
##38Collapse.html 摺疊
md暫時折疊 sm顯示之類或者
### ftp://web@10.10.3.189/RWD/38Collapse.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">
<input id="Button1" type="button" value="一次控制兩個" data-toggle="collapse" data-target=".collapseMulti" />
<div class="card bg-warning">
<div class="card-header">
<a data-toggle="collapse" href="#collapse1">這是一個景點介紹</a>
</div>
<div class="collapse collapseMulti" id="collapse1">
<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>
<hr />
<button data-toggle="collapse" data-target="#collapse2">景點介紹</button>
<div class="collapse collapseMulti" id="collapse2">
<div class="card bg-warning">
<div class="card-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>
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="Scripts/bootstrap.bundle.min.js"></script>
<script>
</script>
</body>
</html>
Collapse 如果要預設要show 只要扛拜show即可
以下範例為 三個 但預設顯示第一個 案二或三才切換
###手風琴導覽
### ftp://web@10.10.3.189/RWD/39Collapse2.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="accordion" id="accordion">
<div class="card">
<div class="card-header" id="heading1">
<button data-toggle="collapse" data-target="#collapse1" class="btn btn-link">這是一個景點介紹1</button>
</div>
<div class="collapse show" id="collapse1" data-parent="#accordion">
<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>
<div class="card">
<div class="card-header" id="heading2">
<button data-toggle="collapse" data-target="#collapse2" class="btn btn-link">這是一個景點介紹2</button>
</div>
<div class="collapse" id="collapse2" data-parent="#accordion">
<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>
<div class="card">
<div class="card-header" id="heading3">
<button data-toggle="collapse" data-target="#collapse3" class="btn btn-link">這是一個景點介紹3</button>
</div>
<div class="collapse" id="collapse3" data-parent="#accordion">
<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>
</div>
</div>
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="Scripts/bootstrap.bundle.min.js"></script>
<script>
</script>
</body>
</html>
##最後所有功能實作在頁面上
### ftp://web@10.10.3.189/RWD/40Collapse.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>
<nav class="navbar navbar-expand-md navbar-light bg-info">
<div class="container">
<a href="#" class="navbar-brand h1">WDA</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#MyMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="MyMenu">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Features</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
Item
</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item disabled">Another action</a>
<a href="#" class="dropdown-item">Something else here</a>
<a href="#" class="dropdown-item">Separated link</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact Us</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled">Order</a>
</li>
</ul>
<form class="form-inline" action="https://www.google.com/search" method="get">
<div>
<input id="Text1" name="q" class="form-control" type="text" placeholder="請輸入關鍵字..." />
<input id="Submit1" type="submit" value="Search" class="btn btn-success" />
</div>
</form>
</div>
</div>
</nav>
<div class="container">
<div class="modal fade" id="LoginModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>Login</h3>
<button class="close" data-dismiss="modal"> ×</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="email">Email:</label>
<input id="email" type="email" class="form-control" placeholder="Enter email..." required />
<div>
</div>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input id="pwd" type="password" class="form-control" placeholder="Password" required />
<div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<input id="" type="button" value="Cancel" class="btn btn-light" data-dismiss="modal" />
<input id="" type="button" value="Login" class="btn btn-primary" />
</div>
</div>
</div>
</div>
<div class="text-right">
<input type="button" value="登入" class="btn btn-link" data-toggle="modal" data-target="#LoginModal" /> | <input type="button" value="聯絡我們" class="btn btn-link" />
</div>
<div class="jumbotron ">
<h1 class="MyFontForH"><strong>世界那麼大 我想去看看</strong></h1>
<p class="MyFontForP">錢包那麼小 是要看三小</p>
<hr />
<input id="Button1" type="button" value="了解更多行程" class="btn btn-success MyFontForP" data-toggle="collapse" data-target="#collapse1" />
</div>
<div class="collapse" id="collapse1">
<div class="media">
<div class="media-left">
<img src="images/01.jpg" class="media-object img-thumbnail" width="200" />
</div>
<div class="media-body">
<h3 class="media-heading MyFont">瑪雅金字塔遺跡</h3>
<p class="MyFont">
台南市刑大副大隊長林清榮表示，陳女臉部朝下被壓在一張雙人沙發下，
臉部朝下雙腳及部分頭髮露出沙發外，由於死者衣著整齊，口中被塞入深咖啡色抹布，
被發現時已有屍斑。由於陳女陳屍位置特殊，警方初步推估有他殺可能，並研判是窒息死亡，
詳細死因則待檢察官會同法醫相驗確認。
</p>
</div>
</div>
<div class="media">
<div class="media-body">
<h3 class="media-heading MyFont">柬埔寨吳哥窟</h3>
<p class="MyFont">
台南市刑大副大隊長林清榮表示，陳女臉部朝下被壓在一張雙人沙發下，
臉部朝下雙腳及部分頭髮露出沙發外，由於死者衣著整齊，口中被塞入深咖啡色抹布，
被發現時已有屍斑。由於陳女陳屍位置特殊，警方初步推估有他殺可能，並研判是窒息死亡，
詳細死因則待檢察官會同法醫相驗確認。
</p>
</div>
<div class="media-right">
<img src="images/02.jpg" class="media-object img-thumbnail" width="200" />
</div>
</div>
<div class="media">
<div class="col-md-5">
<div class="media-left media-middle">
<img src="images/03.jpg" class="media-object img-thumbnail" width="200" />
</div>
<div class="media-body">
<h3 class="media-heading MyFont">越南下龍灣</h3>
<p class="MyFont">
台南市刑大副大隊長林清榮表示，陳女臉部朝下被壓在一張雙人沙發下，
臉部朝下雙腳及部分頭髮露出沙發外，由於死者衣著整齊，口中被塞入深咖啡色抹布，
被發現時已有屍斑。由於陳女陳屍位置特殊，警方初步推估有他殺可能，並研判是窒息死亡，
詳細死因則待檢察官會同法醫相驗確認。
</p>
</div>
</div>
<div class="col-md-7">
<div class="media-body">
<h3 class="media-heading MyFont">埃及金字塔與人面獅身</h3>
<p class="MyFont">
台南市刑大副大隊長林清榮表示，陳女臉部朝下被壓在一張雙人沙發下，
臉部朝下雙腳及部分頭髮露出沙發外，由於死者衣著整齊，口中被塞入深咖啡色抹布，
被發現時已有屍斑。由於陳女陳屍位置特殊，警方初步推估有他殺可能，並研判是窒息死亡，
詳細死因則待檢察官會同法醫相驗確認。
</p>
</div>
<div class="media-right">
<img src="images/04.jpg" class="media-object img-thumbnail" width="200" />
</div>
</div>
</div>
<div class="media">
<div class="col-md-6">
<div class="media-body">
<h3 class="media-heading MyFont">梵帝崗聖彼德大教堂</h3>
<p class="MyFont">
桃園市消防局表示，28日晚間9時26分，敬鵬平鎮3廠發生火警，到場時得知有2名移工受困，且當時1樓僅有濃煙，尚未有火光，2名小隊長各帶1組人員總共7人進入1樓，22時26分時指揮所發現狀況不對，用無線電急喊撤退，但只得到游曜陽回應「收到」，就再也聽不到任何回音。
指揮所研判7人發生意外，隨即整備搜救隊伍進入。
</p>
</div>
<div class="media-left media-middle">
<img src="images/05.jpg" width="250" class="media-object img-thumbnail" />
</div>
</div>
<div class="col-md-6">
<div class="media-body">
<h3 class="media-heading MyFont">台北101</h3>
<p class="MyFont">
桃園市消防局表示，28日晚間9時26分，敬鵬平鎮3廠發生火警，到場時得知有2名移工受困，且當時1樓僅有濃煙，尚未有火光，2名小隊長各帶1組人員總共7人進入1樓，22時26分時指揮所發現狀況不對，用無線電急喊撤退，但只得到游曜陽回應「收到」，就再也聽不到任何回音。
指揮所研判7人發生意外，隨即整備搜救隊伍進入。
</p>
</div>
<div class="media-right media-middle">
<img src="images/06.jpg" width="200" class="media-object img-thumbnail" />
</div>
</div>
</div>
<div class="media">
<div class="media-left media-middle">
<img src="images/07.jpg" width="250" class="media-object img-thumbnail" />
</div>
<div class="media-body">
<h3 class="media-heading MyFont">尼加拉瓜大瀑布</h3>
<p class="MyFont">
桃園市消防局表示，28日晚間9時26分，敬鵬平鎮3廠發生火警，到場時得知有2名移工受困，且當時1樓僅有濃煙，尚未有火光，2名小隊長各帶1組人員總共7人進入1樓，22時26分時指揮所發現狀況不對，用無線電急喊撤退，但只得到游曜陽回應「收到」，就再也聽不到任何回音。
指揮所研判7人發生意外，隨即整備搜救隊伍進入。
</p>
</div>
</div>
<div class="media">
<div class="media-body">
<h3 class="media-heading MyFont">雪梨歌劇院</h3>
<p class="MyFont">
桃園市消防局表示，28日晚間9時26分，敬鵬平鎮3廠發生火警，到場時得知有2名移工受困，且當時1樓僅有濃煙，尚未有火光，2名小隊長各帶1組人員總共7人進入1樓，22時26分時指揮所發現狀況不對，用無線電急喊撤退
</p>
</div>
<div class="media-left media-middle">
<img src="images/08.jpg" width="200" class="media-object img-thumbnail" />
</div>
</div>
</div>
<div id="carouselOne" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselOne" data-slide-to="0" class="active"></li>
<li data-target="#carouselOne" data-slide-to="1"></li>
<li data-target="#carouselOne" data-slide-to="2"></li>
<li data-target="#carouselOne" data-slide-to="3"></li>
<li data-target="#carouselOne" data-slide-to="4"></li>
<li data-target="#carouselOne" data-slide-to="5"></li>
<li data-target="#carouselOne" data-slide-to="6"></li>
<li data-target="#carouselOne" data-slide-to="7"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/11.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/12.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/13.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/14.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/15.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/16.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/17.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/18.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselOne" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carouselOne" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="Scripts/bootstrap.bundle.min.js"></script>
<script>
$('#carouselOne').carousel({ interval: 2000 });
// $('#LoginModal').modal('show');
</script>
</body>
</html>
#MVC Part2 強度很強 從頭講到尾 全部接續下去 都是同一個主題
帶照片 討論區 可以留言
示範用範本
因為有載入範本連layout都會做出來 bootstrap也會裝上去
##01_Code first
class -> model -> DB
##靜態類別圖(永存資料) 以前只有建立過動態類別
UML?
Student .
+SID
+SName
+等於public
以往都會先導入資料庫
現在則是直接編譯model
所以也要先設計一下資料庫的關聯
主留言板 table 1 對 多 留言回復table
Webform是用泛型處理常式存photo檔案(二進位資料)byte[]陣列
等等會講那怎用controller處理
##接著很重要 model寫關聯
實作的資料庫只有一對多，沒有多對多
Virtual 虛擬 只要繼承這個類別 都可以 override ???
商業邏輯寫在model就可以在編輯controller與view時輕鬆很多
##接著要寫驗證在model裡面
要先using System.ComponentModel
與 using System.ComponentModel.DataAnnotations
只要 寫 XXXID 就會自動變 PK
但是如果要指定呢?
[Key] 只要在上面加上這個即可
[Required] 必填直接加上這個即可
[HiddenInput] 用於讀取不是要填寫的就做隱藏欄位 ( 要using System.Web.Mvc
[DataType(DataType.Date)] 驗證時間是否為當時時間，用於顯示時間但不給編輯
[DisplayFormat(DataFormatString=”{0:yyyy/MM/dd}”)],ApplyFormatInEditMode=true)
格式要求且編輯時直接套用
[DataType(DataType.MultilineText),StringLength(400)] 多行文字方塊最多400字
[MaxLength] 二進位資料最大值
定義越豐富前面可以寫更少
[DisplayName] 顯示字
##自訂驗證器
直接做一個public class名稱字定，但是要繼承於 ValidationAttribute
建構子
Override 覆蓋它原本的方法IsValid
驗證通過傳true否則false
?true:false
###ftp://mvc@10.10.3.189/PhotoSharing/PhotoSharing/Models/Photo.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;
namespace PhotoSharing.Models
{
//1.1加入Photo Model==> Properties & Annotations & Validation
public class Photo
{
//我是primary key
public int PhotoID { get; set; }
//Annotations & Validation
[Required]
[StringLength(100)]
[DisplayName("主題")]
public string Title { get; set; }
[Required]
[MaxLength]
[DisplayName("上傳照片")]
public byte[] PhotoFile { get; set; }
[HiddenInput(DisplayValue =false)]
public string ImageMimeType { get; set; }
[Required]
[DataType(DataType.MultilineText),StringLength(400)]
[DisplayName("照片描述")]
public string Description { get; set; }
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString ="{0:yyyy/MM/dd}",ApplyFormatInEditMode =true)]
[DisplayName("建立日期")]
public DateTime CratedDate { get; set; }
[Required]
//1.3 在UserName屬性採用自訂驗證擴充 CheckUsername
[DisplayName("發表人名稱")]
[CheckUsername]
public string UserName { get; set; }
//1.2 自訂驗證擴充 CheckUsername Model,繼承ValidationAttribute
public class CheckUsername:ValidationAttribute
{
//1.2.2 在Constructor給ErrorMessage初始值
public CheckUsername()
{
ErrorMessage = "發表人名稱至少2個字";
}
//1.2.1 override IsValid 加入自訂規則
public override bool IsValid(object value)
{
return (value.ToString().Length >= 2) ? true : false;
}
}
}
}
###ftp://mvc@10.10.3.189/PhotoSharing/PhotoSharing/Models/Comment.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
namespace PhotoSharing.Models
{
public class Comment
{
[Key]
public int CommentID { get; set; }
[Required]
[DisplayName("回覆標題")]
public string Subject { get; set; }
[Required]
[DisplayName("回覆內容")]
[DataType(DataType.MultilineText), StringLength(200)]
public string Body { get; set; }
[Required]
public string UserName { get; set; }
//建立關聯
//1.5.1加入Photo 與 Comment 的 relationship
//繼承virtual的任何類別均可將其覆寫：
public virtual Photo Photo { get; set; }
//1.5.2 Foreign Key
public int PhotoID { get; set; }
}
}
###老師步驟
//1.1加入Photo Model==> Properties & Annotations & Validation
//1.2 自訂驗證擴充 CheckUsername Model
//1.2.1 override IsValid 加入自訂規則
//1.2.2 在Constructor給ErrorMessage初始值
//1.3 在UserName屬性採用自訂驗證擴充 CheckUsername
//1.4.加入 Comment Model==> Properties & Annotations & Validation
//1.5.加入Photo 與 Comment 一對多的 relationship
##透過程式碼建mdf 順帶新增一些值進去
要透過data物件建立，要自己寫
( 通常不會放在同一個目錄所以在建立另外一個資料夾 ( 資料存取層
###1.Context上下文
加入空類別PhotoSharingContext 繼承 dbcontext
且要安裝套件EntityFramework
以前不用裝是因為DBFirst，ADO就先裝了
等等會直接建立在ssms裡面.mdb檔案
讀存方式
建構子 ( 資料庫名稱 Base
###2.Initializer初始化
PhotoSharingInitializer ( using 需要用的 Entity 與 models
只要每次開起這個專案會把原先資料庫殺掉在做一個新的
Dropcreatedatabasealways 通常
Dropcreatedatabaseifmodel 模型沒異動就不會異動
Override seed方法
List泛型 編輯資料
接著
儲存到模型
在儲存到資料庫
然後在外層寫個funtion用於把照片檔案傳入然後轉為byte[]
首先參數為路徑
FileStream 要using system.io
New一個物件
Httpruntime.appdomainapppath 網址 + path
Filemode.open
接著把抓到的東西 丟到byte[]
容易發生例外所以放在using裡面
Binarareader 專門在讀二進位資料
回傳會是一筆二進位資料
接著一樣做幾筆 回復資料
###PhotoSharing/PhotoSharing/DAL/PhotoSharingContext.cs
using PhotoSharing.Models;
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
namespace PhotoSharing.DAL
{
public class PhotoSharingContext : DbContext
{
//加入Photos及Comments的DbSet<Photo>泛型及 DbSet<Comment>泛型,
//讓EntityFramework可以建立對映資料庫的Photos及Comments資料表
public DbSet<Photo> Photos { get; set; }
public DbSet<Comment> Comments { get; set; }
public PhotoSharingContext():base("PhotoSharing")
{}
}
}
### PhotoSharing/PhotoSharing/DAL/PhotoSharingInitializer.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Entity;
using PhotoSharing.Models;
using System.IO;
namespace PhotoSharing.DAL
{
//1.8.1加PhotoSharingInitializer繼承 DropCreateDatabaseAlways<PhotoSharingContext>泛型
public class PhotoSharingInitializer:DropCreateDatabaseAlways<PhotoSharingContext>
{
//1.8.2override覆寫Seed方法,建構Photo Model及Comment Model初始值
protected override void Seed(PhotoSharingContext context)
{
base.Seed(context);
List<Photo> photos = new List<Photo>
{
new Photo
{
Title="Me standing on top of a mountain",
Description="I was very impressed with myself",
PhotoFile=getFileBytes("\\Images\\img1.jpg"),
ImageMimeType="image/jpeg",
CreatedDate=DateTime.Today,
UserName="Fred"
},
new Photo {
Title = "My New Adventure Works Bike",
Description = "It's the bees knees!",
UserName = "Fred",
PhotoFile = getFileBytes("\\Images\\img2.jpg"),
ImageMimeType = "image/jpeg",
CreatedDate = DateTime.Today
},
new Photo {
Title = "View from the start line",
Description = "I took this photo just before we started over my handle bars.",
UserName = "Sue",
PhotoFile = getFileBytes("\\Images\\img3.jpg"),
ImageMimeType = "image/jpeg",
CreatedDate = DateTime.Today
},
new Photo {
Title = "Sample Beauty Flower",
Description = "This is a Sample flower",
UserName = "Lee",
PhotoFile = getFileBytes("\\Images\\img4.jpg"),
ImageMimeType = "image/jpeg",
CreatedDate = DateTime.Today
}
};
photos.ForEach(s => context.Photos.Add(s));
context.SaveChanges();
List<Comment> comments = new List<Comment>
{
new Comment
{
UserName = "Bert",
Subject = "A Big Mountain",
Body = "That looks like a very high mountain you have climbed",
PhotoID=1
},
new Comment {
PhotoID = 1,
UserName = "Sue",
Subject = "So?What",
Body = "I climbed a mountain that high before breakfast everyday"
},
new Comment {
PhotoID = 2,
UserName = "Fred",
Subject = "Jealous",
Body = "Wow, that new bike looks great!"
},
new Comment {
PhotoID = 3,
UserName = "Li",
Subject = "WOW",
Body = "Wow, goodshot!"
},
new Comment {
PhotoID = 4,
UserName = "Lin",
Subject = "AWESOME",
Body = "Wow, AWESOME Beauty Flower"
}
};
comments.ForEach(s => context.Comments.Add(s));
context.SaveChanges();
}
private byte[] getFileBytes(string path)
{
FileStream fileOnDisk = new FileStream(HttpRuntime.AppDomainAppPath+ path,FileMode.Open);
byte[] fileBytes;
using (BinaryReader br=new BinaryReader(fileOnDisk))
{
fileBytes = br.ReadBytes((int)fileOnDisk.Length);
}
return fileBytes;
}
}
}
接著在Global.asax.cs using Entity 與 剛剛做的 DAL
然後//Database.SetInitializer<PhotoSharingContext>(new PhotoSharingInitializer());
數據基礎。組初始化照片分享上下文新照片分享初始化
此行只要沒註解每次跑一次 global.asax.cs時就會在重新產生一次mdf
### ftp://mvc@10.10.3.189/PhotoSharing/PhotoSharing/Global.asax.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;
using System.Data.Entity;
using PhotoSharing.DAL;
namespace PhotoSharing
{
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
//Database.SetInitializer<PhotoSharingContext>(new PhotoSharingInitializer());
AreaRegistration.RegisterAllAreas();
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
}
}
###老師步驟
//1.1加入Photo Model==> Properties & Annotations & Validation
//1.2 自訂驗證擴充 CheckUsername Model
//1.2.1 override IsValid 加入自訂規則
//1.2.2 在Constructor給ErrorMessage初始值
//1.3 在UserName屬性採用自訂驗證擴充 CheckUsername
//1.4.加入 Comment Model==> Properties & Annotations & Validation
//1.5.加入Photo 與 Comment 一對多的 relationship
//*1.6.透過NuGet Package Manager加入 EntityFramework
// ->ManageNuGet Packages...=>EntityFramework
//1.7.建立PhotoSharingContext繼承DbContext(DAL/PhotoSharingContext.cs)
//1.8.加PhotoSharingInitializer繼承 DropCreateDatabaseAlways<PhotoSharingContext>泛型(PhotoSharingInitializer.cs)
//並override覆寫Seed方法,建構Photo Model及Comment Model初始值
//1.9.在Global.asax的Application_Start方法中,建立PhotoSharingInitializer
//1.11.加入Controller及View(需Build Project)
//Add Controller->PhotosController-->MVC 5 Controller with views, using Entity Framwork
//Model class->Photo(PhotoSharingApplication.Models)
//Data context class->PhotoSharingContext(PhotoSharingApplication.Models)
//1.12.測試有可能會因為權限而報錯
沒報錯 所以接著建置controller 且用範本 一同建置view的版本
全勾且model用photo
CRUD+Details的View都會做好
預覽的時候才會去跑Global所以這時才會建置，而不是剛剛建置controller
因為剛剛沒有去寫說mdf要建置在哪所以會自動產生在appdata裡面
###接著看範本產生的 View
CRUDDetail的GET 與 POST
講解了一下剛剛的原理
接著第二步驟 我們不用剛剛自動產生的controller 我們自己從空的寫
02_Controller.cs
將舊的Controller改名就可以重寫
新增檢視直接蓋過舊的 model class用 photo
Data context class photosharingcontext
直接覆蓋
接著講解一些以前View觀念
建立View明明Controller裡面只有一個Action
為什麼會有Details 或 Create 或 Delete 呢?
因為我們的View是用範本去改的這是範本裡面的內容
記住 action name 是互相對應的
接著回到controller
介紹 ViewData[“DataName”] =
類似Session ( 但型態不是萬用的必須轉型?
System.Net.HttpStatusCodeResult(System.Net.HttpStatusCode.BadRequest)
返回錯誤訊息物件
型態? 讓型態是可以傳遞null值
Find 也可以用 where
BadRequest 為錯誤400 ( 少參數
HttpNotFound 為錯誤 404 ( 找不到目標
接著反傳找到的 照片 ( display 其實就是 detail function
接著先處理照片 二進位轉為照片檔案
Controller 裡面寫 function 轉
FileContentResult
先找 id 然後
然後 用 File方法轉換二進位值 + 副檔名
太大 用三版bs responsive 可以把照片修正到正常大小
Viewdata 具有型態 要顯示必須要轉型 (DateTime)寫在前面就強制轉型!
後面會用詳細例子講生命週期
###02_Controller/PhotoSharing/Views/Photos/Index.cshtml
@model IEnumerable<PhotoSharing.Models.Photo>
@{
ViewBag.Title = "Index";
}
<h2>@ViewBag.Date.ToString("D")</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.Title)
</th>
@*<th>
@Html.DisplayNameFor(model => model.PhotoFile)
</th>*@
<th>
@Html.DisplayNameFor(model => model.ImageMimeType)
</th>
<th>
@Html.DisplayNameFor(model => model.Description)
</th>
<th>
@Html.DisplayNameFor(model => model.CreatedDate)
</th>
<th>
@Html.DisplayNameFor(model => model.UserName)
</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.Title)
</td>
@*<td>
@Html.DisplayFor(modelItem => item.PhotoFile)
</td>*@
<td>
@Html.DisplayFor(modelItem => item.ImageMimeType)
</td>
<td>
@Html.DisplayFor(modelItem => item.Description)
</td>
<td>
@Html.DisplayFor(modelItem => item.CreatedDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.UserName)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.PhotoID }) |
@Html.ActionLink("顯示詳細資料", "Display", new { id=item.PhotoID }) |
@Html.ActionLink("Delete", "Delete", new { id=item.PhotoID })
</td>
</tr>
}
</table>
###02_Controller/PhotoSharing/Views/Photos/Display.cshtml
@model PhotoSharing.Models.Photo
@{
ViewBag.Title = "Display";
}
<h2>@(((DateTime)ViewData["Date"]).ToString("D"))</h2>
<div>
<h4>Photo</h4>
<hr />
<dl class="dl-horizontal">
<dt>
@Html.DisplayNameFor(model => model.Title)
</dt>
<dd>
@Html.DisplayFor(model => model.Title)
</dd>
<dt>
@Html.DisplayNameFor(model => model.PhotoFile)
</dt>
<dd>
@*@Html.DisplayFor(model => model.PhotoFile)*@
<img class="img-responsive img-thumbnail" src="@Url.Action("GetImage","Photos",new { id=Model.PhotoID})" />
</dd>
@*<dt>
@Html.DisplayNameFor(model => model.ImageMimeType)
</dt>
<dd>
@Html.DisplayFor(model => model.ImageMimeType)
</dd>*@
<dt>
@Html.DisplayNameFor(model => model.Description)
</dt>
<dd>
@Html.DisplayFor(model => model.Description)
</dd>
<dt>
@Html.DisplayNameFor(model => model.CreatedDate)
</dt>
<dd>
@Html.DisplayFor(model => model.CreatedDate)
</dd>
<dt>
@Html.DisplayNameFor(model => model.UserName)
</dt>
<dd>
@Html.DisplayFor(model => model.UserName)
</dd>
</dl>
</div>
<p>
@Html.ActionLink("Edit", "Edit", new { id = Model.PhotoID }) |
@Html.ActionLink("Back to List", "Index")
</p>
###02_Controller/PhotoSharing/Controllers/PhotosController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using PhotoSharing.Models;
using PhotoSharing.DAL;
using System.Net;
namespace PhotoSharing.Controllers
{
public class PhotosController : Controller
{
//2.2建立Data Context 來自 Photo Model 的 PhotoSharingContext
PhotoSharingContext context = new PhotoSharingContext();
// GET: Photos
//2.3-1 Index()回傳Photo
public ActionResult Index()
{
ViewBag.Date = DateTime.Now; //用ViewBag帶入今日日期
return View(context.Photos.ToList());
}
//2.3-2 Display(int id) 透過id參數回傳Photo,若找不到回傳HttpNotFound()helper
public ActionResult Display(int? id)
{
ViewData["Date"] = DateTime.Now; //用ViewData帶入今日日期
if (id==null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Photo photo = context.Photos.Find(id);
if(photo==null)
{
return HttpNotFound();
}
return View("Display", photo);
}
//2.3-7 建立GetImage(int id)回傳File(photo.PhotoFile, photo.ImageMimeType)
//這不是View()Helper的ActionResult, 這是File()helper
public FileContentResult GetImage(int id)
{
Photo photo = context.Photos.Find(id);
return File(photo.PhotoFile, photo.ImageMimeType);
}
}
}
###老師步驟
//2.1.加入 Empty MVC controller -> PhotoController(PhotoController.cs)
//2.2.建立Data Context 來自 Photo Model 的 PhotoSharingContext
//2.3.建立action
//2.3-1 Index()回傳Photo
//2.3-2 Display(int id) 透過id參數回傳Photo,若找不到回傳HttpNotFound()helper
//2.3-3 Create() 產生新增Photo作業,並回傳 new Photo()並產生CreatedDate屬性值= DateTime.Today
//2.3-4 Create(Photo photo, HttpPostedFileBase image),使用HTTP POST,執行新增Photo回存作業,回傳RedirectToAction()helper
// 如果ModelState.IsValid==false,回傳Photo給View,反之執行新增Photo回存作業
// photo.ImageMimeType = image.ContentType;
// photo.PhotoFile = new byte[image.ContentLength];
// image.InputStream.Read(photo.PhotoFile, 0, image.ContentLength);
//2.3-5 Delete(int id)產生刪除Photo作業,並回傳Photo(),若找不到回傳HttpNotFound()helper
//2.3-6 建立DeleteConfirmed(int id)使用[ActionName("Delete")]屬性,透過HTTP POST,執行刪除Photo回存作業.回傳RedirectToAction()helper
//2.3-7 建立GetImage(int id)回傳File(photo.PhotoFile, photo.ImageMimeType)(注意:File()helper 是FileContentResult,不是 View()helper 的ActionResult)
//2.4.建立Index及Display Views
// Model Class:Photo (PhotoSharing.Models)
// Data Context Class:PhotoSharingContext (PhotoSharing.DAL)
//2.4-1 Index View使用Scaffold template:List
//2.4-2 Display View使用Scaffold template:Details
//2.5. 更改Index View
//2.5-1 取出ViewBag值
//2.5-2 註解:不顯示圖片
//2.5-3 在Index View(Index.cshtml)將ActionLink的Details改成Display
//2.6 更改Display View
//2.6-1 取出ViewData值
//2.6-2 在Display View(Display.cshtml)使用GetImage Action
//2.7.建立Delete Views
// Model Class:Photo (PhotoSharing.Models)
// Data Context Class:PhotoSharingContext (PhotoSharing.DAL)
//2.7-1 Delete View使用Scaffold template:Delete
//2.7-2 在Delete View(Delete.cshtml)使用GetImage Action
待續
Previous201906Next2019/0604/ASP.NET_MVC Part2 PhotoSharing Controller & Filter & ADO.NET & View@RAZOR Helper
Last updated
