---
description: Bootstrap_Utilities+Display+HTMLHelper+404
---

# 2017/0506/Bs\_FlexBox\&Asp.Net\_MVC\_View+Razor@+Viewbag+helper

\#前端bootstrap


#### ###前期提要gridsystem & &#xD;

今天會講的為以下

Bs4相對於3的大特色

### #Utilities bs4 獨立出來的通用類別&#xD;

框架為了某個功能做特定class

通用 ( 每個標籤都適用

Bs 3 可以達到相同的功能 但分類不太一樣

Bs 3 有提供常用字型 icon 但Bs 4 就沒有&#x20;

接著講Flexbox bs 3 完全沒有 只有 bs 4 有



Bs 4 庫可以分成三類 看需求去link ( 上一次有截圖官網有

全部 ui 等等…

Reboot 瀏覽器全部洗成類似

Grid 網格系統



Bs3 會套用字的顏色 ( 條背景色自動字的色也有對比色



但 bs4 要自己增加上去 ( 感覺也像 css 了





### ##display&#xD;



有類別是 列印才看的到 或是 螢幕看的到 或是不同螢幕不同顯示方式



{% embed url="https://getbootstrap.com/docs/4.0/utilities/display/" %}

#### ### 09Utility\_Display.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" />
</head>
<body>

    <div class="bg-danger text-white d-print-none">只有螢幕上看得到</div>
    <div class="bg-warning d-print-block d-none">只有列印時才看得到</div>
    <div class="bg-dark text-warning d-none d-lg-block d-print-block">不同尺寸要隱藏</div>

</body>
</html>

```

### &#xD;##CSS3 Flex Box 相對於 gridsystem是另外一種概念&#xD;



CSS3之前沒有對於整個Window的垂直置中

必須要用一個固定大小的盒子下style line-height&#x20;

行高超高跟box高度一樣就會跑到中間

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LeGucwsGngZ57dGwCf5%2F-LeGv7Ua3aR-GnXlqGV3%2Fimage.png?alt=media\&token=5f238b5b-8549-4961-a244-413d1ab72e1e)

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LeGucwsGngZ57dGwCf5%2F-LeGvA2fb1Ryi9jp3zV4%2Fimage.png?alt=media\&token=6d43d1ae-d351-4a78-986e-b7175fc374c3)

flexbox

要啟用 flexbox 必須要將display顯示方式為 flex

Bs4只要將類別下 d –flex

然後將內容設置 p-2 ( padding 類別

#### ###其實就是將箱子回歸最原始狀態再去設置&#xD;

#### ###Flex-column&#xD;

#### ###Flex-row-reverse&#xD;

#### ###…&#xD;

以上都可以分斷點但這裡示範就先不使用



#### ###自動調整內容Justify-content-(end/center/between)&#xD;



Justify改斷點更有用 用 扛敗的 讓他擁有一堆覆合類別



以上為範例 還有更多 需要時再查



#### ### 10Utility\_Flex.html&#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" />
    <style>
        .col1 {
            background-color: aqua;
        }

        .col2 {
            background-color: #ffd800;
        }

        .col3 {
            background-color: #b6ff00;
        }

        .col5 {
            background-color: #0094ff;
        }

        .col6 {
            background-color: #ff00dc;
        }

        .col7 {
            background-color: #808080;
        }
        .rowheigh{
            height:150px;
        }
    </style>
</head>
<body>
    <div class="container">

        <!--<div style="height:300px;width:600px;background-color:bisque;text-align:center;line-height:300px">
        abcde
    </div>-->

        <h3>水平方向-row</h3>
        <div class="border border-primary d-flex mb-3">
            <div class="col1 p-2">item 1</div>
            <div class="col2 p-2">item 2</div>
            <div class="col3 p-2">item 3</div>
        </div>
        <div class="border border-primary d-flex flex-row-reverse mb-3">
            <div class="col5 p-2">item 1</div>
            <div class="col6 p-2">item 2</div>
            <div class="col7 p-2">item 3</div>
        </div>
        <h3>垂直方向-column</h3>
        <div class="border border-primary d-flex mb-3 flex-column">
            <div class="col1 p-2">item 1</div>
            <div class="col2 p-2">item 2</div>
            <div class="col3 p-2">item 3</div>
        </div>
        <div class="border border-primary d-flex flex-column-reverse">
            <div class="col5 p-2">item 1</div>
            <div class="col6 p-2">item 2</div>
            <div class="col7 p-2">item 3</div>
        </div>

        <h3>自動調整內容</h3>
        <div class="border border-primary d-flex mb-3 justify-content-start">
            <div class="col1 p-2">item 1</div>
            <div class="col2 p-2">item 2</div>
            <div class="col3 p-2">item 3</div>
        </div>

        <div class="border border-primary d-flex mb-3 justify-content-end">
            <div class="col1 p-2">item 1</div>
            <div class="col2 p-2">item 2</div>
            <div class="col3 p-2">item 3</div>
        </div>
        <div class="border border-primary d-flex mb-3 justify-content-md-center">
            <div class="col1 p-2">item 1</div>
            <div class="col2 p-2">item 2</div>
            <div class="col3 p-2">item 3</div>
        </div>
        <div class="border border-primary d-flex mb-3 justify-content-between flex-md-column">
            <div class="col1 p-2">item 1</div>
            <div class="col2 p-2">item 2</div>
            <div class="col3 p-2">item 3</div>
        </div>
        <div class="border border-primary d-flex mb-3 justify-content-around">
            <div class="col1 p-2">item 1</div>
            <div class="col2 p-2">item 2</div>
            <div class="col3 p-2">item 3</div>
        </div>
        <h3>Item對齊</h3>
        <div class="rowheigh border border-primary d-flex mb-3 align-items-start">
            <div class="col1 p-2">item 1</div>
            <div class="col2 p-2">item 2</div>
            <div class="col3 p-2">item 3</div>
        </div>
        <div class="rowheigh border border-primary d-flex mb-3 align-items-end">
            <div class="col1 p-2">item 1</div>
            <div class="col2 p-2">item 2</div>
            <div class="col3 p-2">item 3</div>
        </div>
        <div class="rowheigh border border-primary d-flex mb-3 align-items-center">
            <div class="col1 p-2">item 1</div>
            <div class="col2 p-2">item 2</div>
            <div class="col3 p-2">item 3</div>
        </div>
        <div class="rowheigh border border-primary d-flex mb-3 align-items-baseline">
            <div class="col1 p-2">item 1</div>
            <div class="col2 p-2" style="font-size:48pt">item 2</div>
            <div class="col3 p-2">item 3</div>
        </div>
        <div class="rowheigh border border-primary d-flex mb-3 align-items-stretch">
            <div class="col1 p-2">item 1</div>
            <div class="col2 p-2">item 2</div>
            <div class="col3 p-2">item 3</div>
        </div>

        <h3>自身對齊</h3>
        <div class="rowheigh border border-primary d-flex mb-3">
            <div class="col1 p-2 ">item 1</div>
            <div class="col2 p-2 align-self-start">item 2</div>
            <div class="col3 p-2">item 3</div>
        </div>
        <div class="rowheigh border border-primary d-flex mb-3">
            <div class="col1 p-2">item 1</div>
            <div class="col2 p-2 align-self-end">item 2</div>
            <div class="col3 p-2">item 3</div>
        </div>
        <div class="rowheigh border border-primary d-flex mb-3">
            <div class="col1 p-2">item 1</div>
            <div class="col2 p-2 align-self-center">item 2</div>
            <div class="col3 p-2">item 3</div>
        </div>
        <div class="rowheigh border border-primary d-flex mb-3 ">
            <div class="col1 p-2 align-self-baseline">item 1</div>
            <div class="col2 p-2 align-self-baseline" style="font-size:48pt">item 2</div>
            <div class="col3 p-2 align-self-baseline">item 3</div>
        </div>


        <h3>全部填滿</h3>
        <div class="border border-primary d-flex mb-3">
            <div class="col1 p-2 flex-fill">item 1 has a lot of content</div>
            <div class="col2 p-2 flex-fill">item 2</div>
            <div class="col3 p-2 flex-fill">item 3</div>
        </div>

        <h3>成長與壓縮</h3>
        <div class="border border-primary d-flex mb-3">
            <div class="col1 p-2 flex-grow-1">item 1</div>
            <div class="col2 p-2">item 2</div>
            <div class="col3 p-2">item 3</div>
        </div>

        <div class="border border-primary d-flex mb-3">
            <div class="col2 p-2 w-100">item 2</div>
            <div class="col3 p-2 flex-shrink-1">item 3333</div>
        </div>


        <h3>自動的margins</h3>
        <div class="border border-primary d-flex mb-3">
            <div class="col1 p-2">item 1</div>
            <div class="col2 p-2">item 2</div>
            <div class="col3 p-2">item 3</div>
        </div>
        <div class="border border-primary d-flex mb-3">
            <div class="col1 p-2 mr-auto">item 1</div>
            <div class="col2 p-2">item 2</div>
            <div class="col3 p-2">item 3</div>
        </div>
        <div class="border border-primary d-flex mb-3">
            <div class="col1 p-2">item 1</div>
            <div class="col2 p-2">item 2</div>
            <div class="col3 p-2 ml-auto">item 3</div>
        </div>



        <h3>搭配 align-items</h3>
        <div class="rowheigh border border-primary d-flex mb-3 align-items-start flex-column">
            <div class="col1 p-2 mb-auto">item 1</div>
            <div class="col2 p-2">item 2</div>
            <div class="col3 p-2">item 3</div>
        </div>

        <div class="rowheigh border border-primary d-flex mb-3 align-items-end flex-column">
            <div class="col1 p-2">item 1</div>
            <div class="col2 p-2">item 2</div>
            <div class="col3 p-2 mt-auto">item 3</div>
        </div>

        <h3>Wrap</h3>
        <div class="border border-primary d-flex mb-3 flex-wrap">
            <div class="col1 p-2">item</div>
            <div class="col2 p-2">item</div>
            <div class="col3 p-2">item</div>
            <div class="col1 p-2">item</div>
            <div class="col2 p-2">item</div>
            <div class="col3 p-2">item</div>
            <div class="col1 p-2">item</div>
            <div class="col2 p-2">item</div>
            <div class="col3 p-2">item</div>
            <div class="col1 p-2">item</div>
            <div class="col2 p-2">item</div>
            <div class="col3 p-2">item</div>
            <div class="col1 p-2">item</div>
            <div class="col2 p-2">item</div>
            <div class="col3 p-2">item</div>
            <div class="col1 p-2">item</div>
            <div class="col2 p-2">item</div>
            <div class="col3 p-2">item</div>
            <div class="col1 p-2">item</div>
            <div class="col2 p-2">item</div>
            <div class="col3 p-2">item</div>
            <div class="col1 p-2">item</div>
            <div class="col2 p-2">item</div>
            <div class="col3 p-2">item</div>
            <div class="col1 p-2">item</div>
            <div class="col2 p-2">item</div>
            <div class="col3 p-2">item</div>
        </div>

        <h3>Order</h3>
        <div class="border border-primary d-flex mb-3">
            <div class="col1 p-2 order-2">item 1</div>
            <div class="col2 p-2 order-3">item 2</div>
            <div class="col3 p-2 order-1">item 3</div>

        </div>

      

    </div>

  
  
   
</body>
</html>

```

(要看直接用程式碼看不然縱軸太長

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LeGucwsGngZ57dGwCf5%2F-LeGvaguPvwda2HOUMFB%2Fimage.png?alt=media\&token=7d323248-3405-4a68-b637-d0ccedf09874)



#### ###接續剛剛 item對齊 align-item-(start/center/end/baseline…)&#xD;

Baseline 基底線?? 要每個內容物都有設定類別才會有共同的基底線

Content是指box最內側



#### ###自身對齊 align-self-(start/center/end/baseline…)對齊flexbox的哪&#xD;

#### ###全部填滿 flexfill&#xD;

#### ###成長flex-grow-(1) 會被擠壓 ( w-100 固定 然後就會去擠壓&#xD;

#### ###壓縮flex-shrink-(1)&#xD;



#### ##Automargin 看父節點容器window自動對齊? mr-auto&#xD;

Marginbotton = mb

Marginleft = ml

Marginright = mr&#x20;

Margintop = mt



搭配 align item start end baseline …



#### ### flexbox不像gridsystem超出容器就往下排列所以要用warp&#xD;

#### ### 排列order&#xD;

#### ###align Content &#xD;

item調整跟Justify對齊的綜合通常用在換行

物件一多的時候

可以的話可以通通用content搭配對齊位置

star end baseline或between等等來用

用cross axis對齊









### ##補充觀念&#xD;

P開頭的通常指padding boder到box的距離

M開頭的通常指margin boder到boder的距離

搭配除了上下左右還有 x橫軸y縱軸

Rem bs4才有 16px&#x20;



核心讀法知道怎麼讀才知道怎麼改&#x20;











\#下午MVC 單元 View 上次講 C&#x20;


等等會特別講 Razor 其實也是 c# 只是多了一些特性



上一次講c完全沒有view利用url傳資料到客戶端瀏覽器顯示



範例 夜市網站結合googlemap


### 首先建置簡單的m環境

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LeGucwsGngZ57dGwCf5%2F-LeGw-SzJUD_OHBoBbMn%2Fimage.png?alt=media\&token=c24eee57-987b-4ebd-a176-9767d5cd3be7)

靜態類別 就像 資料表 類別實體 屬性欄位&#x20;

沒有繼承多載多型啥都沒有其時就是張資料表

Googlemap的使用可以地址也可以座標

有m無法直接v所以一定要有個c

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LeGucwsGngZ57dGwCf5%2F-LeGw4x-jGQ6ZvEv3b6y%2Fimage.png?alt=media\&token=fd42e429-2b4c-4a62-bf11-fccb0beb4402)

開始key demo data



利用list泛型 那是什麼呢?

照理來說 string\[10] 裡面就要放string ， int\[10]裡面就要放int

但list後面可以放任何檔案 list\<model> 可以不用管他型態 甚至是類別也可以

還有一個叫arroylist 但更亂



詳細老師步驟在HomeContrler



View老師直接套用範本



#### ### HomeController.cs&#xD;

```
using _02View.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace _02View.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            //03-1-6 在public ActionResult Index()內輸入以下內容
            string[] id = {"A01", "A02", "A03", "A04", "A05", "A06", "A07" };

            string[] name = { "瑞豐夜市", "新堀江商圈", "六合夜市", "青年夜市", "花園夜市", "大東夜市", "武聖夜市" };

            string[] address = { "813高雄市左營區裕誠路", "800高雄市新興區玉衡里", "800台灣高雄市新興區六合二路",
                "80652高雄市前鎮區凱旋四路758號", "台南市北區海安路三段533號", "台南市東區林森路一段276號",
                "台南市中西區武聖路69巷42號" };

            List<NightMarket> list = new List<NightMarket>();

            for(int i=0;i<id.Length;i++)
            {
                NightMarket nightmarket = new NightMarket();
                nightmarket.Id = id[i];
                nightmarket.Name = name[i];
                nightmarket.Address = address[i];

                list.Add(nightmarket);

            }


            return View(list);
        }
    }
}

```

#### ###Views/Home/Index.cshtml

```
@model IEnumerable<_02View.Models.NightMarket>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Address)
        </th>
        <th></th>
    </tr>

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

</table>

```

#### ###Models/NightMarket.cs

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

namespace _02View.Models
{
    public class NightMarket
    {
        public string Id { get; set; }

        public string Name { get; set; }

        public string Address { get; set; }
    }
}

```

#### ###步驟

```
//03-1 建立一個顯示各大夜市的View
//03-1-1 在Models上按右鍵,選擇加入,新增項目,程式碼,選擇類別,名稱鍵入NightMarket.cs
//03-1-2 在NightMarket class中輸入下列欄位以建立Model
//03-1-3 在Controllers資料夾上按右鍵,加入,控制器,選擇 MVC5Controller-Empty
//03-1-4 指定控制器名稱為HomeController,並開啟HomeController
//03-1-5 using _03View.Models
//03-1-6 在public ActionResult Index()內輸入內容
//03-1-7 在public ActionResult Index()上按右鍵,新增檢視
//03-1-8 進行下列設定:
//       View name:Index
//       Template:List
//       Model class:NightMarket(02View.Models) 
//       勾選Use a layout pages
//       按下Add
```

### ##談view&#xD;

如果view有牽涉到model

@model IEnumerable<\_02View.Models.NightMarket>

I代表介面 enumerable 集合實體

只要是個集合就能用

@foreach (var item in Model)

來讀model直到讀完為止



接著來讀View範本模板



@Razor 的好處是可以在 View內寫c#

Title不同可以增加收尋引擎的排名

都是模板

可以用class套bootstrap







Htmlhelper&#x20;

@Html.ActionLink("Create New", "Create")





404 http not found ( 等等會補充 錯誤頁面



@Html.DisplayNameFor(model => model.Name)

根據model去要欄位名稱



@Html.ActionLink("Edit", "Edit", new { id=item.Id }) |

@Html.ActionLink("Details", "Details", new { id=item.Id }) |

@Html.ActionLink("Delete", "Delete", new { id=item.Id })

上面有foreach迴圈跑很多次

根據點選的按鈕去新增onclick事件與傳值 但這次不錯新刪修



所以底下再加上夜市圖片與google地址



不知道怎麼下手的話



第一步先寫死

Html寫c#記得要@

放圖片很簡單只是改成動態檔名放圖



去googlemap url看邏輯發現前面固定指要改地址就可以有map

一樣寫死一個連結

然後在加上razor@做動態地址資料讀取

Class 改成像按鈕



確定結束在貼程式碼與步驟

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LeGucwsGngZ57dGwCf5%2F-LeGxDxFkHqdOm9EyT5G%2Fimage.png?alt=media\&token=f91438f6-1e29-425b-a52c-a357e35d9386)

### ###補充:&#xD;404

基於安全性與友善性

url如果要求錯出現404

mvc的web.config有兩個

打開專案的不是view的

在system.web

\<CustonErrors mode=”On” defaultRedirect=”404.html” >\</ CustonErrors>

自訂錯誤訊息打開

簡單加個404.html檔案

DefaultRedirect預設導入頁面

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LeGucwsGngZ57dGwCf5%2F-LeGxJhuvo2oD44dId8f%2Fimage.png?alt=media\&token=4c306ca2-88eb-4fd5-ba38-68564bf361ef)

接著

### ##Razor撰寫習慣&#xD;

註解方式@\*哈哈哈哈哈哈哈\*@





@{

這

裡都是



\<p>html出現在任何區塊都可以但是razor要放進去就要 @Razor 且字跟Razor要空半格\</p>



Razor範

圍



XX 且字無法像在純HTML內讀字存在 ( 這個物件並不存在除非

@:這樣KEY就會原封不動顯示出來



}



\<h2>@Math+@Eng+@Chi\</h2>

純字串顯示



\<h2>@(Math+Eng+Chi)\</h2>

真正的運算



#### ###RazorTest&#xD;

```
@{
    ViewBag.Title = "RazorTest";
}


<h2>RazorTest</h2>

@*這是單行註解*@

@*這是
    區塊
    註解*@

@{
    string name = "Jacky";
    int Math = 95;
    int Eng = 90;
    int Chi = 85;

    <h2>歡迎 @name 光臨本站</h2>

    @:歡迎 @name 光臨本站

}

<h2>@Math+@Eng+@Chi</h2>
<h2>@(Math + Eng + Chi)</h2>
<hr />

@(ViewBag.IsLogin = true)

@if (ViewBag.IsLogin)
{
    @:會員已登入
}
else
{
    <span>會員未登入</span>
}
<hr />

@{ 
    string[] NightName = { "瑞豐夜市", "新堀江商圈", "六合夜市", "青年夜市", "花園夜市", "大東夜市", "武聖夜市" };

}

<ul>
    @foreach (var item in NightName)
    {
    <li>@item</li>
    }
</ul>

```

### ##ViewBag

ViewBag.IsLogin=true

背包.袋子=物品

{% embed url="https://www.cnblogs.com/wenjiang/archive/2013/06/07/3123100.html" %}





{% embed url="https://www.c-sharpcorner.com/blogs/viewdata-vs-viewbag-vs-tempdata-in-mvc1" %}







### ##Helper class&#xD;



Html.ActionLink()

物件.方法(參數)

用來產生超連結





\##Code-first類別寫完後轉為model在透過ADO進入資料庫

Mvc的model有個預設數性只要是類別名稱叫id的都會被設定為id

之後會特別講code-first









#### ###models/Member.cs&#xD;

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

namespace _02View.Models
{
    public class Member
    {
        public string UserId { get; set; }
        public string Name { get; set; }
        public string Pwd { get; set; }
        public string Email { get; set; }
        public DateTime Birthday { get; set; }
    }
}
```

#### ###controllers/htmlhelpercontroller.cs

```
using _02View.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace _02View.Controllers
{
    public class HTMLHelperController : Controller
    {
        // GET: HTMLHelper
        //public ActionResult Index()
        //{
        //    return View();
        //}

        //03-6-6 建立GET與POST的Create方法
        public ActionResult Create()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Create(Member member)
        {
            string msg = "註冊資料:<hr />帳號:"+member.UserId+"<br />姓名:"+member.Name+"<br />密碼:"+member.Pwd+"<br />信箱:"+member.Email+"<br />生日:"+member.Birthday+"<br />";
            ViewBag.Msg = msg;
            return View();
        }

    }
}
```

新增資料要有兩個action 一個是 get 一個是 post



第一個 get 只要回傳他一份編輯表單即可



重點是第二個 post



Class 當成參數傳過來&#x20;



再來新增 creat的view ( 要用樣板一定要有model&#x20;



接著利用razor與helper來寫view



爛達???? 講model時會講?

來與後端連接?



Helper有些裡面多載會有可以加上html屬性的參數且要用new{class=\{{form-control}

且c#裡面class是保留字前面必須加上@



把輸入的值在用   @ViewBag.Msg

叫回來顯示

且要用 @html.Raw處理htmltag



程式碼如下

#### ###Views/HTMLHelper/Create.cshtml

```
@model _02View.Models.Member

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>
@*<form action="" method="post">*@
@using (Html.BeginForm())
{
    <p>
        @*<input id="Text1" type="text" class="form-control" />*@
        帳號:@Html.TextBoxFor(model => model.UserId, new { @class="form-control"})
    </p>
    <p>
        密碼:@Html.TextBoxFor(model => model.Pwd, new { @class = "form-control" })
    </p>
    <p>
        姓名:@Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
    </p>
    <p>
        信箱:@Html.TextBoxFor(model => model.Email, new { @class = "form-control" })
    </p>
    <p>
        生日:@Html.TextBoxFor(model => model.Birthday, new { @class = "form-control" })
    </p>
    <p>
        <input id="Submit1" type="submit" value="註冊" class="btn btn-default" />
    </p>

    <p>
         @Html.Raw(ViewBag.Msg)
    </p>

}

@*</form>*@

```

#### ### Controllers/HTMLHelperController.cs

```
using _02View.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace _02View.Controllers
{
    public class HTMLHelperController : Controller
    {
        // GET: HTMLHelper
        //public ActionResult Index()
        //{
        //    return View();
        //}

        //03-6-6 建立GET與POST的Create方法
        public ActionResult Create()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Create(Member member)
        {
            string msg = "註冊資料:<hr />帳號:"+member.UserId+"<br />姓名:"+member.Name+"<br />密碼:"+member.Pwd+"<br />信箱:"+member.Email+"<br />生日:"+member.Birthday+"<br />";
            ViewBag.Msg = msg;
            return View(member);
        }

    }
}

```

#### ### Models/Member.cs

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

namespace _02View.Models
{
    public class Member
    {
        public string UserId { get; set; }
        public string Name { get; set; }
        public string Pwd { get; set; }
        public string Email { get; set; }
        public DateTime Birthday { get; set; }
    }
}

```

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LeGucwsGngZ57dGwCf5%2F-LeGz6dkTx3rdSnEk8ES%2Fimage.png?alt=media\&token=4f585fea-f0b7-4135-a093-6087950c10be)

View是獨立的 所以很簡單可以套上bootstrap



Webform編譯完還是html所以還是可以套但是要透過jq比較麻煩



以夜市那一頁來介紹從新弄一個action然後重排一張view



用網格系統排版



一樣如果不知道怎下迴圈先死一次再來改





### ##卡片系統thumbnail&#xD;

&#x20;bs4有cord 但bs3只有



#### ###webform 可以用以下方式比較容易做到響應式&#xD;

Datalist 有講過

Listitem 好像沒講過

Repeater 好像比較容易

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LeGucwsGngZ57dGwCf5%2F-LeGzJbjyOLa46ioRF7e%2Fimage.png?alt=media\&token=c1d30a11-2954-4fb1-850b-8ad9ec84694e)

#### ###Views/Home/BootstrapIndex.cshtml

```
@model IEnumerable<_02View.Models.NightMarket>

@{
       ViewBag.Title = "南部地區各大夜市";
}

<h2>南部地區各大夜市</h2>

<div class="row">
    @foreach (var item in Model)
    {
        string imgsrc = item.Id + ".jpg";

        <div class="col-md-4 col-sm-6">
            <div class="thumbnail">
                <img src="~/images/@imgsrc" width="250" />
                <div class="caption">
                    <h2>
                        @item.Name
                    </h2>
                    <p>
                        @item.Address
                    </p>
                    <p>
                        <a href="https://www.google.com/maps/place/@item.Address" target="_blank" class="btn btn-danger">顯示地圖</a>
                    </p>
                </div>
            </div>
        </div>
    }
</div>

```

#### ###Controllers/HomeController.cs

```
using _02View.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace _02View.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            //03-1-6 在public ActionResult Index()內輸入以下內容
            string[] id = { "A01", "A02", "A03", "A04", "A05", "A06", "A07" };

            string[] name = { "瑞豐夜市", "新堀江商圈", "六合夜市", "青年夜市", "花園夜市", "大東夜市", "武聖夜市" };

            string[] address = { "813高雄市左營區裕誠路", "800高雄市新興區玉衡里", "800台灣高雄市新興區六合二路",
                "80652高雄市前鎮區凱旋四路758號", "台南市北區海安路三段533號", "台南市東區林森路一段276號",
                "台南市中西區武聖路69巷42號" };

            List<NightMarket> list = new List<NightMarket>();

            for (int i = 0; i < id.Length; i++)
            {
                NightMarket nightmarket = new NightMarket();
                nightmarket.Id = id[i];
                nightmarket.Name = name[i];
                nightmarket.Address = address[i];

                list.Add(nightmarket);

            }


            return View(list);
        }

        public ActionResult BootstrapIndex()
        {
            
            string[] id = { "A01", "A02", "A03", "A04", "A05", "A06", "A07" };

            string[] name = { "瑞豐夜市", "新堀江商圈", "六合夜市", "青年夜市", "花園夜市", "大東夜市", "武聖夜市" };

            string[] address = { "813高雄市左營區裕誠路", "800高雄市新興區玉衡里", "800台灣高雄市新興區六合二路",
                "80652高雄市前鎮區凱旋四路758號", "台南市北區海安路三段533號", "台南市東區林森路一段276號",
                "台南市中西區武聖路69巷42號" };

            List<NightMarket> list = new List<NightMarket>();

            for (int i = 0; i < id.Length; i++)
            {
                NightMarket nightmarket = new NightMarket();
                nightmarket.Id = id[i];
                nightmarket.Name = name[i];
                nightmarket.Address = address[i];

                list.Add(nightmarket);

            }


            return View(list);
        }


        public ActionResult RazorTest()
        {
            return View();
        }
    }
}

```

### ##最後老師邏輯步驟

```
//03-1 建立一個顯示各大夜市的View
//03-1-1 在Models上按右鍵,選擇加入,新增項目,程式碼,選擇類別,名稱鍵入NightMarket.cs
//03-1-2 在NightMarket class中輸入下列欄位以建立Model
//03-1-3 在Controllers資料夾上按右鍵,加入,控制器,選擇 MVC5Controller-Empty
//03-1-4 指定控制器名稱為HomeController,並開啟HomeController
//03-1-5 using _03View.Models
//03-1-6 在public ActionResult Index()內輸入內容
//03-1-7 在public ActionResult Index()上按右鍵,新增檢視
//03-1-8 進行下列設定:
//       View name:Index
//       Template:List
//       Model class:NightMarket(02View.Models) 
//       勾選Use a layout pages
//       按下Add

//03-2 NightMarket View
//03-2-1 修改英文標題為中文,修改<th>標籤內容為中文字
//03-2-2 增加item.Id, 並將最後一欄註解
//03-2-3 執行以測試結果


//03-4 Razor語法
//03-4-1 在Home Controller 新增RazorTest() Action
//03-4-2 在public ActionResult RazorTest()上按右鍵,新增檢視
//03-4-3 進行下列設定:
//       View name:RazorTest
//       Template:Empty (without model)
//       勾選Use a layout pages
//       按下Add
//03-4-4 Razor語法練習

//03-5 使用Razor修改Home/Index View
//03-5-1 增加兩項<th>標籤
//03-5-2 讀取圖片檔名
//03-5-3 增加圖片及地圖顯示


//03-6 HTML Helper
//03-6-1 在Models上按右鍵,選擇加入,新增項目,程式碼,選擇類別,名稱鍵入Member.cs
//03-6-2 在Member class中輸入下列欄位以建立Model
//03-6-3 在Controllers資料夾上按右鍵,加入,控制器,選擇 MVC5Controller-Empty
//03-6-4 指定控制器名稱為HTMLHelperController,並開啟HTMLHelperController
//03-6-5 using _03View.Models
//03-6-6 建立GET與POST的Create方法
//03-6-7 在public ActionResult Create()上按右鍵,新增檢視
//03-6-8 進行下列設定:
//       View name:Create
//       Template:Create
//       Model classMember(02View.Models) 
//       勾選Use a layout pages
//       按下Add
//03-6-9 撰寫HTMLHelper/Create View 內容
//03-6-10 執行以測試結果

```
