#前端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
有類別是 列印才看的到 或是 螢幕看的到 或是不同螢幕不同顯示方式
### 09Utility_Display.html
Copy <!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
Copy <!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
Copy 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
Copy @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
Copy 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; }
}
}
###步驟
Copy //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
<CustonErrors mode=”On” defaultRedirect=”404.html” ></ CustonErrors>
自訂錯誤訊息打開
簡單加個404.html檔案
DefaultRedirect預設導入頁面
接著
##Razor撰寫習慣
註解方式@*哈哈哈哈哈哈哈*@
@{
這
裡都是
<p>html出現在任何區塊都可以但是razor要放進去就要 @Razor 且字跟Razor要空半格</p>
Razor範
圍
XX 且字無法像在純HTML內讀字存在 ( 這個物件並不存在除非
@:這樣KEY就會原封不動顯示出來
}
<h2>@Math+@Eng+@Chi</h2>
純字串顯示
<h2>@(Math+Eng+Chi)</h2>
真正的運算
###RazorTest
Copy @{
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
背包.袋子=物品
##Helper class
Html.ActionLink()
物件.方法(參數)
用來產生超連結
##Code-first類別寫完後轉為model在透過ADO進入資料庫
Mvc的model有個預設數性只要是類別名稱叫id的都會被設定為id
之後會特別講code-first
###models/Member.cs
Copy 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
Copy 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
Copy @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
Copy 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
Copy 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只有
Datalist 有講過
Listitem 好像沒講過
Repeater 好像比較容易
###Views/Home/BootstrapIndex.cshtml
Copy @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
Copy 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();
}
}
}
##最後老師邏輯步驟
Copy //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 執行以測試結果
