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

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

Đ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

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 }

CÁCH HIỂN THỊ TỪ CONTROLLER SANG VIEW  Tại @RenderBody(): dùng để hiển thị điều khiển ta ra, có nghĩa hiển thị nội dung mà bạn muốn, ví dụ bạn muốn fix header footer cố định trang cho giao diện website @RenderBody render nội dung trang trang layout dùng chung VD: @ViewBag.Title @RenderBody()  File ViewStart _ViewStart.cshtml: dùng để định nghĩa layout cho website, bạn thiết lập tùy biến sài layout được, giống Admin sài layout này, cịn user thì sai layout _ViewStart.cshtml: dùng để định nghĩa layout cho website, bạn thiết lập tùy biến sài layout được, giống Admin sài layout này, cịn user thì sai layout 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 chuổi liệu hay mảng liệu mà ta muốn thị ngồi View, bạn kết hợp với LingQ nhé, bạn xem ví dụ //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 } 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 LIST: Namespace WebsiteBanHang.Controllers{ Public class HomeController : Controller { QuanLyBanHangEntities db = new QuanLyBanHangEntities(); Public ActionResult Index() { // Truy vấn lấy liệu alf 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 ĐỐ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 liệu đố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(); // Kiểu lấy list, lấy vị trí 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 liệu đố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(); // Kiểu lấy list, lấy vị trí 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 truy vấn đối tượng caua lệnh truy vấn //Bước lấy danh sách khách hàng var lstKH = from kh in db.KhachHang where kh.MaKH == select kh; //Bước láy đối tượng khách hàng dựa phương thức hỗ trợ KhachHang khang = db.KhachHang.SingleOrDefault(n=>n.MaKH==2); return View(khang); } // Truy vấn lấy liệu đối tượng KhachHang xếp theo tên dùng phương thức public ActionResult SortDuLieu() { //Phương thức xếp liệu tăng dần List lstKH = db.KhachHang.OrderBy(n => n.TenKH).ToList(); return View(lstKH); } } } public ActionResult SortDuLieu2() { //Phương thức xếp liệu giảm dần List lstKH = db.KhachHang.OrderByDescending(n => n.TenKH).ToList(); return View(lstKH); } } // Truy vấn lấy liệu GROUP Dữ liệu VIEW - Ở Bảng thành viên thành viên sử dụng hẹ thống phải đăng kí lúc có mã loại thành viên link với kiểu loại thành vine vip thường từ chia thành viên oke hay bth kiểu group qua VIEW ko qua controller Ở Controller thực : public ActionResult GroupDulieutrenview() { List lstKH = db.ThanhVien.OrderByDescending(n => n.TaiKhoan).ToList(); return View(lstKH); } // Này tạo list để lấy tất thành viên có bảnh thành viên í (bài ko dùng bảng khách hàng trên) xong sau lấy xog hêt thành viên bảng thành viên thực đẩy qua view - Ở View thực : @using Realstore.Models; @model List @{ } Layout = null; ViewBag.title = "GroupDulieu"; @foreach(var GroupLTV in Model.GroupBy(n=> n.MaLoaiTV)) { @GroupLTV.Key foreach(var item in GroupLTV) {

