> For the complete documentation index, see [llms.txt](https://johch3n611u.gitbook.io/c50108/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://johch3n611u.gitbook.io/c50108/ju-li-cheng-bei/201904/20190424bootstraprwd-ji-yong-asp.netmvc-zuo-zeng-xiu-xiu-dai.md).

# 2019/0424/Bootstrap\_RWD基礎/應用\&Asp.Net\_MVC實作增刪修(修待補)

Responsive Web Design 響應式網頁設計 ( 自適應式網站 )

普通網站 或 軟體 以下為單純網站

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEU17WpYXg7ytFhjgz%2Fimage.png?alt=media\&token=3629efc4-0f7d-4432-a4ca-f0bddcf1e0bb)

應用程式專案式綠色那種 網站可以是應用程式但是以網頁型態存在

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEUMjYBpq1oG8LPrC4%2Fimage.png?alt=media\&token=db9b57aa-181e-414d-9e77-9ed00eb6ce73)

### 判斷是否為響應式&#xD;

手機與電腦去看同樣的網頁看一不一樣

不一樣就是不同版本而不是響應式

### ( 自適應式網站 )&#xD;

如何透過CSS、JS

在不同解析度 ( 一般為異質裝置 ) 下，

只製作一個網頁，程式可依據該解析度呈現最佳版型

#### 響應式

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEUod5lLBdGiyE5aUr%2Fimage.png?alt=media\&token=45293b50-ccd2-42c5-8284-96de9f4c31d3)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEUzInfrFOtfaUjC2p%2Fimage.png?alt=media\&token=baba7ca4-6b4d-4000-af32-520047c827c2)

### 響應式也無法取代雙版本&#xD;

網站功能資訊太複雜就難以

最佳瀏覽介面與使用者經驗

小螢幕會刪剪許多東西

資訊豐富度 太高 會很難找資料

#### 雙版本

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEVHQPEbWtvEs7WAXF%2Fimage.png?alt=media\&token=ee0313b4-8455-47fb-ab58-434d225a0c28)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEVNfy_GC8kB_t-zzy%2Fimage.png?alt=media\&token=188851c8-6fc2-46f9-846e-0d7d7b548cec)

雅虎 廣告 不起眼 一年要3500萬

雅虎 關鍵字廣告 曝光免費 點擊收費&#x20;

( 自己設定點擊一次多少錢 ( 不知道別人設多少 ( 競標

SEO 頻甚麼排前面 ( 花錢&#x20;

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEVc3MOy9FZoULuyfn%2Fimage.png?alt=media\&token=a5f54ab4-71b4-4c69-b84b-c5a6117aa8ab)

算命平台 跟 拜拜平台 生肖 星座

head 安全性結構 編碼方式

如果要做成響應式一定要再head 下 meta&#x20;

Name=”viewport”後設資料

Comtent=”width=device-width”內容寬度為裝置寬度為基準&#x20;

(讓橫向的sogobar不要出現)

### 原理&#xD;

響應式網頁的最基底

寬度是用相對值%不是絕對值px

所有的響應式網頁套的都是CSS

再CSS內實現響應式的物件為

@media

斷點width

<-480px-> <-540px-> ….

當這個寬度時要顯示哪種

以前斷點很簡單 現在很複雜

小解析度大手機 大解析度小手機 小解析度大電腦 大解…………

新版bootstape 有五種斷點

#### 如何測試斷點?&#xD;

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEW5OrXugd_9beeXiT%2Fimage.png?alt=media\&token=539d6c51-3fed-4e60-a96b-02c681e9da36)

#### 前端

```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title></title>

    <style>
        div{
            border:10px solid red;
            color:blue;
            background-color:yellow;
            font-size:24pt;
        }

        @media screen and (max-width:960px){
            div {
                border: 10px  dotted green;
                color: red;
                background-color: #808080;
                font-size: 36pt;
            }

        }

        @media screen and (max-width:540px) {
            div {
                border: 10px double blue;
                color: yellow;
                background-color: #000000;
                font-size: 12pt;
            }
        }

    </style>

</head>
<body>
    <div>
        韓批權貴密室協商 親韓人士：就是指馬吳拱郭！
        Yahoo奇摩（綜合報導）
        Yahoo奇摩（綜合報導）
        1.8k 人追蹤
        2019年4月24日 上午7:26
        346 則留言
        高雄市長韓國瑜昨五點聲明中批評政治權貴熱衷密室協商，雖前總統馬英九和黨主席吳敦義皆反駁，但親韓人士爆料有高層在韓訪美期間拱鴻海董事長郭台銘參選，「吳絕不可能不知情」，直指就是馬吳等人在拱郭，還量身定作頒發榮譽狀，「這不是密室協商是什麼」？另周刊也報導一名前黨務主管透露，黨中央早在今年過年前就密商讓郭加入戰局，郭之所以會參選，馬吳和前台北市長郝龍斌都是關鍵！


        高雄市長韓國瑜昨五點聲明中批評政治權貴熱衷密室協商，雖馬英九和吳敦義皆反駁，但親韓人士直指就是馬吳等人在拱郭台銘參選！（圖片來源：中央社）
        更多
        據《聯合》報導，對於媒體追問政治權貴熱衷密室協商為何意？韓國瑜僅強調「這裡面有很深的自己的內心反應在裡面，仔細去看一定看得懂」，對至黨中央認為徵召初選已是解套，韓則回應「那我就不再表述了」；對此，雖馬英九和吳敦義反駁，但親韓人士爆料有高層在韓訪美期間拱郭台銘參選，「吳絕不可能不知情」，直指就是馬吳等人在拱郭，希望出現一個也有機會打敗台北市長柯文哲的人來取代韓，還量身定作頒發榮譽狀，「這不是密室協商是什麼」？另《周刊王》也報導一名前黨務主管透露，黨中央早在今年過年前就密商讓郭加入戰局，郭之所以會參選，馬吳郝都是關鍵！

        親韓人士表示韓國瑜從頭到尾都說不參加初選，但郭台銘宣布參選時堅持絕不接受徵召，等於斷掉直接徵召韓的路；而韓的幕僚則表示韓現在的時間點很為難，除要考量市民感受，初選機制也讓韓難以挺身而出，若黨的提名制度有考慮這點，韓才能出戰。
        韓批權貴密室協商 親韓人士：就是指馬吳拱郭！
        Yahoo奇摩（綜合報導）
        Yahoo奇摩（綜合報導）
        1.8k 人追蹤
        2019年4月24日 上午7:26
        346 則留言
        高雄市長韓國瑜昨五點聲明中批評政治權貴熱衷密室協商，雖前總統馬英九和黨主席吳敦義皆反駁，但親韓人士爆料有高層在韓訪美期間拱鴻海董事長郭台銘參選，「吳絕不可能不知情」，直指就是馬吳等人在拱郭，還量身定作頒發榮譽狀，「這不是密室協商是什麼」？另周刊也報導一名前黨務主管透露，黨中央早在今年過年前就密商讓郭加入戰局，郭之所以會參選，馬吳和前台北市長郝龍斌都是關鍵！


        高雄市長韓國瑜昨五點聲明中批評政治權貴熱衷密室協商，雖馬英九和吳敦義皆反駁，但親韓人士直指就是馬吳等人在拱郭台銘參選！（圖片來源：中央社）
        更多
        據《聯合》報導，對於媒體追問政治權貴熱衷密室協商為何意？韓國瑜僅強調「這裡面有很深的自己的內心反應在裡面，仔細去看一定看得懂」，對至黨中央認為徵召初選已是解套，韓則回應「那我就不再表述了」；對此，雖馬英九和吳敦義反駁，但親韓人士爆料有高層在韓訪美期間拱郭台銘參選，「吳絕不可能不知情」，直指就是馬吳等人在拱郭，希望出現一個也有機會打敗台北市長柯文哲的人來取代韓，還量身定作頒發榮譽狀，「這不是密室協商是什麼」？另《周刊王》也報導一名前黨務主管透露，黨中央早在今年過年前就密商讓郭加入戰局，郭之所以會參選，馬吳郝都是關鍵！

        親韓人士表示韓國瑜從頭到尾都說不參加初選，但郭台銘宣布參選時堅持絕不接受徵召，等於斷掉直接徵召韓的路；而韓的幕僚則表示韓現在的時間點很為難，除要考量市民感受，初選機制也讓韓難以挺身而出，若黨的提名制度有考慮這點，韓才能出戰。
        韓批權貴密室協商 親韓人士：就是指馬吳拱郭！
        Yahoo奇摩（綜合報導）
        Yahoo奇摩（綜合報導）
        1.8k 人追蹤
        2019年4月24日 上午7:26
        346 則留言
        高雄市長韓國瑜昨五點聲明中批評政治權貴熱衷密室協商，雖前總統馬英九和黨主席吳敦義皆反駁，但親韓人士爆料有高層在韓訪美期間拱鴻海董事長郭台銘參選，「吳絕不可能不知情」，直指就是馬吳等人在拱郭，還量身定作頒發榮譽狀，「這不是密室協商是什麼」？另周刊也報導一名前黨務主管透露，黨中央早在今年過年前就密商讓郭加入戰局，郭之所以會參選，馬吳和前台北市長郝龍斌都是關鍵！


        高雄市長韓國瑜昨五點聲明中批評政治權貴熱衷密室協商，雖馬英九和吳敦義皆反駁，但親韓人士直指就是馬吳等人在拱郭台銘參選！（圖片來源：中央社）
        更多
        據《聯合》報導，對於媒體追問政治權貴熱衷密室協商為何意？韓國瑜僅強調「這裡面有很深的自己的內心反應在裡面，仔細去看一定看得懂」，對至黨中央認為徵召初選已是解套，韓則回應「那我就不再表述了」；對此，雖馬英九和吳敦義反駁，但親韓人士爆料有高層在韓訪美期間拱郭台銘參選，「吳絕不可能不知情」，直指就是馬吳等人在拱郭，希望出現一個也有機會打敗台北市長柯文哲的人來取代韓，還量身定作頒發榮譽狀，「這不是密室協商是什麼」？另《周刊王》也報導一名前黨務主管透露，黨中央早在今年過年前就密商讓郭加入戰局，郭之所以會參選，馬吳郝都是關鍵！

        親韓人士表示韓國瑜從頭到尾都說不參加初選，但郭台銘宣布參選時堅持絕不接受徵召，等於斷掉直接徵召韓的路；而韓的幕僚則表示韓現在的時間點很為難，除要考量市民感受，初選機制也讓韓難以挺身而出，若黨的提名制度有考慮這點，韓才能出戰。
    </div>
</body>
</html>

```

### 以上為手動刻 以下為 bootstrap 其實也是一樣方式只是刻好給你用&#xD;

互動頻繁的網站適合做成響應式

裝bootstrap框架&#x20;

3版比4版強很多 很多東西新的被拿掉

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEWfms_8VCg6rJnVDk%2Fimage.png?alt=media\&token=21b1bc78-48e2-4988-ab6d-45d344a6ba34)

#### 如何看文件如何改核心?&#xD;

Twitter兩個工程師寫的自由軟體

{% embed url="<https://getbootstrap.com/>" %}

{% embed url="<https://bootstrap.hexschool.com/>" %}

{% embed url="<https://www.w3schools.com/bootstrap/bootstrap_ver.asp>" %}

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEWsdbuiLBWRO_liy9%2Fimage.png?alt=media\&token=75f996b1-dd1e-4685-b8bf-74729e860a32)

