1. Trang chủ
  2. » Công Nghệ Thông Tin

Hướng dẫn tự làm trang bán hàng bằng ASP.NET MVC

15 90 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang 15
Dung lượng 682,32 KB

Các công cụ chuyển đổi và chỉnh sửa cho tài liệu này

Nội dung

CÁCH HIỂN THỊ TỪ CONTROLLER SANG VIEW •Tại @RenderBody(): tại đây dùng để hiển thị các bộ điều khiển của ta ra, có nghĩa là hiển thị nội dung mà bạn muốn, ví dụ bạn muốn fix header và footer cố định trang cho mỗi giao diện của website @RenderBody thì nó sẽ render cái nội dung của trang con ra ngoài trang layout dùng chung VD: @ViewBag.Title @RenderBody() •File ViewStart _ViewStart.cshtml: dùng để định nghĩa layout cho cả website, bạn có thể thiết lập tùy biến sài layout cũng được, giống như Admin thì sài layout này, còn user thì thì sai layout kia. _ViewStart.cshtml: dùng để định nghĩa layout cho cả website, bạn có thể thiết lập tùy biến sài layout cũng được, giống như Admin thì sài layout này, còn user thì thì sai layout kia. VD: @{ string CurrentName = Convert.ToString(HttpContext.Current.Request.RequestContext.RouteData.Values["Controller"]); string clayout = ""; switch (CurrentName) { case "Home": clayout = "~/Views/Shared/_LayoutHome.cshtml"; break; default: //Admin layout clayout = "~/Views/Shared/_LayoutAdmin.cshtml"; break; } Layout = clayout; } •Chúng ta thiết lập ViewBag.title dùng để chèn một chuổi dữ liệu hay một mảng dữ liệu mà ta muốn nó được hiện thị ngoài View, bạn có thể kết hợp với LingQ nhé, bạn có thể xem ví dụ dưới đây //HomeController.cs var data = (from s in _db.users select s).ToList(); View.Bag = data; return View() //Views/Home/Index.cshtml @foreach(var result in ViewBag.data){ @result.name @result.created_at }

Trang 1

CÁCH HIỂN THỊ TỪ CONTROLLER SANG VIEW

Tại @RenderBody(): tại đây dùng để hiển thị các bộ điều khiển của ta ra, có nghĩa là

hiển thị nội dung mà bạn muốn, ví dụ bạn muốn fix header và footer cố định trang cho mỗi giao diện của website

@RenderBody thì nó sẽ render cái nội dung của trang con ra ngoài trang layout dùng chung

VD:

<html

>

<hea

d>

<metaname="viewport"content="width=device-width"/

>

<title>@ViewBag.Title</title>

</head

>

<body

>

<divclass="header">

<! code header fixed >

</div>

<div>

@RenderBody()

</div>

<divclass="footer">

<! code footer fixed >

</div>

</body>

</html

>

thiết lập tùy biến sài layout cũng được, giống như Admin thì sài layout này, còn user thì

thì sai layout kia _ViewStart.cshtml: dùng để định nghĩa layout cho cả website, bạn có

thể thiết lập tùy biến sài layout cũng được, giống như Admin thì sài layout này, còn user thì thì sai layout kia

VD:

@{

stringCurrentName =

Convert.ToString(HttpContext.Current.Request.RequestContext.RouteData.Values["Contr oller"]);

stringclayout = "";

switch(CurrentName)

{

Trang 2

case"Home":

clayout = "~/Views/Shared/_LayoutHome.cshtml";

break;

default:

//Admin layout

clayout = "~/Views/Shared/_LayoutAdmin.cshtml";

break;

}

Layout = clayout;

}

Chúng ta thiết lập ViewBag.title dùng để chèn một chuổi dữ liệu hay một mảng dữ liệu

mà ta muốn nó được hiện thị ngoài View, bạn có thể kết hợp với LingQ nhé, bạn có thể xem ví dụ dưới đây

//HomeController.cs

var data = (from s in_db.users select s).ToList();

View.Bag = data;

returnView()

//Views/Home/Index.cshtml

@foreach(var result inViewBag.data){

<span>@result.name</span>

<span>@result.created_at</span

>

}

CÁC KIỂU TRUY VẤN ĐẾN ĐỐI TƯỢNG TRONG DB

- Dùng câu lệnh truy vấn 1 LIST :

Namespace WebsiteBanHang.Controllers{

Public class HomeController : Controller {

QuanLyBanHangEntities db = new QuanLyBanHangEntities ();

Public ActionResult Index()

{

// Truy vấn lấy dữ liệu alf 1 danh sách KhachHang

// Cách 1: Dùng câu lệnh truy vấn

Var lstKH = from kh in db.KhachHangs select kh;

Return View(lstKH);

Trang 3

// Cách 2: Dùng phương thức hỗ trợ sẵn truy vấn

Var lstKH = db.KhachHangs.ToList();

Return View(lstKH);

} }

}

GIỎ HÀNG, MÃ KH,… LÀ DUY NHẤT) :

Namespace WebsiteBanHang.Controllers{

Public class HomeController : Controller {

QuanLyBanHangEntities db = new QuanLyBanHangEntities ();

Public ActionResult Index()

{

// Truy vấn lấy dữ liệu là 1 đối tượng KhachHang KHÔNG có điều kiện Where

// Cách 1: Dùng câu lệnh truy vấn

Var lstKH = from kh in db.KhachHangs select kh;

KhachHang khang = lstKH.FirstOrDefault< KhachHang >();

// Kiểu là nó sẽ lấy con đầu tiên của list, lấy con ở vị trí đầu tiên

Return View(lstKH);

// Cách 2: Dùng phương thức hỗ trợ sẵn truy vấn

KhachHang khang = db.KhachHangs.Single();

Return View();

// Truy vấn lấy dữ liệu là 1 đối tượng KhachHang có điều kiện Where

// Cách 1: Dùng câu lệnh truy vấn

Var lstKH = from kh in db.KhachHangs where kh.MaKH==1 select

kh;

KhachHang khang = lstKH.FirstOrDefault< KhachHang >();

// Kiểu là nó sẽ lấy con đầu tiên của list, lấy con ở vị trí đầu tiên

Return View(lstKH);

// Cách 2: Dùng phương thức hỗ trợ sẵn truy vấn

KhachHang khang = db.KhachHangs.SingleOrDefault(n=>n.MaKH==2);

Return View(khang);

public ActionResult TruyVan1DoiTuong() {

//Cách 1 truy vấn 1 đối tượng bằng caua lệnh truy vấn

//Bước 1 lấy ra danh sách khách hàng

Trang 4

var lstKH = from kh in db.KhachHang where kh.MaKH == 2 select kh;

//Bước 2 láy đối tượng khách hàng dựa trên phương thức

hỗ trợ

KhachHang khang = db.KhachHang.SingleOrDefault(n=>n.MaKH==2);

return View(khang);

} // Truy vấn lấy dữ liệu là 1 đối tượng KhachHang được sắp xếp theo tên dùng phương thức

public ActionResult SortDuLieu() {

//Phương thức sắp xếp dữ liệu tăng dần

List<KhachHang> lstKH = db.KhachHang.OrderBy(n

=> n.TenKH).ToList();

return View(lstKH);

} public ActionResult SortDuLieu2() {

//Phương thức sắp xếp dữ liệu giảm dần

List<KhachHang> lstKH = db.KhachHang.OrderByDescending(n => n.TenKH).ToList(); return View(lstKH);

} } }

}

// Truy vấn lấy dữ liệu là GROUP Dữ liệu trên VIEW

- Ở trong Bảng thành viên thì là sẽ các thành viên sử dụng hẹ thống phải đăng kí lúc đó sẽ có

mã loại thành viên link với kiểu loại thành vine vip hay là thường từ đó có thể chia ra đó là thành viên oke hay bth thì kiểu group qua VIEW ko qua controller

public ActionResult GroupDulieutrenview() {

List<ThanhVien> lstKH = db.ThanhVien.OrderByDescending(n =>

n.TaiKhoan).ToList();

return View(lstKH);

} // Này là tạo ra một list để lấy tất cả các thành viên có trong bảnh thành viên í (bài này ko dùng bảng khách hàng ở trên) đó xong sau khi lấy xog hêt thành viên trong bảng thành viên thì thực hiện đẩy qua view

@using Realstore.Models;

@model List<ThanhVien>

@{

Trang 5

Layout = null; ViewBag.title = "GroupDulieu"; }

@foreach(var GroupLTV in Model.GroupBy(n=> n.MaLoaiTV)) {

<div>@GroupLTV.Key</div>

foreach(var item in GroupLTV) {

<p>@item.TaiKhoan</p>

} } // Code này có gì code này sẽ lấy hàng từ controller đẩy lên và thực hiện vòng lặp foreach

và thực hiện query, tạo 1 biến GROUPLTV từ trong đó và nhận giá trị mã loại

// <div>@GroupLTV.Key</div> thì nó sẽ thực hiện in ra cái mã loại thành viên ‘’Key’’ ở đây tương ứng với Mã Loại thành viên (1 hoặc 2) // sau đó nó lại thực hiện, sau khi biết đc thanh viên loại nào, nó tiếp tục query xem loại tv đó có những ai và thực hiện tạo 1 biến item để moi trong cái bảng lúc nãy lấy hết giá trị của nó

// Nó sẽ moi Loại thành viên 2 trc xong đó hết vòng, check lại xem còn loại tv nào ko rồi tiếp tục moi ai là người trong loai tv đó

- Http GET thì là hàm trả lại view, còn Post thì hàm xử lý chức năng nên là cái nào ra cái đấy nếu xử lý chức năng thì dùng post ko thì người dùng sẽ GET tự vào qua link

Trả giá trị thông qua viewbag:

- IEnumerable<SanPham> lstHDX = (IEnumerable<SanPham>)ViewBag.ListHDX;

- IEnumerable<SanPham> lstHTD = ViewBag.ListHTD as IEnumerable<SanPham>;

 kiểu này thì giá trị trả về nó sẽ trả về là null nếu ko có còn ở trên ko có thì sẽ bão lỗi

- @foreach (var item in Model.Take(3)){} – dùng vòng lặp lấy 3 sản phẩm

- Giả sử ở trong thông tin ở DB cần xuất ra chưa ký tự html thì chuyển ntn ?;

 @Html.Raw(item.cauhinh)

- Ví dụ có 1 tên loại sản phẩm ở 1 bảng khác thì mà mình lại đang gọi 1 bảng khác thì chúng ta sử dụng cú pháp như sau

 <h1>@Model.First().LoaiSanPham.TenLoai - Mới Nhất !</h1> ơ khác bảng vẫn được

à ?à ko tới cái bảng có cái tên mình cần truy vấn rồi cái trường tên đó ra là đk Chèn link vô dùng cú pháp @Url.Action("Index","Home") với index là file chuyển đến home là controoler chứ file gửi

Cách lấy sản phẩm từ 1 bảng tới 1 bảng khác (kiểu lấy chuyền)

Trang 6

 Bước 1 tách menu ra 1 view riêng rồi ghép qua cú pháp @html.Action(“tên file partial”,”tên controller chứa file đó”)

 Bước 2

<div class=" h_menu4">

<ul class="memenu skyblue">

<li class="active grid"><a class="color8" href="@Url.Action("Index","Home")">Trang Chủ</a></li>

@foreach (var groupItem in Model.GroupBy(n => n.LoaiSanPham)) // kiểu như là nó gom loại

có bao nhiêu sản phẩm có loại sản phẩm đó rồi trả lại tên loại sản phẩm, nếu mà ko thì nó lại trả lại cùng nhiều loại sản phẩm

// như kiểu là lọc trùng á, xong gom lại ra số loại sản phẩm thông qua sản phẩms

{

if (groupItem.Key != null) // kiểm tra xem sản phẩm nào có thuộc tính loại sản phẩm rồi thì lấy(ktra thông qua tk loại sản phẩm)

// khi mà group theo cái nào thì cái đó là key

{

<li>

<a class="color1" href="#">@groupItem.Key.TenLoai</a>

<div class="mepanel">

<div class="row">

<div class="col1">

<div class="h_nav">

<ul>

<li><a href="products.html">Accessories</a></li>

<li><a href="products.html">Bags</a></li>

<li><a href="products.html">Caps & Hats</a></li>

<li><a href="products.html">Hoodies & Sweatshirts</a></li>

<li><a href="products.html">Jackets & Coats</a></li>

<li><a href="products.html">Jeans</a></li>

<li><a href="products.html">Jewellery</a></li>

<li><a href="products.html">Jumpers & Cardigans</a></li>

<li><a href="products.html">Leather Jackets</a></li>

<li><a href="products.html">Long Sleeve T-Shirts</a></li>

<li><a href="products.html">Loungewear</a></li>

</ul>

</div>

</div>

</div>

</div>

</li>

}

}

Nghĩa là trong cái bảng ấy thì mình dùng ….Key.”thuộc tính trong cái bảng đó để truy vấn trong bảng” còn để mà nối 1 bảng khác thì

….GroupBy(n=>n.’Tên bảng’) và trong cái vòng foreach đó thì gọi thuộc tính ra lại dùng Key

- Khi khai báo thấy tham số có dạng:

( int? id )  thì hiểu khai báo 1 biến tên id có kiểu int, dấu ? là int có thể 32bit hoặc 64bit

Trang 7

// Kiểm tra tham số truyền vào có rỗng hay không

if (id == null)

{

returnnew HttpStatusCodeResult(System.Net.HttpStatusCode.BadRequest);

}

// nếu không thì truy xuất csdl lấy ra sản phẩm tương ứng

SanPham sp = db.SanPham.SingleOrDefault(n => n.MaSP == id && n.DaXoa == false);

if( sp == null)

{

//Thong báo nếu như không có sản phẩm đó

return HttpNotFound();

}

- Khi làm trang chi tiết nên chú ý:

Khi Trả về 1 sản phẩm:

@using AuthStore.Models;

@model SanPham

Khi trả về 1 list sản phẩm

@using AuthStore.Models;

@model IEnumerable<SanPham>

@*nếu mà trả về 1 list các sản phẩm thì dùng kiểu irenumerable còn ko thì để nguyên 1 cái sanpham thôi*@

Làm việc với ROUTECONFIG.cs

Tạo route mới thì nên bỏ trên default để tránh lỗi

1 Cấu Hình đường dẫn không có tham số:

Ví dụ: routes.Map.Route(

Name:”test”, // đây là tên của route url:”test”, // còn đây là url nó sẽ hiển thị lên defaults: new { Controller = “testcontroller”, action=”testAction”, id = UrlParameter.Optional} // còn đây là cái controller và action nó sẽ chạy

);

Tại các view ta muốn tạo link liên kết đến action ta sử dụng

Cú pháp:

@html.RouteLink(“Click vào đay để vào trang khách hàng”,”tên của route”)

2 Cấu Hình đường dẫn có tham số:

Ví dụ: routes.Map.Route(

Name:”test”, // đây là tên của route url:”{tensp}-{id}”, // còn đây là url nó sẽ hiển thị lên, và có tham số id defaults: new { Controller = “testcontroller”, action=”testAction”, id = UrlParameter.Optional} // còn đây là cái controller và action nó sẽ chạy

);

Tại các SanPhamController.cs

Cú pháp: public ActionResult ChiTietSanPham(int? id,string tensp){

If(id == null){

Return new HttpStatusCodeResult(HttpStatusCode.BadRequest);

}

SanPham sp = db.SanPhams.SingleOrDefault(n => n.MaSP == id);

Trang 8

If(sp == null){

Return HttpNotFound();

}

Return View(sp);

}

Tại các view đổ ra màn hình thì (Sửa ở view SanPham, và partial1)

Cũ: @Url.Action("XemChiTiet","SanPham", new { @id = item.MaSP})

Mới: @Url.RouteUrl("XemChiTiet", new{ @id = item.MaSP, @tensp = item.TenSP})

Khi Cập nhật thêm trường mới trong DB:

- Vào model để thêm vào !!!

- Làm trang đăng nhập đăng ký :

 [HttpGet] là để load trong db ra trước khi trang đăng ký, vd load câu hỏi ra trước

 [HttpPost] là để dạng kiểu hành động sau khi bấm nút submit

Tạo Form và nhập thông tin đăng ký vào DB

- Đầu tiên là tạo 2 cái Action trong controller Home là đăng ký theo phương thức Post hoặc Get

[HttpPost]

public ActionResult DangKy(ThanhVien tv,FormCollection f)

{

db.ThanhVien.Add(tv);

db.SaveChanges();

return View();

}

[HttpGet]

public ActionResult DangKy() {

return View();

}

- Tương ứng tạo 1 cái view từ đó ra, thẻ Form thì dùng razor cho dễ hiểu còn các thẻ trong thì dùng input cũng được

- @using (Html.BeginForm())

- {

Trang 9

- <input type="text" value="Họ tên" name="HoTen"

onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Họ tên';}"/>

- <input type="text" value="Tài khoản" name="TaiKhoan"

onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Tài khoản';}"/>

- <input type="password" placeholder="Mật khẩu" value=""

name="MatKhau" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}"/>

- <input type="password" placeholder="Nhập lại mật khẩu" value="" name="check_password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}"/>

- <input type="text" value="Email" name="Email"

onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}"/>

