2019/0603/Bootstrap Components RWD End + ASP.NET_MVC Part2 PhotoSharing CodeFirst & Model 驗證

#bootstrap components

利用一個盒子把物件隱藏在藉由BUTTON或…觸發顯示

利用DATA-

Fade 淡入淡出

一開始直接顯示modal 所以要用jq show

互動視窗 (Modal)getbootstrap

Modalgetbootstrap

###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"> &times;</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 不等於 nav

所以有個class是 navbar-nav

導覽列 (Navbar)getbootstrap

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"> &times;</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 摺疊

折疊 (Collapse)getbootstrap

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"> &times;</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

待續

Previous201906 Next2019/0604/ASP.NET_MVC Part2 PhotoSharing Controller & Filter & ADO.NET & View@RAZOR Helper

Last updated 6 years ago

Was this helpful?

#bootstrap components

##Modal 互動視窗

###ftp://web@10.10.3.189/RWD/36Model.html

##NavBar 導覽列

### ftp://web@10.10.3.189/RWD/37NavBar.html

### ftp://web@10.10.3.189/RWD/37NavBar.html

##38Collapse.html 摺疊

### ftp://web@10.10.3.189/RWD/38Collapse.html

###手風琴導覽

### ftp://web@10.10.3.189/RWD/39Collapse2.html

##最後所有功能實作在頁面上

### ftp://web@10.10.3.189/RWD/40Collapse.html

#MVC Part2 強度很強 從頭講到尾 全部接續下去 都是同一個主題

##01_Code first

##靜態類別圖(永存資料) 以前只有建立過動態類別

##接著很重要 model寫關聯

##自訂驗證器

###ftp://mvc@10.10.3.189/PhotoSharing/PhotoSharing/Models/Photo.cs

###ftp://mvc@10.10.3.189/PhotoSharing/PhotoSharing/Models/Comment.cs

###老師步驟

##透過程式碼建mdf 順帶新增一些值進去

###1.Context上下文

###2.Initializer初始化

###PhotoSharing/PhotoSharing/DAL/PhotoSharingContext.cs

### PhotoSharing/PhotoSharing/DAL/PhotoSharingInitializer.cs

### ftp://mvc@10.10.3.189/PhotoSharing/PhotoSharing/Global.asax.cs

###老師步驟

###接著看範本產生的 View

02_Controller.cs

###02_Controller/PhotoSharing/Views/Photos/Index.cshtml

###02_Controller/PhotoSharing/Views/Photos/Display.cshtml

###02_Controller/PhotoSharing/Controllers/PhotosController.cs

###老師步驟

待續

#MVC Part2 強度很強從頭講到尾全部接續下去都是同一個主題