{% embed url="<https://getbootstrap.com/docs/4.3/layout/grid/>" %}

#### Grid system&#xD; ??? 應該下次會講

Reboot 再不同瀏覽器連字形留白都可能不同，藉由reboot歸零

樣式在這都找的到做法

### 如何使用 bootstrap ?&#xD;

如果會動到功能就一定是js

Content資料夾為全部的css

Scripts為全部的js

(核心) Booststrap.css跟(伺服器用)booststrap.min.css&#x20;

差別為 前面有排版檔案較大

互動的功能 點下去有反應&#x20;

Booststrap.js 與 booststrap.min.js 也是一樣的

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEXM1v0LBBBhgInX6U%2Fimage.png?alt=media\&token=ea446bb0-4133-4e51-9954-a9549f7aad96)

#### 重點 jq > bs.js  &#x20;

載入js函式庫要寫在底下避免使用者進入網頁讀取太久才看到頁面文檔，

再來Jq函式庫要先比bootstrap函式庫先載入，

因為bootstrap函式庫是由jq與js寫出來的，

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEXiOmsJEhKt4QDYwx%2Fimage.png?alt=media\&token=0230e50d-2aad-42ca-8e49-8ecb5ee459cc)

不用下載 網路上也有資源 CDN

但網頁必須練結上網

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEXvt0zi6epWHdDOxp%2Fimage.png?alt=media\&token=735f3bc1-5b6f-4e1e-9b7c-280efd51d0f6)

封包結構

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEY3jX2cjMefR49jWN%2Fimage.png?alt=media\&token=66a64bc8-cbea-46e3-b880-e2afe15a10be)

框架對應那些功能

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEY9U-4kzvGS0_wiu1%2Fimage.png?alt=media\&token=804632d2-fd1a-4e0e-b1ba-efd87622cdef)

Bundle 到時mvc會講 需要配合後端使用

#### 所以總結至少要串接三種框架&#xD;

Bs.css

Bs.jq

Bs.js

一引入後就算沒下bs程式碼，標籤元樣式也已經改變

#### 原標籤樣式&#xD;

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEYFtoW8wJdlRKRqaB%2Fimage.png?alt=media\&token=0f3cb625-98d2-406a-baa0-fcd227b85ff8)

#### BS標籤樣式

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEYRrN6xNDA1X1041v%2Fimage.png?alt=media\&token=4e5ba3ac-55f9-4306-b072-6c0f86b7da8b)

#### 利用class 下 bs程式碼&#xD;

骯敗(日文?

```
<!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" />

</head>
<body>
    <h1>Welcome My Homepage!!</h1>
    
    <a href="#" class="btn btn-danger">test</a>

    <input id="Button1" type="button" value="button" class="btn btn-link" />

    <script src="Scripts/jquery-3.0.0.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

```

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEYhOAjN_6F0ZX0Fut%2Fimage.png?alt=media\&token=c3bbfe3c-9fc2-4dfd-b65b-a7556183bfc4)

BS對響應式外對UI資源也強大

### 進入重點 網格系統&#xD;

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEYr-dDRbSEzBmreI_%2Fimage.png?alt=media\&token=77b593dd-0061-423c-b622-06471ba5a738)

固定分為12格

