2019/0528/Bootstrap Components 元件介紹 + MVC 登入驗證 + 商品加入購物車 實作

Bootstrap Components

Bootstrap dropdown上次套件庫bug

dropdown-續

Keyword Disable Active

不止擺選單，只要不是超鏈結

button與dropdown合併做法

###\WebApplication\responsive_web_design\RWD\24Dropdown.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" />
    <link href="MyStyle.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <!--基本型-->
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" id="ddMenu1">
                Menu

            </button>
            <div class="dropdown-menu" aria-labelledby="ddMenu1">
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item disabled">Another action</a>
                <a href="#" class="dropdown-item">Something else here</a>
                <a href="#" class="dropdown-item active">Separated link</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item">Another action</a>

            </div>
        </div>
        <hr />
        <!--群組按鈕-->
        <div class="btn-group">
            <button class="btn btn-danger" data-toggle="dropdown" id="ddMenu2">
                Menu
            </button>
            <button class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" id="ddMenu2"></button>
            <div class="dropdown-menu" aria-labelledby="ddMenu2">
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item">Another action</a>
                <a href="#" class="dropdown-item">Something else here</a>
                <a href="#" class="dropdown-item">Separated link</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item">Another action</a>

            </div>
        </div>


        <hr />
        <br />
        <br /><br /><br /><br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <!--選單往上出現-->
        <div class="btn-group dropup">
            <button class="btn btn-danger" data-toggle="dropdown" id="ddMenu3">
                Menu
            </button>
            <button class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" id="ddMenu3" aria-haspopup="true"></button>
            <div class="dropdown-menu" aria-labelledby="ddMenu3">
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item">Another action</a>
                <a href="#" class="dropdown-item">Something else here</a>
                <a href="#" class="dropdown-item">Separated link</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item">Another action</a>

            </div>
        </div>
        <hr />
        <!--選單往左側出現-->
        <div class="btn-group dropleft">
            <button class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" id="ddMenu4"></button>
            <button class="btn btn-danger" data-toggle="dropdown" id="ddMenu4">
                Menu
            </button>

            <div class="dropdown-menu" aria-labelledby="ddMenu4">
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item">Another action</a>
                <a href="#" class="dropdown-item">Something else here</a>
                <a href="#" class="dropdown-item">Separated link</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item">Another action</a>

            </div>
        </div>
        <hr />
        <!--Responsive選單的對齊-->
        <div class="dropdown" style="border:1px solid">
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-display="static">
                如果大螢幕的時候選單往右靠，一般大小螢幕時用預設方式對齊

            </button>
            <div class="dropdown-menu dropdown-menu-lg-right">
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item disabled">Another action</a>
                <a href="#" class="dropdown-item">Something else here</a>
                <a href="#" class="dropdown-item active">Separated link</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item">Another action</a>

            </div>
        </div>

        <hr />
        <!--純文字-->
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                Text

            </button>
            <div class="dropdown-menu p-4 text-danger" style="max-width:250px">
                <p>
                    asdfdasfdasfasdfdasfdas
                </p>
                <p class="mb-0">
                    444444444
                </p>
            </div>
        </div>

        <hr />

        <!--與Form合併使用-->
        <div class="dropdown">
            <button class="btn btn-primary" data-toggle="dropdown">
                登入系統

            </button>
            <div class="dropdown-menu">
                <form class="px-4 py-3">
                    <div class="form-group">
                        <label for="email">Email:</label>
                        <input id="email" type="email" class="form-control" placeholder="Enter email..." required />
                    </div>
                    <div class="form-group">
                        <label for="pwd">Password:</label>
                        <input id="pwd" type="password" class="form-control" placeholder="Password" required />
                    </div>
                    <div class="form-group form-check">
                        <input id="remember" type="checkbox" class="form-check-input" />
                        <label for="remember">記住我</label>
                    </div>
                    <input id="Submit1" type="submit" value="Sign in" class="btn btn-secondary" />
                </form>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">註冊會員</a>
                <a href="#" class="dropdown-item">忘記密碼</a>
            </div>
        </div>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />  <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />


        <hr />
        <!--與Button合併使用-->
        <div class="btn-group">
            <button type="button" class="btn btn-info">Item 1</button>
            <button type="button" class="btn btn-info">Item 2</button>
            <div class="btn-group">
                <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Item 3</button>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">Action</a>
                    <a href="#" class="dropdown-item">Another action</a>
                    <a href="#" class="dropdown-item">Something else here</a>
                    <a href="#" class="dropdown-item">Separated link</a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">Action</a>
                    <a href="#" class="dropdown-item">Another action</a>

                </div>
            </div>
            <button type="button" class="btn btn-info">Item 4</button>
        </div>

        <br />
        <br />
        <br />
        <br />
        <br />
        <br />  <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />

    </div>


    <script src="Scripts/jquery-3.0.0.min.js"></script>
    <script src="Scripts/bootstrap.bundle.min.js"></script>
    <!--<script src="Scripts/popper.js"></script>-->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="Scripts/bootstrap.min.js"></script>-->


    <!--<script src="Scripts/bootstrap.bundle.min.js"></script>-->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>-->
    <!--<script src="Scripts/popper.js"></script>-->
    <!--<script src="Scripts/bootstrap.min.js"></script>-->