- <input type="text" value="Địa Chỉ" name="DiaChi"

onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Địa chỉ';}"/>

- <input type="text" value="Số điện thoại" name="SoDienThoai" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Số điện thoại';}" />

- <input type="text" value="Câu hỏi bí mật" name="CauHoi"

onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Câu hỏi bí mật';}"/>

- <input type="text" value="Câu trả lời" name="CauTraLoi"

onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Câu trả lời';}"/>

<input type="submit" value="ĐĂNG KÝ" name="btn_submit">

- <a class="back_home" href="@Url.Action("Index", "Home")">Trở về trang chủ</a>

- }

Các cái trường Name trong các cái thẻ input là phải có cái name trùng với lại các trường trong bảng của SQL, bảng thành viên tương ứng ko là sẽ ko nhận đc giá trị

Ta có controller đăng ký Nhận vào [POST] có 2 kiểu nhận vào:

- CÁCH 1: [HttpPost]

public ActionResult DangKy(ThanhVien tv)

{

db.ThanhVien.Add(tv);

db.SaveChanges();

return View();

}

- Kiểu này thì ăn xổi nó sẽ add tất cả các thuộc tính của thẻ Form vô theo đúng trong bảng db thông qua tv

- CÁCH 2: [HttpPost]

public ActionResult DangKy(formCollection f)