表示法 Col – 斷點 – 格數

1:2分成12格則為4:8

Col – md – 4

Col – md – 8&#x20;

#### Ide的bs提示

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEZ-FOoD5AuwOxiU0a%2Fimage.png?alt=media\&token=38c19f12-e012-406e-a8f3-6e5fa14a12ee)

容器概念 再做網頁的時候一定會放個div當容器 讓你好排版

直接class指定 container 直接選 bs的class就會有樣式

原本還要floot clear …

3跟4版本bs同樣動作但樣式不一樣 因為動用到flatbox不同網格系統 ??

```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title></title>

    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
        .col1{
            background-color:aqua;
        }

        .col2 {
            background-color: #ffd800;
        }
        .col3 {
            background-color: #b6ff00;
        }
    </style>
</head>
<body>
   <div class="container">
       <div class="row">
           <div class="col1">Col 1</div>
           <div class="col2">Col 2</div>
           <div class="col3">Col 3</div>
       </div>
   </div>



    <script src="Scripts/jquery-3.0.0.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

```

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEZMybtipGr1cdOi5w%2Fimage.png?alt=media\&token=cf9f93e7-ca54-43b1-93c1-65ead5439501)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEZRFX16bF14US3WyP%2Fimage.png?alt=media\&token=6b982493-a7a0-4b70-97a7-cda32bcbcee4)

#### 利用f12看斷點

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEZZ7x6hySSAuH1vDX%2Fimage.png?alt=media\&token=56c19f24-88c0-4507-a890-cf1071ee9998)

為什麼要用容器?有白邊?

改核心前要會看核心

直接再格式版本bs函式庫搜尋關鍵字classname .container

就發現

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEZgljZntpo9MurYCK%2Fimage.png?alt=media\&token=c9a15bfe-78f8-40df-8b48-ad325cfffc96)

還發現 不同斷點白邊會內縮

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEZolqxl_TQbusJ3Uh%2Fimage.png?alt=media\&token=91e2c1d4-dcaf-4bd3-8a52-283ad5895a8e)

不管是哪一種斷點的佔幾格的 都套用同一種css

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEZuIQ1hvDzXzIEU_6%2Fimage.png?alt=media\&token=b7c1fa7e-1257-4799-824a-6fa414cea15e)

相對定位 百分比等等

-ms- 是專門給micosoft用的 ie

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdE_2TcjHRVqSQa1ENX%2Fimage.png?alt=media\&token=9f1463ad-388b-4cdf-812d-933c23cd578f)

Combine結合 跟 預設屬性

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdE_9eZJb9ulsok_Ea2%2Fimage.png?alt=media\&token=9a82dbfc-4924-4cee-abe0-99d06c751955)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdE_EcmxJv26kCIJXwG%2Fimage.png?alt=media\&token=a7c9581d-f560-4008-9e68-28d85ca4cb9e)

### BS特性:&#xD;

沒有斷點等於小於576

只有寫斷點沒有寫格數那排法就是1:1:1…

4才有 3 bs版本沒有

只有其中一個有寫格數 那就是剩下的平均

Bs4有個特殊斷點為auto寬度根據內容剩下的平均分配

明定的空間不會被擠壓，沒明定的會被平均分配

全部都給定格數時剩下的留白

w-100 等寬多行 強迫標籤後換行顯示，標籤前平均分配

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdE_RFfVIEE68gBzgGx%2Fimage.png?alt=media\&token=7befa3f3-6bf1-4d9d-aa75-730078e210f3)

#### !important 我的優先權最高 &#xD;

看選擇器精緻度 inline > slect > … 但 ! 具有最優先權

#### 補充:w-100換行w-50 w-25 只要超過12格就會換行&#xD;

不知道會這樣最好方式是標示出來bolder

#### Css3才有 flex box --- bs3也沒有&#xD;

但以上只有那幾種解析度而已所以要用以下

Combine結合?

下午把Webform轉MVC

MVC一定要是應用程式專案不能是單純網站

以MVC寫上一次的增刪修

講完後分開講

### 環境製作&#xD;

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdE_nQxZFGBaSIsd__i%2Fimage.png?alt=media\&token=dabc86d2-fc39-4951-9bd6-5f6821071026)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdE_rwIBby7_ZGRWpvL%2Fimage.png?alt=media\&token=4cd82273-6f0e-4200-8b57-8c4351b43b51)

BS 3版本最高 3.4.1  -  JQ 1.9做的

3版多了網頁圖示可以用

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEa2dF5PQnSxe3WtAE%2Fimage.png?alt=media\&token=e72d7dc6-fce6-4945-b8d4-425e32090124)

把上次檔案複製過來加入專案

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEaCbGQyscci-W0yOv%2Fimage.png?alt=media\&token=f42546a5-5cec-4102-ab90-b090d6cece97)

第一步

