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

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:
>
d>
>
<title>@ViewBag.Title</title>
>
>
<div class="header">
<!--code header fixed-->
</div>
<div>
@RenderBody()
</div>
<div class="footer">
<!--code footer fixed-->
</div>
</body>

>


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["Contr
oller"]);
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ị ngồ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){
<span>@result.name</span>
<span>@result.created_at>
}

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

Các Cú Pháp để truy vấn Entity Framework:

-

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


// Cách 2: Dùng phương thức hỗ trợ sẵn truy vấn
Var lstKH = db.KhachHangs.ToList();
Return View(lstKH);
}
}

-

}

Dùng câu lệnh truy vấn 1 ĐỐI TƯỢNG (THƯỜNG DÙNG LÀM LOGIN, LOGOUT,

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


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
Ở trong Controller thực hiện :
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

-

Ở trong View thực hiện :
@using Realstore.Models;
@model List<ThanhVien>
@{


}

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

@foreach(var GroupLTV in Model.GroupBy(n=> n.MaLoaiTV))
{
<div>@GroupLTV.Key</div>

foreach(var item in GroupLTV)
{

@item.TaiKhoan

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

@Model.First().LoaiSanPham.TenLoai - Mới Nhất !

ơ 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)


 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


// Kiểm tra tham số truyền vào có rỗng hay khơng
if (id == null)
{
return new 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ì để ngun 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);


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())
{


-

onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Họ tên';}" />
onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Tài khoản';}" />
name="MatKhau" onfocus="this.value = '';" onblur="if (this.value == '') {this.value =
'';}" />
name="check_password" onfocus="this.value = '';" onblur="if (this.value == '')
{this.value = '';}" />
onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}" />
onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Địa chỉ';}" />
onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Số điện thoại';}"
/>
onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Câu hỏi bí
mật';}" />
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


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

@ViewBag.ThongBao

-

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 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");


-

}

-

Xong đó tiếp tục tạo trong cái thẻ form của đăng nhập để khi mình bấm đăng nhập thì
nó sẽ chạy đến cái action đăng nhập của home và action đó sẽ trả mình về trang
index.
@using (Html.BeginForm("DangNhap", "Home")) {

Tên đăng nhập

<input type="text" name="" placeholder="Tài khoản">

Mật khẩu

<input type="password" name="" placeholder="Mật khẩu">
<input type="submit" name="" value="Đăng Nhập">
<a href="#">Qn mật khẩu ?</a>

<a href="../Registration/Registration.html">Khơng có tài khoản ?</a>
-

}

Xong đó thực hiện thêm name của form trùng với name của action đăng nhập và thực
hiện check pass vs db như sau

public ActionResult DangNhap(FormCollection f) {
//kiem tra ten dang nhap va mạt khau
string sTaiKhoan = f["txtTenDangNhap"].ToString();
string sMatKhau = f["txtMatKhau"].ToString();
ThanhVien tv = db.ThanhVien.SingleOrDefault(n => n.TaiKhoan == sTaiKhoan &&
n.MatKhau == sMatKhau);
if (tv != null) // neu nhu bien thanh vien # rong ==> la co thanh vien do
{
Session["TaiKhoan"] = tv;
return RedirectToAction("Index");
}
return RedirectToAction("Index");
}
Sau đó kiểm tra xem nếu đăng nhập rồi thì ẩn 2 nút đn đk, cịn ko thì chào khách
@if (Session["TaiKhoan"] != null && Session["TaiKhoan"] != "")
{ //check xem khoi tao chua hay rong
ThanhVien tv = (ThanhVien)Session["TaiKhoan"];
<li><a href="" class="">Chào @tv.HoTen </a></li>
<li><a href="@Url.Action("DangXuat","Home")" class="">Đăng Xuất</a></li>
}
else
{
<li><a href="" class="btn">Đăng Nhập</a></li>
<li><a href="@Url.Action("DangKy","Home")">Đăng Ký</a></li>
}

Lưu Ý

Khi dùng để in ra 1 cái html action hoặc gì đấy thì ta dùng @Html.Action – Html.Actionlink
Cịn nếu mà để chèn vào 1 đường link thông qua href thì dùng @Url.Action ko dùng @Html
cho thẻ a href thì sẽ lỗi


Chức năng Validation form đăng nhập trong
web bán hàng:
Để thông báo đăng nhập đúng hay sai
trong form thì sử dụng Ajax
Ở View



@using (Ajax.BeginForm("DangNhap", "Home", new
AjaxOptions{InsertionMode=InsertionMode.Replace,UpdateTargetId="ThongBao" }))
{

Tên đăng nhập

<input type="text" name="txtTenDangNhap" placeholder="Tài khoản">

Mật khẩu

<input type="password" name="txtMatKhau" placeholder="Mật khẩu">
<input type="submit" name="" value="Đăng Nhập">

id="ThongBao">

<a href="#">Qn mật khẩu ?</a>

<a href="../Registration/Registration.html">Khơng có tài khoản ?</a>
}
Thực hiện sửa form đăng nhập như trên theo Ajax Ở Controller



public ActionResult DangNhap(FormCollection f) {
//kiem tra ten dang nhap va mạt khau
string sTaiKhoan = f["txtTenDangNhap"].ToString();
string sMatKhau = f["txtMatKhau"].ToString();
ThanhVien tv = db.ThanhVien.SingleOrDefault(n => n.TaiKhoan == sTaiKhoan &&
n.MatKhau == sMatKhau);
if (tv != null) // neu nhu bien thanh vien # rong ==> la co thanh vien do
{
Session["TaiKhoan"] = tv;
return RedirectToAction("Index");
}
return Content("Tài Khoản hoặc mật khẩu không đúng", "text/html");
}
-

Thay đổi kiểu trả về của controller DangNhap (RedirectToAction)
mà trả về kiểu Content

-

Nếu như mà nahpaj sai kết quả mà nó trả về 1 cái trang khác thì xem lại đã cài AJAX
chưa, vào ajax cài jQuery unobtrusive ajax

1.

Sau đó import vào trang có cái ajax