Responsive Web Design 響應式網頁設計 ( 自適應式網站 )
普通網站 或 軟體 以下為單純網站
應用程式專案式綠色那種 網站可以是應用程式但是以網頁型態存在
判斷是否為響應式
手機與電腦去看同樣的網頁看一不一樣
不一樣就是不同版本而不是響應式
( 自適應式網站 )
如何透過CSS、JS
在不同解析度 ( 一般為異質裝置 ) 下，
只製作一個網頁，程式可依據該解析度呈現最佳版型
響應式
響應式也無法取代雙版本
網站功能資訊太複雜就難以
最佳瀏覽介面與使用者經驗
小螢幕會刪剪許多東西
資訊豐富度 太高 會很難找資料
雙版本
雅虎 廣告 不起眼 一年要3500萬
雅虎 關鍵字廣告 曝光免費 點擊收費
( 自己設定點擊一次多少錢 ( 不知道別人設多少 ( 競標
SEO 頻甚麼排前面 ( 花錢
算命平台 跟 拜拜平台 生肖 星座
head 安全性結構 編碼方式
如果要做成響應式一定要再head 下 meta
Name=”viewport”後設資料
Comtent=”width=device-width”內容寬度為裝置寬度為基準
(讓橫向的sogobar不要出現)
原理
響應式網頁的最基底
寬度是用相對值%不是絕對值px
所有的響應式網頁套的都是CSS
再CSS內實現響應式的物件為
@media
斷點width
<-480px-> <-540px-> ….
當這個寬度時要顯示哪種
以前斷點很簡單 現在很複雜
小解析度大手機 大解析度小手機 小解析度大電腦 大解…………
新版bootstape 有五種斷點
如何測試斷點?
前端
Copy <!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 其實也是一樣方式只是刻好給你用
互動頻繁的網站適合做成響應式
裝bootstrap框架
3版比4版強很多 很多東西新的被拿掉
如何看文件如何改核心?
Twitter兩個工程師寫的自由軟體
Grid system
??? 應該下次會講
Reboot 再不同瀏覽器連字形留白都可能不同，藉由reboot歸零
樣式在這都找的到做法
如何使用 bootstrap ?
如果會動到功能就一定是js
Content資料夾為全部的css
Scripts為全部的js
(核心) Booststrap.css跟(伺服器用)booststrap.min.css
差別為 前面有排版檔案較大
互動的功能 點下去有反應
Booststrap.js 與 booststrap.min.js 也是一樣的
重點 jq > bs.js
載入js函式庫要寫在底下避免使用者進入網頁讀取太久才看到頁面文檔，
再來Jq函式庫要先比bootstrap函式庫先載入，
因為bootstrap函式庫是由jq與js寫出來的，
不用下載 網路上也有資源 CDN
但網頁必須練結上網
封包結構
框架對應那些功能
Bundle 到時mvc會講 需要配合後端使用
所以總結至少要串接三種框架
Bs.css
Bs.jq
Bs.js
一引入後就算沒下bs程式碼，標籤元樣式也已經改變
原標籤樣式
BS標籤樣式
利用class 下 bs程式碼
骯敗(日文?
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>
<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>
BS對響應式外對UI資源也強大
進入重點 網格系統
固定分為12格
表示法 Col – 斷點 – 格數
1:2分成12格則為4:8
Col – md – 4
Col – md – 8
Ide的bs提示
容器概念 再做網頁的時候一定會放個div當容器 讓你好排版
直接class指定 container 直接選 bs的class就會有樣式
原本還要floot clear …
3跟4版本bs同樣動作但樣式不一樣 因為動用到flatbox不同網格系統 ??
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;
}
</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>
利用f12看斷點
為什麼要用容器?有白邊?
改核心前要會看核心
直接再格式版本bs函式庫搜尋關鍵字classname .container
就發現
還發現 不同斷點白邊會內縮
不管是哪一種斷點的佔幾格的 都套用同一種css
相對定位 百分比等等
-ms- 是專門給micosoft用的 ie
Combine結合 跟 預設屬性
BS特性:
沒有斷點等於小於576
只有寫斷點沒有寫格數那排法就是1:1:1…
4才有 3 bs版本沒有
只有其中一個有寫格數 那就是剩下的平均
Bs4有個特殊斷點為auto寬度根據內容剩下的平均分配
明定的空間不會被擠壓，沒明定的會被平均分配
全部都給定格數時剩下的留白
w-100 等寬多行 強迫標籤後換行顯示，標籤前平均分配
!important 我的優先權最高
看選擇器精緻度 inline > slect > … 但 ! 具有最優先權
補充:w-100換行w-50 w-25 只要超過12格就會換行
不知道會這樣最好方式是標示出來bolder
Css3才有 flex box --- bs3也沒有
但以上只有那幾種解析度而已所以要用以下
Combine結合?
下午把Webform轉MVC
MVC一定要是應用程式專案不能是單純網站
以MVC寫上一次的增刪修
講完後分開講
環境製作
BS 3版本最高 3.4.1 - JQ 1.9做的
3版多了網頁圖示可以用
把上次檔案複製過來加入專案
第一步
資料庫建立成model databasefirst
Local連線
物件導向
物件(菜肴) 是類別的實現
(( 現實世界裡的東西 講得出來的 具體抽象都可
是從
類別(食材) 是物件的抽象
(( 類別必須要有屬性才能定義 幫物件做分類 籠統的語言抽象化
(( 物件的特徵這個特徵就是屬性(有) 物件的方法就是物件會什麼功能(會)
鑄造出來的
[DisplayName]
Using
有了M開始做C
控制器的名稱一定要叫xxcontrollor
控制器 根據 客戶端 提出的要求 給出相對應的action方法
Using model近來
加入 dbproductentities db 來操控它
跟model要資料餵給view
這個資料的資料型態為 List泛型 ( 丟甚麼資料給它就是什麼資料型態 )
由action 增加 view
View name如果跟action名稱一樣會自動對應
Model裡面有定義 view 就會顯示
修改view很簡單 因為裡面就是html
Copy @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# 基本語法
Razer
看到的程式語言為 c# 但這裡表現方式為 Razer 因為副檔名為cshtml
如果是vb則為vbhtml，且都不能直接執行需要編譯
Layout
Razer語法就是c#orvb 前置符號@即可 可以跟html直接混寫
老師版本的有把程式碼步驟放上去control
//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
(http://xxxx/controllname/actionname/id)
然後從control進到view然後回饋給client
首頁再
app_start
routecobfig
做某個動作(增刪修等等…)就一定要有對應的action就算沒有view
先回到index
Copy <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)
第三個欄位為帶入controller的參數的名稱
抓資料位置 等等砍資料檔案
抓檔名刪資料庫檔名等等刪欄位
然後刪資料檔案
然後刪資料庫欄位
Savechange
做完以上的事情後把資料重新讀取一次傳送到index
Redirecttoactio n(index)
再回到前面view 再增加
第四個參數 js的事件
以上實作mvc刪除功能完成
最後做完mvc所有新刪修再把程式碼貼上
實作mvc新增功能
1.先寫control的action
Action 種類
a.顯示表單b.寫入資料庫
2.利用actionname右鍵利用小精靈新增對應的view再去看懂razer改razer
精靈產生的view裡面會有token ( 預防機器人用的
@Html.AntiForgeryToken()
產生from @using (Html.BeginForm())
helper ???? 啥後面會講
怕沒講我們聽不懂所以
改成原來的 html from
Put delete api crud ???? 之後會講
Enctype=”multipart/form-data
action=”處理頁路徑”
webfrom就是處理路徑是自己才會變postback，但mvc處理頁面是action所以要寫action路徑
裡面很多精靈範本產生的東西 如驗證器 然後一堆bs函式碼
重點
Html的
Id css js 前端操控物件再用的
Name mvc後端操控物件再用的
取一樣的才方便
Get action
表單東西送到post action然後儲存
物件導向多載 overloading ----------類別繼承封裝多載多型
同時有兩組同樣名稱create的action
只要參數不一樣即可(數量 型態
參數不同但回應不同結果
上面要加註[httppost]才是postaction
有畫面是get 沒畫面是post ??
Simplebyding 簡單繫結法
只要name的值跟action參數一樣就會繫結control裡面的參數
再action內實作判斷檔案有無上傳
實體資料庫 鑄造物件
然後資料庫的欄位放入陣列
物件add 放入欄位
Db.savechange
回到index
因為資料上傳等於外接資料庫
很容易會發生例外所以外面用try包住它
Catch 顯示 錯誤訊息物件
前端串接 錯誤訊息物件
Bug
1.補using去掉的啥class也有files
2.補return函數一定要有回傳值
Mvc編譯完一次後面就會很快
到此 刪除與新增完成，以下為程式碼
Models
Copy //------------------------------------------------------------------------------
// <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
Copy 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
Index.cshtml
Copy @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
Copy @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
Copy <!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>© @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
Copy 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)
//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 加入例外訊息顯示處
修改的後天講