資料庫建立成model databasefirst

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEaJtZC3LlwY2ikMj7%2Fimage.png?alt=media\&token=282fc3cd-0c98-403e-bed1-b911c044277f)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEaQYvxcy9VhA6V5oJ%2Fimage.png?alt=media\&token=e6af55fa-cd84-4bac-a325-8f6e7728eba5)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEaWvvuLFUJvP9do-O%2Fimage.png?alt=media\&token=9345544f-c1a6-4d73-a349-aecf15722087)

Local連線

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEadoIF1jcHvLu9eRs%2Fimage.png?alt=media\&token=26510560-1d35-4490-8659-9bd8ca2ed1ec)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEajzCYg-vqXfq32Gs%2Fimage.png?alt=media\&token=b3036c8c-17e5-496a-be6a-a89d09b1a61e)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEaqqR4qd_EZAWWEXz%2Fimage.png?alt=media\&token=cfe903e9-1269-4988-90d2-04d659745608)

### 物件導向&#xD;

物件(菜肴) 是類別的實現&#x20;

(( 現實世界裡的東西 講得出來的 具體抽象都可

是從

類別(食材) 是物件的抽象&#x20;

(( 類別必須要有屬性才能定義 幫物件做分類 籠統的語言抽象化

(( 物件的特徵這個特徵就是屬性(有) 物件的方法就是物件會什麼功能(會)

鑄造出來的

\[DisplayName]

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEb3QU_eMCVy0INuIG%2Fimage.png?alt=media\&token=7cdc566f-40e0-4b31-b4b4-d2292bafd4e6)

Using

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEbCUA7b1Lq6MkMEE2%2Fimage.png?alt=media\&token=74d8452f-3da8-44d0-a64b-afe368b21930)

有了M開始做C

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEbTiz3KJky5nHrhiN%2Fimage.png?alt=media\&token=62cc37ff-e19b-4182-888f-2d5e719ae127)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEbZg9je2gPcJ9D3yt%2Fimage.png?alt=media\&token=c4b7df8b-92fe-4910-82ac-14ecb443a166)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEbda4A2qqainG-Xs4%2Fimage.png?alt=media\&token=42f830c0-f9b1-4c32-8d81-3e3866ba28a8)

控制器的名稱一定要叫xxcontrollor

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEblNS-hypTAIMPjcn%2Fimage.png?alt=media\&token=0307da7f-a3be-4a08-b1a2-d61500b03e45)

控制器 根據 客戶端 提出的要求 給出相對應的action方法

Using model近來

加入 dbproductentities db 來操控它

跟model要資料餵給view

這個資料的資料型態為 List泛型 ( 丟甚麼資料給它就是什麼資料型態 )

由action 增加 view

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEbuiYAqAXTdbC4xQc%2Fimage.png?alt=media\&token=007681c8-a908-4b87-9a6d-8f91310dc3fb)

View name如果跟action名稱一樣會自動對應

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEc25m4bpZVxIWE7n3%2Fimage.png?alt=media\&token=efd7fd7e-b9cb-4bac-8c46-81f54487be92)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEc71dNMjYC8unMjRm%2Fimage.png?alt=media\&token=53e64289-888a-48a0-9259-c29be7a6b5a9)

Model裡面有定義 view 就會顯示

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEcErV35rJI-F_HHOx%2Fimage.png?alt=media\&token=bcbfa1bf-c0b2-4489-9d2b-31d3b11d0163)

修改view很簡單 因為裡面就是html

```
@model IEnumerable<MVC2.Models.tProduct>

@{
    ViewBag.Title = "產品列表";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("新增產品", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.fName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.fPrice)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.fImg)
        </th>
        <th>
            項目管理
        </th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.fName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.fPrice)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.fImg)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.fId }) |
            @Html.ActionLink("Details", "Details", new { id=item.fId }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.fId })
        </td>
    </tr>
}

</table>

```

@Html.DisplayNameFor(model => model.fName) 爛達?

Model如果沒有定義也可以寫死

@Foreach c# 基本語法

### &#xD;Razer

{% embed url="<https://www.google.com/search?ei=TmvAXKDTHaGEr7wP4tC6qAg&q=Razer+c%23&oq=Razer+c%23&gs_l=psy-ab.3..0i10j0i8i10i30l3j0i8i30l2j0i8i10i30l4.2387.4073..4378...0.0..0.49.141.3......0....1..gws-wiz.......0i67j0i131i67j0.SzcLexm5YPY>" %}

看到的程式語言為 c# 但這裡表現方式為 Razer 因為副檔名為cshtml

如果是vb則為vbhtml，且都不能直接執行需要編譯

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEclvdFyd1yeQxTsAZ%2Fimage.png?alt=media\&token=861963ec-4d37-4164-b052-a8a96d0c2b94)

Layout

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEcw6bdYC3WU1apjJL%2Fimage.png?alt=media\&token=c65759a0-967c-4813-9f34-7eeb70103c3a)

Razer語法就是c#orvb 前置符號@即可 可以跟html直接混寫

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEd2Czk49Prpv8vW1F%2Fimage.png?alt=media\&token=200d5f16-7867-45ae-9019-a3f3bdbc005b)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEd7vtMYSwFIBZ9U-e%2Fimage.png?alt=media\&token=018dd6c7-3e48-4786-bbb4-941c997aade7)

#### 老師版本的有把程式碼步驟放上去control&#xD;

//00-1 利用Entity Framework建立Model(DB First)

//00-1-1 建立dbProduct.mdb資料庫Model

//       在Models上按右鍵,選擇加入,新增項目,資料,ADO.NET實體資料模型,名稱輸入"ProductModel",按新增

//       來自資料庫的EF Designer

//       連接dbProduct.mdf資料庫,連線名稱不修改,按下一步按鈕

//       選擇Entity Framework 6.x, 按下一步按鈕

//       資料表勾選"tProuct", 按完成鈕

//       若跳出詢問方法按確定鈕

//00-1-2 在專案上按右鍵,建置

//00-1-3 在tProduct.cs裡加入欄位名稱顯示(需using System.ComponentModel)

//00-1-4 在Controllers資料夾上按右鍵,加入,控制器,選擇 MVC5Controller-Empty

//00-1-5 指定控制器名稱為HomeController,並開啟HomeController

//00-1-6 using \_MVC2.Models

//00-1-7 使用Entity建立DB物件

//00-2 製作Index頁面的顯示所有產品功能

//00-2-1 在HomeController裡撰寫Index的Action

//00-2-2 在public ActionResult Index()上按右鍵,新增檢視,建立Index View

//00-2-3 進行下列設定:

//       View name:Index

//       Template:List

//       Model class:tStudent(\_00MVC.Models)

//       Data context class:dbProductEntities(\_00MVC.Models)

//       勾選Use a layout pages

//       按下Add

//00-2-4 修改 \_Layout.cshtml

//00-2-5 修改Index View,英文文字為中文

//00-2-6 修改圖片顯示處

#### mvc裡面client對control提reguse出是靠網址url&#xD;

(<http://xxxx/controllname/actionname/id>)

然後從control進到view然後回饋給client

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEdQgxNKaYI94-1_5h%2Fimage.png?alt=media\&token=1a0c7c63-4489-41ff-8107-40e35b2cd284)

首頁再&#x20;

app\_start&#x20;

routecobfig

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEdo6dh4WUmkx_mLyZ%2Fimage.png?alt=media\&token=918d27f2-969f-44c4-af49-b526d38e6e89)

做某個動作(增刪修等等…)就一定要有對應的action就算沒有view

先回到index

```
<td>
                @Html.ActionLink("Edit", "Edit", new { id = item.fId }) |
                @Html.ActionLink("Details", "Details", new { id = item.fId }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.fId })
</td>

```

第一個參數是 顯示的字

第二個參數是actionname

第三個欄位為帶入controller的參數的名稱

(<http://xxxx/controllname/actionname/id>)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEe9uRMrRwYSC4ZInX%2Fimage.png?alt=media\&token=e46d856b-d91d-4d31-b9b3-5df6c51f2436)

第三個欄位為帶入controller的參數的名稱

抓資料位置 等等砍資料檔案

抓檔名刪資料庫檔名等等刪欄位

然後刪資料檔案

然後刪資料庫欄位

Savechange

做完以上的事情後把資料重新讀取一次傳送到index

Redirecttoactio n(index)

再回到前面view 再增加

第四個參數 js的事件

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEeOsiKBcXARwv1jcL%2Fimage.png?alt=media\&token=01b62475-c73c-49a3-95b1-fb32afb17ae3)

#### 以上實作mvc刪除功能完成 &#xD;

最後做完mvc所有新刪修再把程式碼貼上

#### 實作mvc新增功能&#xD;

#### 1.先寫control的action &#xD;

#### Action 種類&#xD;

a.顯示表單b.寫入資料庫

#### 2.利用actionname右鍵利用小精靈新增對應的view再去看懂razer改razer&#xD;

精靈產生的view裡面會有token ( 預防機器人用的

@Html.AntiForgeryToken()

產生from  @using (Html.BeginForm())&#x20;

### &#x20;helper ???? 啥後面會講 &#xD;

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEfPMkz6NeQTr0_QAM%2Fimage.png?alt=media\&token=9964bdcc-994c-48a7-9be1-1fd55d40b382)

{% embed url="<https://www.tutorialsteacher.com/mvc/html-helpers>" %}

怕沒講我們聽不懂所以&#x20;

改成原來的 html from

Put delete  api  crud ???? 之後會講

Enctype=”multipart/form-data

action=”處理頁路徑”

webfrom就是處理路徑是自己才會變postback，但mvc處理頁面是action所以要寫action路徑

裡面很多精靈範本產生的東西 如驗證器 然後一堆bs函式碼

### 重點&#xD;

Html的

Id css js 前端操控物件再用的

Name mvc後端操控物件再用的

取一樣的才方便

Get action

