2019/0424/Bootstrap_RWD基礎/應用&Asp.Net_MVC實作增刪修(修待補)

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 有五種斷點

如何測試斷點?

前端

<!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兩個工程師寫的自由軟體

Bootstrapgetbootstrap

Bootstrap 4 繁體中文手冊 [六角學院譯]getbootstrap

W3Schools.comwww.w3schools.com

Grid systemgetbootstrap

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程式碼

骯敗(日文?

<!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不同網格系統 ??

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

@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

Enable JavaScript to use searchwww.google.com

看到的程式語言為 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

<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 Helpers in ASP.Net MVCwww.tutorialsteacher.com

怕沒講我們聽不懂所以

改成原來的 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

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

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

@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

@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

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

App_Start

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 加入例外訊息顯示處

修改的後天講

Previous2019/0423/Java基礎(型別/溢位/自動強制型別轉換/鑄造物件/串流/)&I/O物件用法(底層/較不底層)Next2019/0425/伺服器IIS安裝&資料匯入與管理

Last updated 6 years ago

Was this helpful?

hashtagResponsive Web Design 響應式網頁設計 ( 自適應式網站 )

hashtag判斷是否為響應式

hashtag( 自適應式網站 )

hashtag響應式

hashtag響應式也無法取代雙版本

hashtag雙版本

hashtag原理

hashtag如何測試斷點?

hashtag前端

hashtag以上為手動刻 以下為 bootstrap 其實也是一樣方式只是刻好給你用

hashtag如何看文件如何改核心?

hashtagGrid system ??? 應該下次會講

hashtag如何使用 bootstrap ?

hashtag重點 jq > bs.js

hashtag所以總結至少要串接三種框架

hashtag原標籤樣式

hashtagBS標籤樣式

hashtag利用class 下 bs程式碼

hashtag進入重點 網格系統

hashtagIde的bs提示

hashtag利用f12看斷點

hashtagBS特性:

hashtag!important 我的優先權最高

hashtag補充:w-100換行w-50 w-25 只要超過12格就會換行

hashtagCss3才有 flex box --- bs3也沒有

hashtag下午把Webform轉MVC

hashtag環境製作

hashtag物件導向

hashtag Razer

hashtag老師版本的有把程式碼步驟放上去control

hashtagmvc裡面client對control提reguse出是靠網址url

hashtag以上實作mvc刪除功能完成

hashtag實作mvc新增功能

hashtag1.先寫control的action

hashtagAction 種類

hashtag2.利用actionname右鍵利用小精靈新增對應的view再去看懂razer改razer

hashtag helper ???? 啥後面會講

hashtag重點

hashtag物件導向多載 overloading ----------類別繼承封裝多載多型

hashtagSimplebyding 簡單繫結法

hashtagBug

hashtag到此 刪除與新增完成，以下為程式碼

hashtagModels

hashtagControllers

hashtagViews 一個 action 可以對應一個View或沒有View

hashtagIndex.cshtml

hashtagCreate.cshtml

hashtag_layout.cshtml

hashtagApp_Start

Responsive Web Design 響應式網頁設計 ( 自適應式網站 )

判斷是否為響應式

( 自適應式網站 )

響應式

響應式也無法取代雙版本

雙版本

原理

如何測試斷點?

前端

以上為手動刻以下為 bootstrap 其實也是一樣方式只是刻好給你用

如何看文件如何改核心?

Grid system ??? 應該下次會講

如何使用 bootstrap ?

重點 jq > bs.js

所以總結至少要串接三種框架

原標籤樣式

BS標籤樣式

利用class 下 bs程式碼

進入重點網格系統

Ide的bs提示

利用f12看斷點

BS特性:

!important 我的優先權最高

補充:w-100換行w-50 w-25 只要超過12格就會換行

Css3才有 flex box --- bs3也沒有

下午把Webform轉MVC

環境製作

物件導向

Razer

老師版本的有把程式碼步驟放上去control

mvc裡面client對control提reguse出是靠網址url

以上實作mvc刪除功能完成

實作mvc新增功能

1.先寫control的action

Action 種類

2.利用actionname右鍵利用小精靈新增對應的view再去看懂razer改razer

helper ???? 啥後面會講

重點

物件導向多載 overloading ----------類別繼承封裝多載多型

Simplebyding 簡單繫結法

Bug

到此刪除與新增完成，以下為程式碼

Models

Controllers

Views 一個 action 可以對應一個View或沒有View

Index.cshtml

Create.cshtml

_layout.cshtml

App_Start