Làm quen ASP.NET

ASP.NET là công nghệ mã nguồn mở giúp xây dựng các ứng dụng và dịch vụ web một cách nhanh chóng và hiệu quả dựa trên nền tảng .NET và các ngôn ngữ của Microsoft (C# hay VB). Để học ASP.NET, chúng ta dùng bộ công cụ Microsoft Visual Studio.

Tạo một ứng dụng ASP.NET Web Forms đầu tiên trong môi trường Visual Studio 2019 Community, hệ điều hành Windows 10

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

Tạo một ứng dụng ASP.NET 4.5 trong môi trường Visual Studio 2012 thông qua ví dụ minh hoạ tạo một ứng dụng web đầu tiên dưới đây.

Tạo website ASP.NET đầu tiên

Mở VS 2012 và vào New Project

Trong cửa sổ New Project tại mục Templates chọn ngôn ngữ Visual Basic và chọn Web và chọn mục NET Empty Web Application:

Sau khi nhập tên dự án trong mục Name (MyFirstWebpage) và nhập địa chỉ lưu dự án tại Location, chúng ta nhấp OK. Giao diện sẽ trông như thế này:

Nhấp chuột phải vào MyFirstWebpage trong cửa sổ Solution Explorer, chọn Add -> New Item -> Web Form; gõ tên trang trong mục Name (aspx) và bấm Add:

Gõ nội dung sau trong mục <div>:<p> Hello World! < /p >

Nhấp chuột phải vào FirstPage.aspx chọn Set As Start Page, chọn trình duyệt web (web browser) trong Run (dấu mũi tên) để thể hiện trang web (mặc định là IE):

Bấm nút Run (hoặc Ctrl + F5) và xem kết quả:

Chú ý: trang ASPX phải được thực thi trên một web server, ở đây là web server cục bộ (localhost) IIS. Nếu chúng ta chưa cài IIS thì thực hiện như sau (trên windows 7): vào Control Panel chọn Programs. Trong mục Programs and Features chọn Turn Windows features on or off. Nhấp chuột chọn Internet Information Services và OK. Mở trình duyệt gõ localhost trên thanh địa chỉ, kết quả sẽ như sau:

Giới thiệu tổng quan ASP.NET

Khi chúng ta gõ một URL như www.vietnamnet.vn trong trình duyệt web và nhấn Enter, nghĩa là trình duyệt gửi một yêu cầu (request) đến web server tại địa chỉ này. Giao tiếp giữa trình duyệt web và web server thông qua giao thức HTTP (HyperText Transfer Protocol). Khi server chấp nhận yêu cầu, xử lí nó và gửi trở lại trình duyệt web, theo mô hình như sau:

Trong trường hợp chúng ta, client (máy chứa web browser) và server (máy chứa web server) là cùng một máy, nghĩa là chúng ta đang dùng web server cục bộ (localhost), trong trường hợp này là IIS (Internet Information Services). Trong thực tế, khi xuất bản website chúng ta host đến một web server bên ngoài, nơi có thể được truy cập bởi nhiều clients.

Một trang ASPX gồm hai thành phần: Các thành phần tĩnh như HTML, CSS hay các hình ảnh được web server đọc từ ổ đĩa và gửi trực tiếp đến web browser, các thành phần động như mã C# (hay VB) hay các điều khiển phía server (server controls) sẽ được gửi đến một phần mềm để xử lí trước khi gửi đến web browser. Cách thức một trang ASPX được gửi đến hay ánh xạ đến (mapping) một ứng dụng để xử lí được gọi là Application Mapping hay Handler Mapping. Với các trang ASPX, ứng dụng xử lí là ASP.NET run time, thành phần của Microsoft .NET Framework được thiết kế để xử lí các yêu cầu web.

Trang ASP.NET chứa 3 thành phần chủ yếu là:

Mã HTML, CSS và JavaScript được gửi trực tiếp đến web browser.
ASP.NET Server Controls được xử lí thành mã HTML trước khi gửi đến web browser. Ví dụ một ASP.NET Server Control (button) như sau:

Đoạn mã trên khi xử lí thành mã HTML sẽ là:

Programming code: mã VB hay C# có thể được nhúng trực tiếp vào trang hoặc tạo một file riêng (gọi là Code Behind hay Code Beside).

Khi trang hoàn thành việc xử lí, tất cả mã HTML sẽ được tập hợp lại và gửi đến web browser. Web browser đọc, phân tích và hiển thị đến người xem.

IDE (Integrated Development Environment)

Là môi trường tích hợp tất cả các công cụ cần thiết để xây dựng các ứng dụng web phức tạp. Visual Studio là một IDE hoàn hảo cho phát triển ứng dụng .NET hay web. Giao diện chung:

Main Menu: chứa các mục cơ bản như File, Edit, Help, View,…

Toolbar Area: cho phép hiển thị những toolbars khác nhau giúp bạn có thể truy cập nhanh nhất các chức năng phổ biến như Save/Save All, New Project, Open Project,…

Toolbox: chứa các controls hỗ trợ quá trình thiết kế web. Bạn chỉ đơn giản kéo/thả những controls bạn cần. Thường thu nhỏ nằm bên trái màn hình (như hình trên) hoặc nếu ẩn thì vào View chọn Toolbox hoặc phím tắt Ctrl + Alt + X. Giao diện:

Solution Explorer: cửa sổ bên phải màn hình. Là một cửa sổ quan trọng vì nó cho phép bạn thấy tổng thể cấu trúc của dự án website của bạn. Solution Explorer cho phép bạn tổ chức website mình thành các thư mục riêng, có mối quan hệ logic với nhau. Có thể thêm, xoá, sửa thư mục hay các file trong Solution Explorer. Nếu không thấy cửa sổ này, có thể vào mục View -> Solution Explorer.

Document window: là cửa sổ chính của ứng dụng, nơi hầu hết mọi hoạt động xảy ra. Với cửa sổ này bạn có thể làm việc với nhiều tài liệu định dạng khác nhau như HTML, CSS, JavaScript, ASPX, code VB hay C#,…

Tại đáy của Document window có 3 buttons Design, Split và Source. Button Design cho phép mở chế độ thiết kế giao diện trang; Source cho phép xem các mã HTML hay mã khác; Split cho phép cả hai cửa sổ Design, Source xuất hiện đồng thời. Như các hình sau:

Source:

Design:

Split:

Start Page: khi VS khởi động, Start Page được load đầu tiên vào Document window. Với Start Page, bạn có thể nhanh chóng tạo một dự án mới hay mở các dự án có sẵn. Nếu Start Page không xuất hiện, ta vào View->Start Page.