表單東西送到post action然後儲存

### 物件導向多載 overloading  ----------類別繼承封裝多載多型&#xD;

同時有兩組同樣名稱create的action

只要參數不一樣即可(數量 型態

參數不同但回應不同結果

上面要加註\[httppost]才是postaction

有畫面是get 沒畫面是post ??&#x20;

#### Simplebyding 簡單繫結法&#xD;

只要name的值跟action參數一樣就會繫結control裡面的參數

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEfsVQQ8JDZTYL4rJH%2Fimage.png?alt=media\&token=c6cd4ecd-0f3b-402b-a7f3-34adc4787643)

再action內實作判斷檔案有無上傳

實體資料庫 鑄造物件

然後資料庫的欄位放入陣列

物件add 放入欄位

Db.savechange

回到index

因為資料上傳等於外接資料庫

很容易會發生例外所以外面用try包住它

Catch 顯示 錯誤訊息物件

前端串接 錯誤訊息物件

#### Bug &#xD;

1.補using去掉的啥class也有files&#x20;

2.補return函數一定要有回傳值

Mvc編譯完一次後面就會很快

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEg8xw-YzBdisFqneD%2Fimage.png?alt=media\&token=1f9f112e-6ce3-4a06-8f0b-7ceb3cd2dae0)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEgFmvuDstQ4N2O5_f%2Fimage.png?alt=media\&token=2156498e-6838-4c3e-b1b5-26c79a3d886c)

### 到此 刪除與新增完成，以下為程式碼&#xD;

#### Models &#xD;

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEg_SZgPvcDcwAls0W%2Fimage.png?alt=media\&token=91e32757-9d3c-4212-95e1-83e5b4212b9f)

```
//------------------------------------------------------------------------------
// <auto-generated>
//     這個程式碼是由範本產生。
//
//     對這個檔案進行手動變更可能導致您的應用程式產生未預期的行為。
//     如果重新產生程式碼，將會覆寫對這個檔案的手動變更。
// </auto-generated>
//------------------------------------------------------------------------------

namespace MVC2.Models
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel;

    public partial class tProduct
    {
        [DisplayName("產品編號")]
        public string fId { get; set; }
        [DisplayName("產品名稱")]
        public string fName { get; set; }
        [DisplayName("單價")]
        public Nullable<decimal> fPrice { get; set; }
        [DisplayName("圖示")]
        public string fImg { get; set; }
    }
}

```

#### Controllers

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEgjnaXP8_LLFfOuUD%2Fimage.png?alt=media\&token=1b84f9be-bf0c-4ea2-9f6d-a86818295a3a)

```
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
//00-1-6 using _MVC2.Models
using MVC2.Models;
using System.IO;

namespace MVC2.Controllers
{
    public class HomeController : Controller
    {
        //00-1-7 使用Entity建立DB物件
        dbProductEntities db = new dbProductEntities();

        // GET: Home
        //00-2-1 在HomeController裡撰寫Index的Action
        public ActionResult Index()
        {
            var product = db.tProduct.ToList();
            return View(product);
        }

        //00-3-1 在HomeController裡撰寫Delete的Action
        public ActionResult Delete(string fId)
        {
            //依網址傳來的fId編號取得要刪除的產品記錄
            var product = db.tProduct.Where(m => m.fId == fId).FirstOrDefault();
            string fileName = product.fImg;//取得要刪除產品的圖檔
            System.IO.File.Delete(Server.MapPath("~/images/"+fileName));//刪除指定圖檔
            db.tProduct.Remove(product);//依編號刪除產品記錄
            db.SaveChanges();//回存結果

            //return View();
            return RedirectToAction("Index");
        }

        //00-4-1 在HomeController裡撰寫GET及POST的Create Action
        public ActionResult Create()
        {
          
            return View();
        }

        [HttpPost]
        public ActionResult Create(string fId, string fName, decimal fPrice, HttpPostedFileBase fImg)
        {
            try
            {
                string fileName = "";

                if (fImg.ContentLength > 0)
                {
                    fileName = Path.GetFileName(fImg.FileName);
                    fImg.SaveAs(Server.MapPath("~/images/" + fileName));
                }

                tProduct product = new tProduct();
                product.fId = fId;
                product.fName = fName;
                product.fPrice = fPrice;
                product.fImg = fileName;

                db.tProduct.Add(product);
                db.SaveChanges();

                return RedirectToAction("Index");
            }
            catch(Exception ex)
            {
                ViewBag.Error = ex.Message;
            }
            return View();
        }
    }
}

```

#### Views 一個 action 可以對應一個View或沒有View

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEh2mrE-g-J_C7d_BI%2Fimage.png?alt=media\&token=6b3a18fe-7544-4ff7-9f59-a1991453d6d9)

#### Index.cshtml