{

String s = f[“HovaTen”].ToString();

return View();

}

- Kiểu này thì lấy từng giá trị 1 của form rất lâu và mất thời gian, càng nhiều trường code càng dài

- Tiếp theo chúng ta sẽ cài cap cha vào form đăng ký:

+ Chuột phải vào tên project bấm Nupacket…

+ Chuyển qua mục Brower và tim captchamvc và cài MVC5

+ Xong đó bấm buid PRJ để làm mới lại prj

+ Trong cái đăng ký html thì thêm 2 cái thư viện

@using CaptchaMvc.HtmlHelpers

Trang 10

@using CaptchaMvc + Xong đó tắt prj xong đó mở lại

+ Xong đó tạo 1 cái div chứa capcha và thực hiện

- @html.Capcha(5)  nhập 5 chữ bất kỳ mà ko trùng nhau

- @html.MathCapcha()  Kiểu dạng trả lời toán học

+ Vào cái controller chưa action dăng ký thêm 2 thư viện

Trên vào để làm check kết quả capcha nhập

@using CaptchaMvc.HtmlHelpers

@using CaptchaMvc + // kiểm tra capcha hợp lệ:

If(this.IsCaptchaValid(“Captcha is not valid”)){

ViewBag.ThongBao = “Them thành công”; ko lỗi thì xuất ra cái này Return View(“”);

// ở đây phải cho thêm cái add thông tin vào // vì đây là đúng nó sẽ chạy, nên nhập đúng mã captcha // thì code trong khung này sẽ chạy

} ViewBag.ThongBao =Sai mã captcha””; // nếu mà lỗi thì xuất ra + thêm thẻ viewbag ở view để hiện thị lỗi ra:

<h1 style=”color:red”; >@ViewBag.ThongBao</h1>

- Tiếp theo chúng ta sẽ cài câu hỏi bảo mật vào form đăng ký:

- Đầu tiên tạo 1 cái list action ở controlerr có action đk

Public List<string> LoadCauHoi(){

List<string> lstCauHoi = new List<string>();

lstCauHoi.Add(“Con Vật mà bạn yêu thích”);

lstCauHoi.Add(“ca sĩ mà bạn yêu thích”);

lstCauHoi.Add(“Hiện tại bạn đang làm công việc gì”);

return lstCauHoi;

}

- Tiếp đến load câu hỏi ở 2 action đăng ký [GET] và[POST]

[HTTP-GET]

Public ActionResult DangKy(){

ViewBag.CauHoi = new SelectList(LoadCauHoi());

Return View();

}

[HTTP-POST]

public ActionResult DangKy(ThanhVien tv)

{

ViewBag.CauHoi = new SelectList(LoadCauHoi());

db.ThanhVien.Add(tv);

db.SaveChanges();

return View();

}

- Tiếp tục sang view sửa thẻ input thành dropdownlist

@html.DropDownList(“CauHoi”)

Chức năng đăng nhập trong web bán hàng:

- Đầu tiền gom con header top vào thành 1 cái partialview – HeaderTopPartial

- Xong đó tiếp tục tạo 1 cái controller là đăng nhập và kiểu trả về là

- public ActionResult DangNhap() {

- return RedirectToAction("Index");

Ngày đăng: 23/08/2021, 16:09

TỪ KHÓA LIÊN QUAN

🧩 Sản phẩm bạn có thể quan tâm

w