[ASP.NET Web Forms] Phần 2: Khởi tạo dự án ASP.NET Web Form

Như đã giới thiệu trong bài trước, sau khi cài đặt Visual Studio 2013 (ASP.NET 4.5) và SQL Server 2008 (R2) hoặc các phiên bản mới hơn thì bạn bắt đầu khởi tạo thử 1 dự án Web Form.

Tạo dự án
Việc tạo dự án Web Form rất đơn giản, đầu tiên bạn mở Visual Studio, chọn File -> Project.

Trong cửa sổ New Project, bạn chọn Templates -> Visual C# -> ASP.NET Web Application, đặt tên dự án là DammioShop, sau đó nhấn OK.

Tiếp đến, bạn sẽ chọn Template cho dự án Web, ở bước này bạn chọn Web Forms, sau đó nhấn OK là dự án được khởi tạo. Bạn có thể thấy ngoài Web Forms còn có nhiều hình thức khác như MVC, Single Page Application, … Các hình thức này bạn sẽ được học trong các series tiếp theo của trang dammio.com.

Tìm hiểu cấu trúc Website
Đến đây, bạn sẽ bắt đầu khám phá cấu trúc thư mục và nội dung tập tin của dự án Web mới tạo. Bạn chọn Tab View -> Solution Explorer hoặc phím tắt Ctrl + Alt + L để xem cấu trúc thư mục dự án Web hiển thị ở cột tay phải.

Trong hình trên, các thư mục và tập tin được mô tả vắn tắt sau đây. Bạn sẽ được tìm hiểu kỹ hơn về các phần này ở các bài viết tiếp theo.

• References: mục chứa các thư viện DLL của dự án, tương tự như các dự án .NET khác
• Account: mục chứa tài khoản người dùng của dự án Web, do Visual Studio tự động thiết lập. Bạn có thể không cần dùng thư mục này và có thể xóa đi.
• App_Data: chứa cơ sở dữ liệu dạng tập tin, chẳng hạn như Dammio.mdf. Nếu bạn dùng cơ sở dữ liệu SQL Server thì không cần lưu cơ sở dữ liệu ở đây.
• App_Start: Lưu trữ cấu hình khi dự án được khởi chạy, gồm 3 tập tin như BundleConfig.cs (nhúng các thư viện JavaScript khi dự án Web chạy), RouteConfig.cs (chứa cấu hình đường dẫn) và StartUp.Auth.cs (chứng thực cho Web như Login …)
• Content: nội dung phong cách Web như bootstrap.css, …
• fonts: chứa kiểu chữ
• Models: chứa mô hình mã nguồn
• Scripts: chứa các tập tin JavaScript
• Các trang Web khi chạy sẽ có đuôi là .aspx, ví dụ About.aspx, Contact.aspx, Default.aspx (trang chủ)
• Global.asax: chứa các phương thức để cấu hình cho Session, Application. Rất quan trọng nếu Website của bạn sử dụng Session như đăng nhập, đăng ký, phân quyền, chứng thực, đếm số người online, … và cả theo dõi người dùng truy cập nữa.
• Web.config: tập tin chứa toàn bộ cấu hình website, rất quan trọng nhé các bạn. Các dự án web bắt buộc phải có tập tin này mới chạy tốt được.
• Site.Master và Site.Mobile.Master: trang Master dùng làm vỏ giao diện cho các trang web khác, tương tự như khái niệm Slide Master trong Excel.

Những phần này trên là do Visual Studio khởi tạo, bạn không cần nhất thiết phải bắt chước y chang cấu trúc, tập tin như trên, một số phần bạn có thể vào, xóa đi, chỉnh sửa thêm thư mục và tập tin phù hợp với yêu cầu. Bạn có thể tạo dự án Web Empty (Web trống) nếu không muốn có cấu trúc thư mục, tập tin như mặc định và sau đó tự thêm các tập tin, thư mục theo ý muốn.

Tiếp theo, bạn mở trang Default.aspx để xem nội dung mã nguồn. Khi dự án Web chạy, trang đầu tiên nếu bạn không định rõ trang web nào sẽ chạy sẽ là trang Default.aspx (trang chủ) của dự án Web. Ngoài ra còn có thể dùng trang Index.aspx, Default.html, Index.html, default.htm, … làm trang chủ cho dự án Web cũng được.

Ở dưới góc cuối cùng bên trái bạn có 3 chế độ để xem 1 trang web .aspx đó là Design (xem thiết kế), Source (xem mã nguồn) và Split (xem cả hai cùng lúc). Trong hình trên bạn đang xem chế độ mã nguồn (Source), bạn có thể nhìn thấy chủ yếu là mã HTML và C#.

Chạy thử dự án
Để chạy dự án, bạn chỉ cần nhấn F5 (Debug -> Start Debugging) để chạy ở chế độ Debug để dò bắt lỗi hoặc Ctrl + F5 (Debug -> Start without debugging) nếu không cần dò lỗi.

Bạn có thấy đường dẫn Web trong hình là http://localhost:42177/Default thay vì http://localhost:42177/Default.aspx vì do Visual Studio đã tích hợp phương thức EnableFriendlyUrls và đặt RedirectMode là Permanent (bền vững) trong tập tin App_Start/RouteConfig.cs để đường dẫn URL nhìn có vẻ thân thiện và tăng khả năng SEO tốt hơn. Nếu vẫn muốn chạy trang web có đuôi .aspx, bạn thiết lập RedirectMode là Off. Lưu ý xóa cache trình duyệt nữa nhé!

var settings = new FriendlyUrlSettings();
settings.AutoRedirectMode = RedirectMode.Off;
routes.EnableFriendlyUrls(settings);

Vì Default.aspx là trang mặc định, do đó khi bạn chạy đường dẫn http://localhost:42177/ thì kết quả vẫn trả về nội dung trang này. Bạn có thể chạy trang About.aspx với đường dẫn http://localhost:42177/About hoặc http://localhost:42177/About.aspx để xem kết quả.

Kết luận: Như vậy, trong bài này bạn đã biết khởi tạo 1 dự án Web Forms, tìm hiểu sơ lược cấu trúc, tập tin và chạy thử một số trang web dự án.