C50108
Search…
職訓局里程碑
2019/0528/Bootstrap Components 元件介紹 + MVC 登入驗證 + 商品加入購物車 實作

Keyword Disable Active
不止擺選單,只要不是超鏈結

<!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>
導覽
Keyword
Nav
Nav-item
Nav-tabs
Nav-pills
Flex
justify
應用jq
data-toggle

<!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">
<ul class="nav justify-content-center">
<li class="nav-item"><a href="#" class="nav-link">Item 1</a></li>
<li class="nav-item"><a href="#" class="nav-link active">Item 2</a></li>
<li class="nav-item"><a href="#" class="nav-link">Item 3</a></li>
<li class="nav-item"><a href="#" class="nav-link disabled">Item 4</a></li>
</ul>
<hr />
<ul class="nav flex-column">
<li class="nav-item"><a href="#" class="nav-link">Item 1</a></li>
<li class="nav-item"><a href="#" class="nav-link active">Item 2</a></li>
<li class="nav-item"><a href="#" class="nav-link">Item 3</a></li>
<li class="nav-item"><a href="#" class="nav-link disabled">Item 4</a></li>
</ul>
<hr />
<ul class="nav nav-tabs nav-fill">
<li class="nav-item"><a href="#" class="nav-link">Item 1</a></li>
<li class="nav-item"><a href="#" class="nav-link active">Item 2</a></li>
<li class="nav-item"><a href="#" class="nav-link">Item 3</a></li>
<li class="nav-item"><a href="#" class="nav-link disabled">Item 4</a></li>
</ul>
<hr />
<ul class="nav nav-pills">
<li class="nav-item"><a href="#" class="nav-link">Item 1</a></li>
<li class="nav-item"><a href="#" class="nav-link active">Item 2</a></li>
<li class="nav-item"><a href="#" class="nav-link">Item 3</a></li>
<li class="nav-item"><a href="#" class="nav-link disabled">Item 4</a></li>
</ul>
<hr />
<hr />
<ul class="nav nav-tabs nav-fill">
<li class="nav-item"><a href="#item1" class="nav-link active" data-toggle="tab">Item 1</a></li>
<li class="nav-item"><a href="#item2" class="nav-link" data-toggle="tab">Item 2</a></li>
<li class="nav-item"><a href="#item3" class="nav-link" data-toggle="tab">Item 3</a></li>
<li class="nav-item"><a href="#item4" class="nav-link disabled" data-toggle="tab">Item 4</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active fade show" id="item1">
<h2>Item 1</h2>
<p>
mbitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
</p>
</div>
<div class="tab-pane fade" id="item2">
<h2>Item 2</h2>
<p>
mbitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
</p>
</div>
<div class="tab-pane fade" id="item3">
<h2>Item 3</h2>
<p>
mbitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
</p>
</div>
</div>
<hr />
<hr />
<div class="row">
<div class="col-sm-3">
<ul class="nav nav-pills flex-column">
<li class="nav-item"><a href="#item11" class="nav-link active" data-toggle="pill">Item 1</a></li>
<li class="nav-item"><a href="#item22" class="nav-link" data-toggle="pill">Item 2</a></li>
<li class="nav-item"><a href="#item33" class="nav-link" data-toggle="pill">Item 3</a></li>
<li class="nav-item"><a href="#item44" class="nav-link disabled" data-toggle="pill">Item 4</a></li>
</ul>
</div>
<div class="col-sm-9">
<div class="tab-content">
<div class="tab-pane active fade show" id="item11">
<h2>Item 1</h2>
<p>
mbitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
</p>
</div>
<div class="tab-pane fade" id="item22">
<h2>Item 2</h2>
<p>
mbitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
</p>
</div>
<div class="tab-pane fade" id="item33">
<h2>Item 3</h2>
<p>
mbitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
</p>
</div>
</div>
</div>
</div>
</div>
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="Scripts/bootstrap.bundle.min.js"></script>
</body>
</html>

