2017/0506/Bs_FlexBox&Asp.Net_MVC_View+Razor@+Viewbag+helper

Bootstrap_Utilities+Display+HTMLHelper+404

#前端bootstrap

###前期提要gridsystem &

今天會講的為以下

Bs4相對於3的大特色

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

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

通用 ( 每個標籤都適用

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

Bs 3 有提供常用字型 icon 但Bs 4 就沒有

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

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

全部 ui 等等…

Reboot 瀏覽器全部洗成類似

Grid 網格系統

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

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

##display

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

Display propertygetbootstrap

### 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>

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

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

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

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

flexbox

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

Bs4只要將類別下 d –flex

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

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

###Flex-column

###Flex-row-reverse

###…

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

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

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

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

### 10Utility_Flex.html

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

    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
        .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>

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

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

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

Content是指box最內側

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

###全部填滿 flexfill

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

###壓縮flex-shrink-(1)

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

Marginbotton = mb

Marginleft = ml

Marginright = mr

Margintop = mt

搭配 align item start end baseline …

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

### 排列order

###align Content

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

物件一多的時候

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

star end baseline或between等等來用

用cross axis對齊

##補充觀念

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

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

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

Rem bs4才有 16px

核心讀法知道怎麼讀才知道怎麼改

#下午MVC 單元 View 上次講 C

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

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

範例夜市網站結合googlemap

首先建置簡單的m環境

靜態類別就像資料表類別實體屬性欄位

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

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

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

開始key demo data

利用list泛型那是什麼呢?

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

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

還有一個叫arroylist 但更亂

詳細老師步驟在HomeContrler

View老師直接套用範本

### 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);
        }
    }
}

###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

如果view有牽涉到model

@model IEnumerable<_02View.Models.NightMarket>

I代表介面 enumerable 集合實體

只要是個集合就能用

@foreach (var item in Model)

來讀model直到讀完為止

接著來讀View範本模板

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

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

都是模板

可以用class套bootstrap

Htmlhelper

@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 改成像按鈕

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

###補充: 404

基於安全性與友善性

url如果要求錯出現404

mvc的web.config有兩個

打開專案的不是view的

在system.web

自訂錯誤訊息打開

簡單加個404.html檔案

DefaultRedirect預設導入頁面

接著

##Razor撰寫習慣

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

這

裡都是

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

Razor範

圍

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

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

}

純字串顯示

真正的運算

###RazorTest

@{
    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

背包.袋子=物品

TempData,ViewData和ViewBag的比较 - 文酱 - 博客园www.cnblogs.com

ViewData VS ViewBag Vs TempData in MVCCsharpCorner

##Helper class

Html.ActionLink()

物件.方法(參數)

用來產生超連結

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

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

之後會特別講code-first

###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; }
    }
}

###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 當成參數傳過來

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

接著利用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; }
    }
}

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

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

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

用網格系統排版

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

##卡片系統thumbnail

bs4有cord 但bs3只有

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

Datalist 有講過

Listitem 好像沒講過

Repeater 好像比較容易

###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 執行以測試結果

Previous2019/0503/Asp.net泛型處理常式驗證圖片應用&第七次專題報告Usecase Next2019/0507/Java 物件導向_類別+函式觀念&階段性作業三

Last updated 6 years ago

hashtag#前端bootstrap

hashtag###前期提要gridsystem &

hashtag#Utilities bs4 獨立出來的通用類別

hashtag##display

hashtag### 09Utility_Display.html

hashtag ##CSS3 Flex Box 相對於 gridsystem是另外一種概念

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

hashtag###Flex-column

hashtag###Flex-row-reverse

hashtag###…

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

hashtag### 10Utility_Flex.html

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

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

hashtag###全部填滿 flexfill

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

hashtag###壓縮flex-shrink-(1)

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

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

hashtag### 排列order

hashtag###align Content

hashtag##補充觀念

hashtag#下午MVC 單元 View 上次講 C

hashtag範例 夜市網站結合googlemap

hashtag首先建置簡單的m環境

hashtag### HomeController.cs

hashtag###Views/Home/Index.cshtml

hashtag###Models/NightMarket.cs

hashtag###步驟

hashtag##談view

hashtag###補充: 404

hashtag##Razor撰寫習慣

hashtag###RazorTest

hashtag##ViewBag

hashtag##Helper class

hashtag###models/Member.cs

hashtag###controllers/htmlhelpercontroller.cs

hashtag###Views/HTMLHelper/Create.cshtml

hashtag### Controllers/HTMLHelperController.cs

hashtag### Models/Member.cs

hashtag##卡片系統thumbnail

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

hashtag###Views/Home/BootstrapIndex.cshtml

hashtag###Controllers/HomeController.cs

hashtag##最後老師邏輯步驟