@item.TaiKhoan

} } // Code có code lấy hàng từ controller đẩy lên thực vòng lặp foreach thực query, tạo biến GROUPLTV từ nhận giá trị mã loại // @GroupLTV.Key thực in mã loại thành viên ‘’Key’’ tương ứng với Mã Loại thành viên (1 2) // sau lại thực hiện, sau biết đc viên loại nào, tiếp tục query xem loại tv có thực tạo biến item để moi bảng lúc lấy hết giá trị // Nó moi Loại thành viên trc xong hết vịng, check lại xem loại tv ko tiếp tục moi người loai tv - Http GET hàm trả lại view, cịn Post hàm xử lý chức nên xử lý chức dùng post ko người dùng GET tự vào qua link Trả giá trị thông qua viewbag: - IEnumerable lstHDX = (IEnumerable)ViewBag.ListHDX; - IEnumerable lstHTD = ViewBag.ListHTD as IEnumerable;  kiểu giá trị trả trả null ko có cịn ko có bão lỗi - @foreach (var item in Model.Take(3)){} – dùng vòng lặp lấy sản phẩm - Giả sử thông tin DB cần xuất chưa ký tự html chuyển ntn ?; -  @Html.Raw(item.cauhinh) Ví dụ có tên loại sản phẩm bảng khác mà lại gọi bảng khác sử dụng cú pháp sau  @Model.First().LoaiSanPham.TenLoai - Mới Nhất ! khác bảng ?à ko tới bảng có tên cần truy vấn trường tên đk Chèn link vơ dùng cú pháp @Url.Action("Index","Home") với index file chuyển đến home controoler file gửi  Cách lấy sản phẩm từ bảng tới bảng khác (kiểu lấy chuyền)  Bước tách menu view riêng ghép qua cú pháp @html.Action(“tên file partial”,”tên controller chứa file đó”)  Bước
  • Trang Chủ
  • @foreach (var groupItem in Model.GroupBy(n => n.LoaiSanPham)) // kiểu gom loại có sản phẩm có loại sản phẩm trả lại tên loại sản phẩm, mà ko lại trả lại nhiều loại sản phẩm // kiểu lọc trùng á, xong gom lại 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 có thuộc tính loại sản phẩm lấy(ktra thông qua tk loại sản phẩm) // mà group theo key {
  • @groupItem.Key.TenLoai
    • Accessories
    • Bags
    • Caps & Hats
    • Hoodies & Sweatshirts
    • Jackets & Coats
    • Jeans
    • Jewellery
    • Jumpers & Cardigans
    • Leather Jackets
    • Long Sleeve T-Shirts
    • Loungewear
  • } } Nghĩa bảng dùng ….Key.”thuộc tính bảng để truy vấn bảng” nối bảng khác ….GroupBy(n=>n.’Tên bảng’) vịng foreach gọi thuộc tính lại dùng Key - Khi khai báo thấy tham số có dạng: ( int? id )  hiểu khai báo biến tên id có kiểu int, dấu ? int 32bit 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); } // khơng truy xuất csdl lấy 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 khơng có sản phẩm return HttpNotFound(); } - Khi làm trang chi tiết nên ý: Khi Trả sản phẩm: @using AuthStore.Models; @model SanPham Khi trả list sản phẩm @using AuthStore.Models; @model IEnumerable @*nếu mà trả list sản phẩm dùng kiểu irenumerable cịn ko để nguyên sanpham thôi*@ Làm việc với ROUTECONFIG.cs Tạo route nên bỏ default để tránh lỗi Cấu Hình đường dẫn khơng có tham số: Ví dụ: routes.Map.Route( Name:”test”, // tên route url:”test”, // cịn url hiển thị lên defaults: new { Controller = “testcontroller”, action=”testAction”, id = UrlParameter.Optional} // cịn controller action chạy ); Tại 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 route”) Cấu Hình đường dẫn có tham số: Ví dụ: routes.Map.Route( Name:”test”, // tên route url:”{tensp}-{id}”, // url hiển thị lên, có tham số id defaults: new { Controller = “testcontroller”, action=”testAction”, id = UrlParameter.Optional} // controller action chạy ); Tại 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 view đổ hình (Sửa view SanPham, 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 DB:   - Vào model để thêm vào !!! - Làm trang đăng nhập đăng ký : [HttpGet] để load db trước trang đăng ký, vd load câu hỏi trước [HttpPost] để dạng kiểu hành động sau bấm nút submit Tạo Form nhập thông tin đăng ký vào DB - Đầu tiên tạo Action controller Home đăng ký theo phương thức Post 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 view từ ra, thẻ Form dùng razor cho dễ hiểu cịn thẻ dùng input @using (Html.BeginForm()) { - - Trở trang chủ } Các trường Name thẻ input phải có name trùng trường bảng SQL, bảng thành viên tương ứng ko ko nhận đc giá trị Ta có controller đăng ký Nhận vào [POST] có 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 xổi add tất thuộc tính thẻ Form vơ theo 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 lấy giá trị form lâu thời gian, nhiều trường code dài - Tiếp theo 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 tim captchamvc cài MVC5 + Xong bấm buid PRJ để làm lại prj + Trong đăng ký html thêm thư viện @using CaptchaMvc.HtmlHelpers @using CaptchaMvc + Xong tắt prj xong mở lại + Xong tạo div chứa capcha thực @html.Capcha(5)  nhập chữ mà ko trùng @html.MathCapcha()  Kiểu dạng trả lời toán học + Vào controller chưa action dăng ký thêm thư viện Trên vào để làm check kết 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 xuất Return View(“”); // phải cho thêm add thơng tin vào // chạy, nên nhập mã captcha // code khung chạy } ViewBag.ThongBao =Sai mã captcha””; // mà lỗi xuất + thêm thẻ viewbag view để thị lỗi ra: @ViewBag.ThongBao - Tiếp theo cài câu hỏi bảo mật vào form đăng ký: - Đầu tiên tạo list action controlerr có action đk Public List LoadCauHoi(){ List lstCauHoi = new List(); 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 bạn làm cơng việc gì”); return lstCauHoi; } Tiếp đến load câu hỏi 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 đăng nhập web bán hàng: - Đầu tiền gom header top vào thành partialview – HeaderTopPartial Xong tiếp tục tạo controller đăng nhập kiểu trả public ActionResult DangNhap() { return RedirectToAction("Index"); - } - Xong tiếp tục tạo thẻ form đăng nhập để bấm đăng nhập chạy đến action đăng nhập home action trả trang index @using (Html.BeginForm("DangNhap", "Home")) {

    Tên đăng nhập

    Mật khẩu

    Quên mật ? Khơng có tài khoản ? - } Xong thực thêm name form trùng với name action đăng nhập thực check pass vs db 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 vien # rong ==> la co vien { Session["TaiKhoan"] = tv; return RedirectToAction("Index"); } return RedirectToAction("Index"); } Sau kiểm tra xem đăng nhập ẩn nút đn đk, cịn ko chào khách @if (Session["TaiKhoan"] != null && Session["TaiKhoan"] != "") { //check xem khoi tao chua hay rong ThanhVien tv = (ThanhVien)Session["TaiKhoan"];
  • Chào @tv.HoTen
  • Đăng Xuất
  • } else {
  • Đăng Nhập
  • Đăng Ký
  • } Lưu Ý Khi dùng để in html action ta dùng @Html.Action – Html.Actionlink Cịn mà để chèn vào đường link thơng qua href dùng @Url.Action ko dùng @Html cho thẻ a href lỗi Chức Validation form đăng nhập web bán hàng: Để thông báo đăng nhập hay sai form sử dụng Ajax Ở View  @using (Ajax.BeginForm("DangNhap", "Home", new AjaxOptions{InsertionMode=InsertionMode.Replace,UpdateTargetId="ThongBao" })) {

    Tên đăng nhập

    Mật khẩu

    Qn mật ? Khơng có tài khoản ? } Thực sửa form đăng nhập 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 vien # rong ==> la co vien { Session["TaiKhoan"] = tv; return RedirectToAction("Index"); } return Content("Tài Khoản mật không đúng", "text/html"); } - Thay đổi kiểu trả controller DangNhap (RedirectToAction) mà trả kiểu Content - Nếu mà nahpaj sai kết mà trả trang khác xem lại cài AJAX chưa, vào ajax cài jQuery unobtrusive ajax Sau import vào trang có ajax  Thực sửa filw thanhvien.cs model Thêm thư viện using System.ComponentModel.DataAnnotations; Thêm thư viện using System.ComponentModel; Giả sử mà kiểu xây dựng view mà nta render sẵn Thì sửa tên, tên cho sau [DisplayName(“Mã Thành Viên”)] mặc định public int MaThanhVien{get, set;} Xong bắt đầu kiểm tra thuộc tính tham số đầuvào Bằng thuộc tính có ảnh, muốn kiểm tra đâu cần Chèn phía vd [Required(ErrorMessage)=”{0} nhập vào tài khoản”]  Tiếp tuc thực thêm số trường View:  Tiếp đến trường hợp nhập sai box mà nhập capcha(Trong trang đăng ký) Thì thêm dòng vào if(ModelState.IsValid) (Controller DangKy) Chức Metadata để mà update lại model validation model khơng bị mất: -  Ví dụ thêm trường vào Db thêm xong +, Bấm Update, xong bấm Update database +, Tiếp tục cập nhật model, mở folder model chuột Phải vào quanlybanhang.edmx +, Xong bấm update model form database  xongn bấm Refesh xong tích vào table ko khuyến nghị +, nên xóa tồn ở edmx bấn add tích table Thì hay thành cơng nhiều Cập nhật lại model có tượng validate bị Cách xử lý: tạo metadata Cách tạo: +,Trong models tạo folder Metadata +,Tạo file class thanhvien.cs +,Xong thêm vào thuộc tính sau:  Đấy cover bảng sang metadata làm giống copy nthe bảng gốc  ... Chuyển qua mục Brower tim captchamvc cài MVC5 + Xong bấm buid PRJ để làm lại prj + Trong đăng ký html thêm thư viện @using CaptchaMvc.HtmlHelpers @using CaptchaMvc + Xong tắt prj xong mở lại +... action dăng ký thêm thư viện Trên vào để làm check kết capcha nhập @using CaptchaMvc.HtmlHelpers @using CaptchaMvc + // kiểm tra capcha hợp lệ: If(this.IsCaptchaValid(“Captcha is not valid”)){

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

Tài liệu cùng người dùng

Tài liệu liên quan