Hướng dẫn làm web bằng asp.net c năm 2024

Để bắt đầu tạo một website (hay ứng dụng web) với ASP.NET, chúng ta cần phân biệt giữa Web Site Projects và Web Application Projects.

Web Site Project

• Chọn New > Web Site.
• Chỉ đơn giản là một thư mục chứa các files và thư mục con.
• Không chứa file dự án trung tâm (như vbproj hay csproj) để theo dõi các file riêng rẻ trong một website.
• Có thể dễ dàng copy site, xoá site hay chia sẻ.
• Phù hợp cho người bắt đầu làm quen ASP.NET.

Web Application Project

• Chọn New > Project > Templates > Visual Basic > Web.
• Được quản lí như một dự án.
• Chứa file dự án trung tâm để theo dõi mọi hoạt động của dự án.
• Phù hợp cho các nhà phát triển làm việc theo nhóm.

Các kiểu dự án ASP.NET

Trong Visual Studio 2012

• ASP.NET Empty Web Site: là template mặc định, rỗng và phải xây dựng lại từ đầu.
• ASP.NET Web Forms Site: là template được khuyên dùng cho người bắt đầu học ASP.NET. Nó có một số thư mục và file ban đầu để hỗ trợ người thiết kế.
• ASP.NET Web Site (Razor v1 & v2): là các template để phát triển các sites dựa vào các nền tảng web pages của Microsoft.
• ASP.NET Dynamic Data Entities Web Site: là template cho phép tạo các websites quản lí cơ sở dữ liệu cực mạnh mà không cần quá nhiều code.
• WCF Service: cho phép tạo một website chứa một hay nhiều dịch cụ WCF (Windows Communication Foundation).

Trong Visual Studio 2019 Community

• Empty: dự án rỗng phải xây dựng từ đầu
• Web Forms: dự án xây dựng các trang ASP theo mô hình sự kiện và kéo thả các điều khiển giống lập trình ứng dụng Windows.
• MVC: dự án xây dựng trên mô hình M (Model) – V (View) – C (Controller).
• Web API: cho phép tạo các dịch vụ RESTful HTTP
• Single Page Application: tạo các ứng dụng trên nền tảng HTML5, CSS3 và JavaScript.

Tạo và mở một website

Tạo một site mới

Chọn New > Web Site và chọn các mục như trong hình sau và OK:

Lúc này chúng ta có một site rỗng, chỉ chứa một file gọi là Web.config. Mở cửa sổ Solution Explorer ta sẽ thấy như sau:

Nhấp chuột vào file này và xem nội dung tại Document window:

Mở các websites tồn tại

Trong VS chọn File > Open > Web Site… sẽ xuất hiện hộp thoại Open Web Site và chọn thư mục Web Site cần mở. Hình sau:

Làm việc với các tập tin trong website

Trong một website có rất nhiều files với nhiều kiểu khác nhau. Để có thể biết có bao nhiêu kiểu file có thể có trong một website, chúng ta có thể nhấp chuột phải vào mục Site trong cửa sổ Solution Explorer, chọn Add > Add New Item và cửa sổ Add New Item hiện ra cho phép ta có thể thêm các loại tập tin cần thiết vào thư mục website, hình:

Các tập tin web

Dùng cho các ứng dụng web và có thể được yêu cầu trực tiếp bởi một web browser hoặc được dùng để xây dựng các thành phần của một trang web. Danh sách các files sau có thể được dùng trong các website webform ASP.NET và các phần mở rộng của chúng:

Kiểu file Mở rộng Mô tả Web form .aspx Giao diện các trang mà người dùng có thể xem trong web browser Master page .master Định nghĩa các cấu trúc chung của website Web user control .ascx Chứa các thành phần của trang có thể được sử dụng nhiều lần trong nhiều trang HTML Page .htm/.html Chứa code HTML Style Sheet .css Chứa code css Web Configuration File .config Chứa các thông tin cấu hình chung của website. Site Map .sitemap Thể hiện cấu trúc các files của website theo định dạng HTML JavaScript File .js Chứa code JavaScript Skin File .skin Chứa các thông tin thiết kế cho các controls.

Các tập tin code

Bảng dưới thể hiện một vài kiểu file code có thể gặp trong website WebForm ASP.NET:

Kiểu Mở rộng Mô tả WCF Service .svc Có thể được gọi bởi các hệ thống khác, bao gồm web browser và có thể chứa code được thực thi trên server của bạn. Class .vb/.cs Chứa mã lập trình cho website. Global Application Class .asax Chứa code được kích hoạt tương ứng với các hoạt động xảy ra trong website như khi bắt đầu ứng dụng hay khi một lỗi nào đó xuất hiện.

Các tập tin dữ liệu

Được dùng để lưu trữ dữ liệu có thể được dùng trong site hay bởi các ứng dụng khác. Danh sách thể hiện trong bảng dưới:

Kiểu Mở rộng Mô tả XML File .xml Lưu trữ theo định dạng XML SQL Server Database .mdf Là các file database dùng bởi SQL Server ADO.NET Entity Data Model .edmx Dùng để truy cập nhanh đến các databases mà không phải lặp lại nhiều code.

Thêm các tập tin tồn tại sẵn

Nhấp chuột phải vào Site, chọn Add > Existing Item

Tổ chức website

Cách tổ chức tốt nhất là nhóm các files theo chức năng và đặt chúng trong các thư mục riêng; ví dụ các files css đặt trong thư mục Styles, các file JS đặt trong thư mục Scripts, các user controls đặt trong Controls hay các master pages đặt trong thư mục MasterPages. Ví dụ cấu trúc sau:

Làm việc với Web Forms

Các khung nhìn (views) khác nhau trên web form: có 3 chế độ xem là Source, Split và Design.

Chọn giữa code behind (tạo một file riêng) và code nhúng (embed) trong trang: tuỳ vào từng trường hợp mà ta có thể tạo file code riêng (.vb hay .cs) hay nhúng code vào trang. Nếu số lượng code lớn, sử dụng nhiều lần thì dùng code behind, ngược lại nếu code ít, không dùng lại nhiều thì có thể nhúng vào trang.

Minh họa trong Visual Studio 2019 Community

Tải Tài liệu hướng dẫn thực hành.

Minh hoạ trong Visual Studio 2012

Thêm code bằng code behind

• Để tránh lộn xộn dự án, chúng ta tạo thư mục Demos để đặt tất cả các files minh hoạ. Trong cửa sổ Solution Explorer chọn Site và kích chuột phải chọn Add > New Folder và tạo Demos.
• Kích chuột phải Demos chọn Add > Add New Item, chọn ngôn ngữ (VB) ở cửa sổ bên trái, chọn Web Form ở giữa, gõ CodeBehind.aspx trong Name và đảm bảo checkbox Place code in separate file được check. Hình cửa sổ Source trông như sau:

• Chuyển sang cửa sổ Design thì sẽ trông như sau:

• Từ Toolbox chọn Label và thả vào vùng Design, như sau:

• Nhấp đôi chuột vào bất kì nơi nào trong vùng trắng dưới Label, VS sẽ chuyền đến file Code Behind (trong trường hợp này là CodeBehind.aspx.vb):

• Thêm dòng code vào Sub Page_Load

Mã C#

protected void Page_Load(object sender, EventArgs e) {

 Label1.Text = "Hello World!!!";  

• Trong cửa sổ Solution Explorer nhấp chuột phải vào file CodeBehind.aspx và chọn View in Browser thì kết quả:

• Vào Save All lưu tất cả kết quả.

Thêm code bằng cách nhúng:

• Nhấp chuột phải vào thư mục Demos thêm Web Form, chọn ngôn ngữ VB và gõ CodeInline.aspx trong Name. Đảm bảo bỏ dấu check của checkbox Place code in separate file:

• Giao diện Source của file CodeInline.aspx như sau:

• Chuyển đến cửa sổ Design, kéo và thả Label từ Toolbox vào vùng trắng dưới
  , VS thay vì chuyển tới một file riêng nào đó (như CodeBehind.aspx.vb ở trên), nó sẽ thêm code (Sub Page_Load) vào trong CodeInline.aspx:

Mã C#

protected void Page_Load(object sender, EventArgs e) { }

• Thêm code vào Sub và hiển thị kết quả tương tự minh hoạ code behind ở trên.

Thêm các Markup vào trang

Có nhiều cách thêm code HTML và các các mã khác vào trang. Chúng ta có thể gõ trực tiếp nhưng đây không phải là cách tốt nhất vì đôi khi chúng ta gặp quá nhiều mã. Chúng ta có thể tận dụng các công cụ trong VS và cửa sổ Design View.

Chèn và định dạng văn bản: sử dụng thanh công cụ Fornatting (lưu ý chúng ta đang ở cửa sổ Design View).