Html5 nav 導覽列 SEO 語意化
調一般的置中 輔助類別 ( justify-content-center …

<!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="nav">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</div>
<nav class="nav">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#">
&laquo;
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#"> &raquo;</a></li>
</ul>
</nav>
<nav class="nav justify-content-center">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#">
&laquo;
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#"> &raquo;</a></li>
</ul>
</nav>
</div>
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="Scripts/bootstrap.bundle.min.js"></script>
</body>
</html>

MVC 分頁較麻煩像是進階的購物車 ( 1.JQ 2.NUGET套件
Webform分頁簡單 ( 因為狀態會保留住

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

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="27GridView_Pagination.aspx.cs" Inherits="_27GridView_Pagination" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<style>
#GridView1 > tbody > tr:first-child{
background-color:#ce0059;
color:white;
}
#GridView1 > tbody > tr:last-child{
background-color:#ffffff;
color:cadetblue;
}
.PageActive{
background-color:#ce0059;
color:white;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MySystemConnectionString %>" SelectCommand="SELECT * FROM [Products2]"></asp:SqlDataSource>
<asp:GridView CssClass="table table-danger" ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False" DataKeyNames="Product_ID" DataSourceID="SqlDataSource1" PageSize="1">
<Columns>
<asp:BoundField DataField="Product_ID" HeaderText="Product_ID" ReadOnly="True" SortExpression="Product_ID" />
<asp:BoundField DataField="Product_Name" HeaderText="Product_Name" SortExpression="Product_Name" />
<asp:BoundField DataField="Product_Img" HeaderText="Product_Img" SortExpression="Product_Img" />
<asp:BoundField DataField="Product_Price" HeaderText="Product_Price" SortExpression="Product_Price" />
<asp:BoundField DataField="Product_price2" HeaderText="Product_price2" SortExpression="Product_price2" />
<asp:BoundField DataField="Product_Intro" HeaderText="Product_Intro" SortExpression="Product_Intro" />
<asp:CheckBoxField DataField="Product_Status" HeaderText="Product_Status" SortExpression="Product_Status" />
</Columns>
</asp:GridView>
</div>
</form>
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="Scripts/bootstrap.bundle.min.js"></script>
<script>
$('#GridView1 > tbody > tr:last-child>td>table').addClass('nav justify-content-center');
$('#GridView1 > tbody > tr:last-child>td>table td').addClass('page-item');
$('#GridView1 > tbody > tr:last-child>td>table td>a').addClass('page-link');
$('#GridView1 > tbody > tr:last-child>td>table td>span').addClass('page-link PageActive');
</script>
</body>
</html>

Keyword
Progress-bar
Progress-bar-striped
progress-bar-animated
但長度就要利用css style 表達
很多keyword … 很多樣式動畫

<!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="progress">
<div class="progress-bar" style="width:25%"></div>
</div>
<hr />
<div class="progress">
<div class="progress-bar" style="width:45%">45%</div>
</div>
<hr />
<div class="progress">
<div class="progress-bar bg-success" style="width:45%">45%</div>
</div>
<hr />
<div class="progress">
<div class="progress-bar bg-warning" style="width:45%">45%</div>
</div>
<hr />
<div class="progress">
<div class="progress-bar bg-danger" style="width:40%">40%</div>
<div class="progress-bar bg-warning" style="width:35%">35%</div>
<div class="progress-bar bg-success" style="width:25%">25%</div>
</div>
<hr />
<div class="progress">
<div class="progress-bar bg-success progress-bar-striped" style="width:45%">45%</div>
</div>
<hr />
<div class="progress">
<div class="progress-bar bg-warning progress-bar-striped" style="width:45%">45%</div>
</div>
<hr />
<div class="progress" id="myProgress">
<div class="progress-bar bg-danger progress-bar-striped" style="width:45%">45%</div>
</div>
<input id="Button1" type="button" value="button" />
<hr />
<div class="progress" id="myProgress2">
<div class="progress-bar bg-danger progress-bar-striped"></div>
</div>
</div>
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="Scripts/bootstrap.bundle.min.js"></script>
<script>
$('#Button1').click(function () {
$('#myProgress>div').addClass('progress-bar-animated')
});
var a= 0;
function timer() {
a += 2;
$('#myProgress2>div').text(a + '% Complete');
$('#myProgress2>div').css({'width':a+'%'});
if (a < 100)
setTimeout("timer()",200);
}
timer();
</script>
</body>
</html>

還在執行 旋轉的樣式 ( 功能都必須寫javascript
Ajax json requses and reghsad time
Keyword
spinner-border
text-danger/warning
spinner-grow

<!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="spinner-border">
</div>
<div class="spinner-border text-danger">
</div>
<div class="spinner-border text-warning">
</div>
<hr />
<div class="spinner-grow text-danger">
</div>
<div class="spinner-grow text-warning">
</div>
<hr />
<div class="d-flex align-items-center">
<strong>Loading....</strong>
<div class="spinner-grow text-danger ml-auto">
</div>
</div>
<hr />
<button class="btn btn-success btn-lg" id="mybtn">
Submit
</button>
</div>
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="Scripts/bootstrap.bundle.min.js"></script>
<script>
$('#mybtn').click(function () {
$(this).addClass('disabled');
//$('#mybtn span')
$(this).html('<span class="spinner-border"></span>Loading....');
setTimeout("test()", 3000);
});
function test() {
$('#mybtn').text('Submit');
$('#mybtn').removeClass('disabled');
}
</script>
</body>
</html>

( 單元劇結束 下一次會講一整個MVC專案 ( 留言板 IG
(資料庫端應用程式端其實都可以寫
ViewModel要去再看一下功能定義
4張表就是4個class
顯示using System.ComponentModel; 驗證using System.ComponentModel.DataAnnotations;

大部分組別 購物車table
但其實可以訂單明細就是購物車只要一個欄位去做判別 是訂單還是購物車
(但大部分都是用在登入後
沒有要做商品管理(上下架(所以不驗證商品表單

//------------------------------------------------------------------------------
// <auto-generated>
// 這個程式碼是由範本產生。
//
// 對這個檔案進行手動變更可能導致您的應用程式產生未預期的行為。
// 如果重新產生程式碼,將會覆寫對這個檔案的手動變更。
// </auto-generated>
//------------------------------------------------------------------------------
namespace _08ShoppingCar.Models
{
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
public partial class tMember
{
public int fId { get; set; }
[DisplayName("帳號")]
[Required]
public string fUserId { get; set; }
[DisplayName("密碼")]
[Required]
public string fPwd { get; set; }
[DisplayName("姓名")]
[Required]
public string fName { get; set; }
[DisplayName("信箱")]
[Required]
[EmailAddress]
public string fEmail { get; set; }
}
}

Using 剛剛做好的model
New一個資料庫物件出來
接著把tProduct表放進變數products
資料庫的資料先讀到index去
但沒有那麼簡單
必須要有登入與非登入的layout 用來存session

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

@model IEnumerable 泛型
[.NET]快快樂樂學LINQ系列前哨戰-IEnumerable, IEnumerator, yield, Iterator | In 91 - 點部落
In 91
手刻bootstrap版
手刻 加入購物車的按鈕

加入購物車的按鈕傳入當筆id藉由url傳遞到 action
接著必須判斷session才會出現 加入購物車的按鈕
接著回到Controller寫利用session判斷index的_layout

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
//01-1-3 using _08ShoppingCar.Models
using _08ShoppingCar.Models;
namespace _08ShoppingCar.Controllers
{
public class HomeController : Controller
{
//01-1-4 使用Entity建立DB物件
dbShoppingCarEntities db = new dbShoppingCarEntities();
//01-2-1 在HomeController裡撰寫Index Action
public ActionResult Index()
{
var products = db.tProduct.ToList();
//若Session["Member"]為空,表示會員未登入
if (Session["Member"] == null)
{
//指定Index.cshtml套用_Layout.cshtml,View使用products模型
return View("Index","_Layout",products);
}
//會員登入狀態,指定Index.cshtml套用_LayoutMember.cshtml,View使用products模型
return View("Index", "_LayoutMember", products);
}
}
}

@*//01-2-4 撰寫Index View,讀出資料,並以Bootstrap排版*@
@model IEnumerable<_08ShoppingCar.Models.tProduct>
@{
ViewBag.Title = "產品列表";
}
<div class="row">
@foreach (var item in Model)
{
<div class="col-md-4">
<div class="thumbnail">
<img src="~/images/@item.fImg" />
<div class="caption">
<h2>@item.fName</h2>
<p>單價:@item.fPrice</p>
@if (Session["Member"] == null)
{
<p></p>
}
else
{
@*若Session["Member"]不為null才顯示此按鈕*@
<p><a href="@Url.Action("AddCar")[email protected]" class="btn btn-danger">加入購物車</a></p>
}
</div>
</div>
</div>
}
</div>

//00-1 利用Entity Framework建立Model(DB First)
//00-1-1 建立dbShoppingCar.mdb資料庫Model
// 在Models上按右鍵,選擇加入,新增項目,資料,ADO.NET實體資料模型,名稱輸入"dbShoppingCarModel",按新增
// 來自資料庫的EF Designer
// 連接dbShoppingCar.mdf資料庫,連線名稱不修改,按下一步按鈕
// 選擇Entity Framework 6.x, 按下一步按鈕
// 資料表全選, 按完成鈕
// 若跳出詢問方法按確定鈕
//00-1-2 在專案上按右鍵,建置
//00-2 修改Model
//00-2-1 在tMember.cs裡加入欄位名稱顯示(需using System.ComponentModel)與欄位驗證(需using System.ComponentModel.DataAnnotations)
//00-2-2 在tProduct.cs裡加入欄位名稱顯示(需using System.ComponentModel)
//00-2-3 在tOrder.cs裡加入欄位名稱顯示(需using System.ComponentModel)與欄位驗證(需using System.ComponentModel.DataAnnotations)
//00-2-4 在tOrderDetail.cs裡加入欄位名稱顯示(需using System.ComponentModel)
//01-1 建立HomeController
//01-1-1 在Controllers資料夾上按右鍵,加入,控制器,選擇 MVC5Controller-Empty
//01-1-2 指定控制器名稱為HomeController,並開啟HomeController
//01-1-3 using _08ShoppingCar.Models
//01-1-4 使用Entity建立DB物件
//01-2 製作Index頁面的顯示所有產品功能
//01-2-1 在HomeController裡撰寫Index Action
//01-2-2 在public ActionResult Index()上按右鍵,新增檢視,建立Index View
//01-2-3 進行下列設定:
// View name:Index
// Template:Empty(Without Model)
// 勾選Use a layout pages
// 按下Add
//01-2-4 撰寫Index View,讀出資料,並以Bootstrap排版

還有要改漢堡選單
一樣用helper html.actionlink
三版bootstrap用法
然後突然教了轉google搜尋引擎
接著在Shared新增一個新的layout
兩種view大家都可以用它? 一種是Layout
pasharedview ?? 下一個專案會告訴大家
接著做登入過後的 layout
漢堡選單內改為 登入過後的功能
然後稍微改了些bootstrap

<!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-default 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>
@*//02-2-5 修改Brand*@
@Html.ActionLink("線上購物車-會員專區", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
@*@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })*@
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("產品列表", "Index", "Home")</li>
<li>@Html.ActionLink("購物車", "ShoppingCar", "Home")</li>
<li>@Html.ActionLink("訂單", "OrderList", "Home")</li>
<li>@Html.ActionLink("登出系統", "Logout", "Home")</li>
<li><a href="#">@Session["WelCome"]</a></li>
</ul>
<form class="form-inline" action="https://www.google.com/search" method="get">
<div class="navbar-form">
<input id="Text1" type="text" name="q" placeholder="Please Input Something..." />
<input id="Submit1" type="submit" value="Search" class="btn btn-success" />
</div>
</form>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>&copy; @DateTime.Now.Year - 高屏澎東分署購物商城</p>
</footer>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>

用simple bind就好因為只有帳號密碼
用linq lmada 寫查詢 查到就塞到變數 如果沒查到就不會塞
用viewbag傳帳號或密碼錯誤訊息到前端
如果驗證成功則 session帶入資料
且return redirecttoaction index

這裡有示範bind 但不知道是簡單還複雜
通過例項模擬ASP.NET MVC的Model繫結機制:簡單型別+複雜型別 - IT閱讀
&錯誤訊息產生的方式
到此登入驗證帶session功能完成

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
//01-1-3 using _08ShoppingCar.Models
using _08ShoppingCar.Models;
namespace _08ShoppingCar.Controllers
{
public class HomeController : Controller
{
//01-1-4 使用Entity建立DB物件
dbShoppingCarEntities db = new dbShoppingCarEntities();
//01-2-1 在HomeController裡撰寫Index Action
public ActionResult Index()
{
var products = db.tProduct.ToList();
//若Session["Member"]為空,表示會員未登入
if (Session["Member"] == null)
{
//指定Index.cshtml套用_Layout.cshtml,View使用products模型
return View("Index","_Layout",products);
}
//會員登入狀態,指定Index.cshtml套用_LayoutMember.cshtml,View使用products模型
return View("Index", "_LayoutMember", products);
}
//03-1-1 在HomeController裡分別撰寫Get與Post Login Action
public ActionResult Login()
{
return View();
}
//03-1-1 在HomeController裡分別撰寫Get與Post Login Action
[HttpPost]
public ActionResult Login(string fUserId, string fPwd)
{
var member = db.tMember.Where(m => m.fUserId == fUserId && m.fPwd == fPwd).FirstOrDefault();
if(member==null)
{
ViewBag.Message = "帳號或密碼錯誤!!";
return View();
}
Session["WelCome"] = member.fName + "真正高興地見到你!";
Session["Member"] = member;
return RedirectToAction("Index");
}
}
}

@*//03-1-4 撰寫Login View*@
@{
ViewBag.Title = "會員登入";
}
<h2>會員登入</h2>
<form accept-charset="@Url.Action("Login")" method="post">
<div class="form-horizontal">
<hr />
<div class="form-group">
<label for="fUserId" class="control-label col-md-2">帳號</label>
<div class="col-md-10">
<input id="fUserId" name="fUserId" type="text" class="form-control" required />
</div>
</div>
<div class="form-group">
<label for="fPwd" class="control-label col-md-2">密碼</label>
<div class="col-md-10">
<input id="fPwd" name="fPwd" type="password" class="form-control" required />
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-md-offset-2">
<input id="Submit1" type="submit" value="登入" class="btn btn-default" />
<div class="alert-danger">@ViewBag.Message</div>
</div>
</div>
</div>
</form>

//00-1 利用Entity Framework建立Model(DB First)
//00-1-1 建立dbShoppingCar.mdb資料庫Model
// 在Models上按右鍵,選擇加入,新增項目,資料,ADO.NET實體資料模型,名稱輸入"dbShoppingCarModel",按新增
// 來自資料庫的EF Designer
// 連接dbShoppingCar.mdf資料庫,連線名稱不修改,按下一步按鈕
// 選擇Entity Framework 6.x, 按下一步按鈕
// 資料表全選, 按完成鈕
// 若跳出詢問方法按確定鈕
//00-1-2 在專案上按右鍵,建置
//00-2 修改Model
//00-2-1 在tMember.cs裡加入欄位名稱顯示(需using System.ComponentModel)與欄位驗證(需using System.ComponentModel.DataAnnotations)
//00-2-2 在tProduct.cs裡加入欄位名稱顯示(需using System.ComponentModel)
//00-2-3 在tOrder.cs裡加入欄位名稱顯示(需using System.ComponentModel)與欄位驗證(需using System.ComponentModel.DataAnnotations)
//00-2-4 在tOrderDetail.cs裡加入欄位名稱顯示(需using System.ComponentModel)
//01-1 建立HomeController
//01-1-1 在Controllers資料夾上按右鍵,加入,控制器,選擇 MVC5Controller-Empty
//01-1-2 指定控制器名稱為HomeController,並開啟HomeController
//01-1-3 using _08ShoppingCar.Models
//01-1-4 使用Entity建立DB物件
//01-2 製作Index頁面的顯示所有產品功能
//01-2-1 在HomeController裡撰寫Index Action
//01-2-2 在public ActionResult Index()上按右鍵,新增檢視,建立Index View
//01-2-3 進行下列設定:
// View name:Index
// Template:Empty(Without Model)
// 勾選Use a layout pages
// 按下Add
//01-2-4 撰寫Index View,讀出資料,並以Bootstrap排版
//02-1 修改Layout
//02-1-1 修改Views/Shared/_Layout.cshtml
//02-1-2 更改標頭與頁尾
//02-1-3 修改Brand
//02-1-4 加入選單
//02-2 建立Layout
//02-2-1 在View/Shared上按右鍵,新增檢視
//02-2-2 進行下列設定:
// View name:_LayoutMember.cshtml
// Template:Empty(Without Model)
// 不勾選Use a layout pages
// 按下Add
//02-2-3 將_Layout.cshtml內容複製至_LayoutMember.cshtml
//02-2-4 修改_LayoutMember.cshtml nav class內容
//02-2-5 修改Brand
//02-2-6 修改_LayoutMember.cshtml選單內容
//03-1 撰寫登入功能
//03-1-1 在HomeController裡分別撰寫Get與Post Login Action
//03-1-2 在public ActionResult Login()上按右鍵,新增檢視,建立Login View
//03-1-3 進行下列設定:
// View name:Login
// Template:Empty(Without Model)
// 勾選Use a layout pages
// 按下Add
//03-1-4 撰寫Login View

清空session
寫在homecontroller.cs
ActionResult logout
會員登入 -> 進入index -> 資料庫資料

這裡多載用的是複雜繫結
首先先判斷驗證是否通過(modelstate.isvalid)
必須要用linq寫驗證是否重複
沒重複就寫入複雜繫結的物件
如果有重複則回傳錯誤訊息
接著新增註冊view
用帶model範本的view比較簡單因為用的是複雜繫結
砍掉一些不用的改掉一些要改得即可

@model _08ShoppingCar.Models.tMember
@{
ViewBag.Title = "會員註冊";
}
<h2>會員註冊</h2>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.fUserId, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.fUserId, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.fUserId, "", new { @class = "text-danger" })
<span class="text-danger">@ViewBag.Message</span>
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.fPwd, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.fPwd, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.fPwd, "", 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.fEmail, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.fEmail, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.fEmail, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="註冊" class="btn btn-default" />
</div>
</div>
</div>
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
//01-1-3 using _08ShoppingCar.Models
using _08ShoppingCar.Models;
namespace _08ShoppingCar.Controllers
{
public class HomeController : Controller
{
//01-1-4 使用Entity建立DB物件
dbShoppingCarEntities db = new dbShoppingCarEntities();
//01-2-1 在HomeController裡撰寫Index Action
public ActionResult Index()
{
var products = db.tProduct.ToList();
//若Session["Member"]為空,表示會員未登入
if (Session["Member"] == null)
{
//指定Index.cshtml套用_Layout.cshtml,View使用products模型
return View("Index","_Layout",products);
}
//會員登入狀態,指定Index.cshtml套用_LayoutMember.cshtml,View使用products模型
return View("Index", "_LayoutMember", products);
}
//03-1-1 在HomeController裡分別撰寫Get與Post Login Action
public ActionResult Login()
{
return View();
}
//03-1-1 在HomeController裡分別撰寫Get與Post Login Action
[HttpPost]
public ActionResult Login(string fUserId, string fPwd)
{
var member = db.tMember.Where(m => m.fUserId == fUserId && m.fPwd == fPwd).FirstOrDefault();
if(member==null)
{
ViewBag.Message = "帳號或密碼錯誤!!";
return View();
}
Session["WelCome"] = member.fName + "真正高興地見到你!";
Session["Member"] = member;
return RedirectToAction("Index");
}
public ActionResult Logout()
{
Session.Clear();
return RedirectToAction("Index");
}
public ActionResult Register()
{
return View();
}
[HttpPost]
public ActionResult Register(tMember Member)
{
if (ModelState.IsValid == false)
{
return View();
}
var member = db.tMember.Where(m => m.fUserId == Member.fUserId).FirstOrDefault();
if(member==null)
{
db.tMember.Add(Member);
db.SaveChanges();
return RedirectToAction("Login");
}