</body>
</html>

#Navs 頁籤

導覽

Keyword

Nav

Nav-item

Nav-tabs

Nav-pills

Flex

justify

應用jq

data-toggle

###:\Little-donkey\WebApplication\responsive_web_design\RWD\25Navs.html

#pagination 分頁 樣式

Html5 nav 導覽列 SEO 語意化

調一般的置中 輔助類別 ( justify-content-center …

### \WebApplication\responsive_web_design\RWD\26Pagination.html

#題外話 分頁功能

MVC 分頁較麻煩像是進階的購物車 ( 1.JQ 2.NUGET套件

Webform分頁簡單 ( 因為狀態會保留住

#27GridView_Pagination.aspx

示範 webform與gridview套bootstrap 用cssdom 與 jqdom 塞 class屬性

###\WebApplication\responsive_web_design\RWD\27GridView_Pagination.aspx

#28Progress.html 進度欄 ( 樣式

Keyword

Progress-bar

Progress-bar-striped

progress-bar-animated

但長度就要利用css style 表達

很多keyword … 很多樣式動畫

###WebApplication\responsive_web_design\RWD\ 28Progress.html

#spinner 讀取中樣式

還在執行 旋轉的樣式 ( 功能都必須寫javascript

Ajax json requses and reghsad time

Keyword

spinner-border

text-danger/warning

spinner-grow

### WebApplication\responsive_web_design\RWD\29Spinner.html

#MVC會員登入 加入購物車功能

( 單元劇結束 下一次會講一整個MVC專案 ( 留言板 IG

(資料庫端應用程式端其實都可以寫

ViewModel要去再看一下功能定義

4張表就是4個class

顯示using System.ComponentModel; 驗證using System.ComponentModel.DataAnnotations;

###tOrderDetail.cs

大部分組別 購物車table

但其實可以訂單明細就是購物車只要一個欄位去做判別 是訂單還是購物車

(但大部分都是用在登入後

沒有要做商品管理(上下架(所以不驗證商品表單

整理model

### 08ShoppingCar/Models/tMember.cs

接著寫控制器Controller

Using 剛剛做好的model

New一個資料庫物件出來

接著把tProduct表放進變數products

資料庫的資料先讀到index去

但沒有那麼簡單

必須要有登入與非登入的layout 用來存session

##今天要做第二個layout

首先先新增視圖Empty(without model)

但首先處理Index.cshtml ( 商品清單

@model IEnumerable 泛型

Logo[.NET]快快樂樂學LINQ系列前哨戰－IEnumerable, IEnumerator, yield, Iterator | In 91 - 點部落In 91

手刻bootstrap版

手刻 加入購物車的按鈕

先寫死的一次

再用foreach item 做所有的資料筆數

加入購物車的按鈕傳入當筆id藉由url傳遞到 action

接著必須判斷session才會出現 加入購物車的按鈕

接著回到Controller寫利用session判斷index的_layout

### 08ShoppingCar/Controllers/HomeController.cs

###08ShoppingCar/Views/Home/Index.cshtml

###老師步驟

接著來改layout 改自動產生的碼

還有要改漢堡選單

一樣用helper html.actionlink

三版bootstrap用法

然後突然教了轉google搜尋引擎

接著在Shared新增一個新的layout

兩種view大家都可以用它? 一種是Layout

pasharedview ?? 下一個專案會告訴大家

接著做登入過後的 layout

漢堡選單內改為 登入過後的功能

然後稍微改了些bootstrap

### 08ShoppingCar/Views/Shared/_LayoutMember.cshtml

接著弄兩個action做登入一個用來post驗證一個用來get回傳值?

用simple bind就好因為只有帳號密碼

用linq lmada 寫查詢 查到就塞到變數 如果沒查到就不會塞

用viewbag傳帳號或密碼錯誤訊息到前端

如果驗證成功則 session帶入資料

且return redirecttoaction index

接著做登入的頁面 Login.cshtml

這裡有示範bind 但不知道是簡單還複雜

https://www.itread01.com/content/1545899784.htmlwww.itread01.com

&錯誤訊息產生的方式

到此登入驗證帶session功能完成

###08ShoppingCar/Controllers/HomeController.cs

###08ShoppingCar/Views/Home/Login.cshtml

###老師步驟

接著寫登出功能

清空session

寫在homecontroller.cs

ActionResult logout

會員登入 -> 進入index -> 資料庫資料

到此整個流程就串起來

接著做註冊帳號密碼

這裡多載用的是複雜繫結

首先先判斷驗證是否通過(modelstate.isvalid)

必須要用linq寫驗證是否重複

沒重複就寫入複雜繫結的物件

如果有重複則回傳錯誤訊息

接著新增註冊view

用帶model範本的view比較簡單因為用的是複雜繫結

砍掉一些不用的改掉一些要改得即可

###註冊帳號完成

###08ShoppingCar/Views/Home/Register.cshtml

###08ShoppingCar/Controllers/HomeController.cs

###老師步驟

###剩下兩個主功能還沒完成 購物車crud 和訂單crud

禮拜五早上會講listView

包含 列出 加入 刪除 購物車內容

tOrderDetail

#購物車頁面 列出商品get 方法

只要仿照剛剛的index action 即可 ( index 裡面為商品清單

必須要傳入meber參數 因為只能看到自己的購物車

所以要用linq下查詢指傳回特定值

但因為剛剛Member是整個集合用複雜繫結所以要做預處理

接著把購物車資料丟入ShoppingCar()的View

然後要記得指定登入狀態的layout

空範本但

Model 用 tOrderDetail

增加view因為剛剛已經指定了所以layout不用再指定一次

接著到ShoppingCar.cshtml編輯view

一樣改範本必須要修改的

然後實作delete功能 ( url 傳遞

Ferter功能 ( 下個專案會講 ( 沒登入時報錯???

##接著實作加入購物車功能

新增一個 addcar把商品id傳入

然後用session抓會員帳號

邏輯是 按一次加入購物車 商品數量就會再加1 如我沒在購物車 放入預設為1

用linq去查詢看有沒有重複如果沒有這筆商品則

把產品id 會員id 數量 價格 商品名稱 狀態 丟入 model

如果已經被加入購物車則

則購物車內的商品+1

Db.SaveChanges()

Return shooppingcar

購物車完成2/3

出現bug 找很久 session其實要寫在ferter???會更好

接著寫 刪除 ( 獨立出一個 action 搜尋的是 fid所以要傳fid近來

把要刪掉的那筆找出來

然後從模型內先刪掉

真正update到資料庫

然後再return 到 shoppingcar 這樣 購物車功能即完成

把之前的crud加到商品 就變成商品管理 但是可能就要第三個layout

###08ShoppingCar/Controllers/HomeController.cs

###08ShoppingCar/Views/Home/ShoppingCar.cshtml

###老師步驟

購物車完成但是訂單系統還沒 留到下一次

Previous2019/0524/WebApi異質程式連線方式&第九次專題報告_循序圖Next2019/0529/ASP.NET_MVC購物車訂單功能完成+BootstrapComponents元件介紹

Last updated

Was this helpful?