```
@model IEnumerable<MVC2.Models.tProduct>

@*//00-2-5 修改Index View,英文文字為中文*@
@{
    ViewBag.Title = "產品列表";
}

<h2>產品列表</h2>

<p>
    @Html.ActionLink("新增產品", "Create")
</p>
<table class="table">
    <tr>
        <th>
            產品編號
        </th>
        <th>
            @Html.DisplayNameFor(model => model.fName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.fPrice)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.fImg)
        </th>
        <th>
            項目管理
        </th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.fId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.fName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.fPrice)
            </td>
            <td>
                @*//00-2-6 修改圖片顯示處,處理沒有圖片的產品*@
                <img src="~/images/@item.fImg" width="130" />

            </td>
            <td>
                @*//00-2-7 修改功能連結處 (id=>fId) *@
                @Html.ActionLink("編輯", "Edit", new { fId = item.fId }) |
                @*@Html.ActionLink("Details", "Details", new { id = item.fId }) |*@
                @Html.ActionLink("刪除", "Delete", new { fId = item.fId }, new { OnClick = "return confirm('確定刪除？')" })
            </td>
        </tr>
    }

</table>

```

#### Create.cshtml

```
@model MVC2.Models.tProduct

@*//00-4-4 修改Create View,英文文字為中文*@
@{
    ViewBag.Title = "產品新增";
}

<h2>新增產品</h2>

<form method="post" enctype="multipart/form-data" action="@Url.Action("Create")">
    @*@using (Html.BeginForm())
        {*@
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        @*把這個標題註解掉*@
        @*<h4>tProduct</h4>
        <hr />*@
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.fId, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.fId, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.fId, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.fName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.fName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.fName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.fPrice, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.fPrice, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.fPrice, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.fImg, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*//00-4-6 修改圖片上傳處表單*@
                @*@Html.EditorFor(model => model.fImg, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.fImg, "", new { @class = "text-danger" })*@
                <input id="fImg" name="fImg" type="file" class="form-control" />

            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="新增產品" class="btn btn-default" />
                @*//00-4-7 加入例外訊息顯示處*@
                @ViewBag.Error
            </div>
        </div>
    </div>
    @*}*@
</form>
<div>
    @Html.ActionLink("返回產品列表", "Index")
</div>

```

#### \_layout.cshtml

```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - 農易旺</title>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                </ul>
            </div>
        </div>
    </div>

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>

```

#### App\_Start

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LdESZyH9xfRDgfk3stC%2F-LdEhZ63HFnqBnM4wMk8%2Fimage.png?alt=media\&token=c82d09cf-6cfe-4934-9662-3f5e80c7c804)

```
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace MVC2
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }
    }
}

```

老師版本的有把程式碼步驟放上去  control

//00-1 利用Entity Framework建立Model(DB First)

//00-1-1 建立dbProduct.mdb資料庫Model

//       在Models上按右鍵,選擇加入,新增項目,資料,ADO.NET實體資料模型,名稱輸入"dbProductModel",按新增

//       來自資料庫的EF Designer

//       連接dbProduct.mdf資料庫,連線名稱不修改,按下一步按鈕

//       選擇Entity Framework 6.x, 按下一步按鈕

//       資料表勾選"tProuct", 按完成鈕

//       若跳出詢問方法按確定鈕

//00-1-2 在專案上按右鍵,建置

//00-1-3 在tProduct.cs裡加入欄位名稱顯示(需using System.ComponentModel)

//00-1-4 在Controllers資料夾上按右鍵,加入,控制器,選擇 MVC5Controller-Empty

//00-1-5 指定控制器名稱為HomeController,並開啟HomeController

//00-1-6 using \_MVC2.Models

//00-1-7 使用Entity建立DB物件

//00-2 製作Index頁面的顯示所有產品功能

//00-2-1 在HomeController裡撰寫Index的Action

//00-2-2 在public ActionResult Index()上按右鍵,新增檢視,建立Index View

//00-2-3 進行下列設定:

//       View name:Index

//       Template:List

//       Model class:tProduct(MVC2.Models)

//       Data context class:dbProductEntities(MVC2.Models)

//       勾選Use a layout pages

//       按下Add

//00-2-4 修改 \_Layout.cshtml

//00-2-5 修改Index View,英文文字為中文

//00-2-6 修改圖片顯示處

//00-2-7 修改功能連結處 (id=>fId)&#x20;

//00-3 製作刪除功能

//00-3-1 在HomeController裡撰寫Delete的Action

//00-4 製作Create頁面及新增產品功能

//00-4-1 在HomeController裡撰寫GET及POST的Create Action

//00-4-2 在public ActionResult Create()上按右鍵,新增檢視,建立Create View

//00-4-3 進行下列設定:

//       View name:Create

//       Template:Create

//       Model class:tProduct(MVC2.Models)

//       Data context class:dbProductEntities(MVC2.Models)

//       勾選Use a layout pages

//       按下Add

//00-4-4 修改Index View,英文文字為中文

//00-4-5 修改form的HTML Helper為一般的from

//00-4-6 修改圖片上傳處表單

//00-4-7 加入例外訊息顯示處

修改的後天講
