Lập trình Web ASP.NET MVC .NET Framework - Bài 2 - Tạo Project Bán Hàng Online - Coding With Thịnh

IDE mình sử dụng là Visual Studio 2022

Mình đang làm Website bán hàng trực tuyến (đặt tên cho project là Shop Online hoặc đặt tên như mình là BanHangOnline nghĩa là Bán Hàng Online)

Chuẩn bị giao diện template (mẫu giao diện): Bao gồm giao diện bán hàng và giao diện admin. (Tải free trên mạng về hoặc mua template thì sẽ đầy đủ các giao diện hơn). Giao diện trong seri các bài học hướng dẫn làm project Bán Hàng Online này là mình xin được, nếu không muốn nói là mình lụm được (lượm được). Bạn nào cần thì đăng ký tên và email trong đường link này https://docs.google.com/forms/d/e/1FAIpQLSdoLwnB7qu0dD7qICFmO2QNWqA766C-Jg5p_dFhWwBc66VLpw/viewform, mình sẽ gửi mail cho từng bạn mẫu giao diện mình sử dụng trong project Bán Hàng Online. Hoặc bạn tải free trên mạng. Dùng template giao diện sử dụng Bootstrap là ok nha.

Nhấn "Create a new project" để tạo mới một project

Tìm template cho project có tên là ASP.NET Web Application (.NET Framework). Bấm vào nút "Next"

Đặt tên cho project là BanHangOnline, lưu project tại folder My ASP.NET (không nên đặt tên quá dài và nếu đặt tên tiếng Việt thì đặt tên không dấu để tránh bị lỗi)

Solution Name thì để nguyên (1 solution có thể chứa nhiều project)

Chọn .NET Framework 4.8 (chọn như mình hoặc chọn bản cao nhất trong danh sách Framework)

Bấm nút "Create"

Chọn Empty

Check vào checkbox MVC

Bấm Create

Đã xong bước tạo project

Tiếp theo là làm phần giao diện

Tập trung vào folder Views và folder Controllers trên cây thư mục project BanHangOnline

Kích chuột phải vào Views chọn Add chọn New Folder. Đặt tên cho thư mục là Shared

Chuột phải vào folder Shared, chọn Add chọn New Item...

Hoặc chọn Add chọn luôn MVC 5 Layout Page (Razor)

 

Chọn MVC 5 Layout Page (Razor)

Đặt tên cho Layout Page là _BanHangOnline.cshtml

Bấm nút Add

Tạo Controller

- Chuột phải vào folder Controller

- Chọn  Add chọn Controller

Chọn MVC 5 Controller - Empty

Bấm nút Add

Đặt tên cho Controller là HomeController

Bấm nút Add

Tại file HomeController.cs

Kích thuộc phải vào chữ Index chọn Add View...

Chọn MVC 5 View

Chọn Add

Bấm vào nút có dấu ... để chọn Layout Page _BanHangOnline.cshtml trong thư mục Shared (Views/Shared)

Chọn Layout Page _BanHangOnline.cshtml trong thư mục Shared (Views/Shared)

Bấm OK

Bấm Add

Hệ thống sẽ tạo một thư mục Home trong thư mục Views (thư mục Home sẽ là thư mục con của thư mục Views)

Trong thư mục Home hệ thống tạo tự động file Index.cshtml (Index.cshtml là một Razor View trong ASP.NET MVC, chịu trách nhiệm render giao diện cho action Index trong HomeController)

(Razor View được sử dụng để render nội dung của trang Index trong ứng dụng web)

Cách gọi và sử dụng file Index.cshtml thông qua một controller:

• Controller: Trong thư mục Controllers, sẽ có một HomeController. Trong HomeController, có một action method tên là Index.
• View: Khi action method Index của HomeController được gọi, nó sẽ tìm kiếm View tương ứng tên là Index.cshtml trong thư mục Views/Home.
• Layout: Trong Index.cshtml, có dòng Layout = "~/Views/Shared/_BanHangOnline.cshtml"; xác định layout file sử dụng cho view này. Layout file giúp định nghĩa phần chung (như header, footer, menu) cho toàn bộ trang web.

Build Solution

Bấm vào Build bấm vào Build Solution (hoặc bấm tổ hợp phím Ctrl + Shift + B)

Kiểm tra project có bị lỗi hay không, xem thử có chạy được hay không

Chuột phải vào project BanHangOnline chọn View chọn View in Brower (hoặc bấm tổ hợp phím Ctrl + Shift + W)

Kết quả chạy

Hiển thị chữ Index trên trình duyệt

Hiển thị chữ Index chính là hiển thị nội dung code HTML trong file Index.cshtml (thư mục Views/Home)

@{

    ViewBag.Title = "Index";

    Layout = "~/Views/Shared/_BanHangOnline.cshtml";

}

<h2>Index</h2>

Code trong phần @ là code C#

<h2>Index</h2> là code HTML

Trang Index hiển thị với đường dẫn: https://localhost:44317/

Cấu trúc đường dẫn bao gồm localhost + port (cổng)

Mặc định khi trang web chạy lên sẽ chạy vào đường dẫn localhost:44317/Home/Index (hệ thống ngầm định localhost:44317 tương đương với localhost:44317/Home/Index)

Cấu trúc đường dẫn localhost:44317/Home/Index bao gồm: localhost:44317 + Controller + Action

Home là tên 1 Controller

Index là tên 1 Action