Để bắt đầu tạo một website (hay ứng dụng web) với ASP.NET 4.5, chúng ta cần phân biệt giữa Web Site Projects 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 templates trong  Web Site Project

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 wesite chứa một hay nhiều dịch cụ WCF (Windows Communication Foundation).

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:

ChuongII 1

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 files 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 files 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 files 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 files 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 files 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 Form

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

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 hoạ cách 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

  • 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ả.

Minh hoạ cách 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 <div>, 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:

  • 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).

THỰC HÀNH CHÈN VÀ ĐỊNH DẠNG VĂN BẢN

  • Thêm một trang Web Form mới bằng cách nhấp chuột phải vào Site chọn Add New Item, chọn tên là Default.aspx, bỏ dấu check trong Place Code in Seperate File và nhấn Add. Chuyển sang cửa sổ Design View.

  • Gõ dòng văn bản “Xin chao cac ban den voi ASP.NET” trong ô hình chữ nhật dưới thẻ <div> và bôi đen dòng này bằng chuột, như sau:

  • Trong mục Code Block chọn Heading 1 <h1> :

  • Kết quả như sau:

  • Đưa con trỏ chuột vào cuối dòng văn bản (sau NET) và Enter để đến hàng mới và gõ nội dung mới: