C50108
Search…
職訓局里程碑
2019/0424/Bootstrap_RWD基礎/應用&Asp.Net_MVC實作增刪修(修待補)

普通網站 或 軟體 以下為單純網站
應用程式專案式綠色那種 網站可以是應用程式但是以網頁型態存在

手機與電腦去看同樣的網頁看一不一樣
不一樣就是不同版本而不是響應式

如何透過CSS、JS
在不同解析度 ( 一般為異質裝置 ) 下,
只製作一個網頁,程式可依據該解析度呈現最佳版型

網站功能資訊太複雜就難以
最佳瀏覽介面與使用者經驗
小螢幕會刪剪許多東西
資訊豐富度 太高 會很難找資料

雅虎 廣告 不起眼 一年要3500萬
雅虎 關鍵字廣告 曝光免費 點擊收費
( 自己設定點擊一次多少錢 ( 不知道別人設多少 ( 競標
SEO 頻甚麼排前面 ( 花錢
算命平台 跟 拜拜平台 生肖 星座
head 安全性結構 編碼方式
如果要做成響應式一定要再head 下 meta
Name=”viewport”後設資料
Comtent=”width=device-width”內容寬度為裝置寬度為基準
(讓橫向的sogobar不要出現)

響應式網頁的最基底
寬度是用相對值%不是絕對值px
所有的響應式網頁套的都是CSS
再CSS內實現響應式的物件為
@media
斷點width
<-480px-> <-540px-> ….
當這個寬度時要顯示哪種
以前斷點很簡單 現在很複雜
小解析度大手機 大解析度小手機 小解析度大電腦 大解…………
新版bootstape 有五種斷點

<!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框架
3版比4版強很多 很多東西新的被拿掉

Twitter兩個工程師寫的自由軟體
Bootstrap
getbootstrap
Bootstrap 4 繁體中文手冊 [六角學院譯]
getbootstrap
W3Schools Free Online Web Tutorials
Grid system
getbootstrap

Reboot 再不同瀏覽器連字形留白都可能不同,藉由reboot歸零
樣式在這都找的到做法

如果會動到功能就一定是js
Content資料夾為全部的css
Scripts為全部的js
(核心) Booststrap.css跟(伺服器用)booststrap.min.css
差別為 前面有排版檔案較大
互動的功能 點下去有反應
Booststrap.js 與 booststrap.min.js 也是一樣的

載入js函式庫要寫在底下避免使用者進入網頁讀取太久才看到頁面文檔,
再來Jq函式庫要先比bootstrap函式庫先載入,
因為bootstrap函式庫是由jq與js寫出來的,
不用下載 網路上也有資源 CDN
但網頁必須練結上網
封包結構
框架對應那些功能
Bundle 到時mvc會講 需要配合後端使用

Bs.css
Bs.jq
Bs.js
一引入後就算沒下bs程式碼,標籤元樣式也已經改變

骯敗(日文?
<!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

容器概念 再做網頁的時候一定會放個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>

為什麼要用容器?有白邊?
改核心前要會看核心
直接再格式版本bs函式庫搜尋關鍵字classname .container
就發現
還發現 不同斷點白邊會內縮
不管是哪一種斷點的佔幾格的 都套用同一種css
相對定位 百分比等等
-ms- 是專門給micosoft用的 ie
Combine結合 跟 預設屬性

沒有斷點等於小於576
只有寫斷點沒有寫格數那排法就是1:1:1…
4才有 3 bs版本沒有
只有其中一個有寫格數 那就是剩下的平均
Bs4有個特殊斷點為auto寬度根據內容剩下的平均分配
明定的空間不會被擠壓,沒明定的會被平均分配
全部都給定格數時剩下的留白
w-100 等寬多行 強迫標籤後換行顯示,標籤前平均分配

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

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

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

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
@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# - Google Search
Google
看到的程式語言為 c# 但這裡表現方式為 Razer 因為副檔名為cshtml
如果是vb則為vbhtml,且都不能直接執行需要編譯
Layout
Razer語法就是c#orvb 前置符號@即可 可以跟html直接混寫

//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 修改圖片顯示處

(http://xxxx/controllname/actionname/id)
然後從control進到view然後回饋給client
首頁再
app_start
routecobfig
做某個動作(增刪修等等…)就一定要有對應的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)
第三個欄位為帶入controller的參數的名稱
抓資料位置 等等砍資料檔案
抓檔名刪資料庫檔名等等刪欄位
然後刪資料檔案
然後刪資料庫欄位
Savechange
做完以上的事情後把資料重新讀取一次傳送到index
Redirecttoactio n(index)
再回到前面view 再增加
第四個參數 js的事件

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

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

精靈產生的view裡面會有token ( 預防機器人用的
@Html.AntiForgeryToken()
產生from @using (Html.BeginForm())

HTML Helpers in ASP.Net MVC
怕沒講我們聽不懂所以
改成原來的 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然後儲存

同時有兩組同樣名稱create的action
只要參數不一樣即可(數量 型態
參數不同但回應不同結果
上面要加註[httppost]才是postaction
有畫面是get 沒畫面是post ??

只要name的值跟action參數一樣就會繫結control裡面的參數
再action內實作判斷檔案有無上傳
實體資料庫 鑄造物件
然後資料庫的欄位放入陣列
物件add 放入欄位
Db.savechange
回到index
因為資料上傳等於外接資料庫
很容易會發生例外所以外面用try包住它
Catch 顯示 錯誤訊息物件
前端串接 錯誤訊息物件

1.補using去掉的啥class也有files
2.補return函數一定要有回傳值
Mvc編譯完一次後面就會很快

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

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

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

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

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

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 加入例外訊息顯示處
修改的後天講
Copy link
On this page
Responsive Web Design 響應式網頁設計 ( 自適應式網站 )
判斷是否為響應式
( 自適應式網站 )
響應式也無法取代雙版本
原理