Asp net bài 2 đề cương bài giảng new

Bài giảng chi tiết môn học lập trình ASP.Net Bài học cung cấp kiến thức cơ sở lý thuyết tổng quan về ASP.NET, kiến trúc ASP.NET, Code phía server, cách thức truyền dữ liệu giữa các trang, chuyển trang. Sau khi học xong bài học này sinh viên có thể xây dựng được các trang Web Form sử dụng điều khiển Html, Server và biết cách truyền dữ liệu giữa các trang Web

HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET Bài Tổng quan ASP.Net MVC - Mục đích, yêu cầu: Cung cấp cho sinh viên khái niệm, đặc tính ASP.Net MVC Framework, so sánh khác biệt ASP.Net MVC với Web Form, khái niệm đối tượng mơ hình MVC - Hình thức tổ chức dạy học: Lý thuyết, trực tuyến + tự học - Thời gian: Lý thuyết(online: 3) Tự học, tự nghiên cứu: 06 - Nội dung: Giới thiệu ASP.Net MVC 1.1 ASP.NET MVC ? 1.2 MVC làm việc nào? 1.3 Ưu & Khuyết điểm MVC 1.4 Sự khác biệt với WebForm 1.5 Lợi ích web dựa mơ hình MVC 1.6 Lịch sử phát triển ASP.Net MVC: XÂY DỰNG ỨNG DỤNG WEB 2.1 Tạo Project ASP.Net MVC 2.2 Các thành phần Project ASP.Net MVC 2.3 Tạo Controller 2.4 Điều hướng hiển thị: 12 2.5 Tạo View 16 2.6 Thay đổi Layout Pages (giao diện trang) 19 Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET Giới thiệu ASP.Net MVC 1.1 ASP.NET MVC ?  Controller  Nhận yêu cầu từ user  Xử lý xây dựng model phù hợp  Chuyển Model cho View  View: Tiếp nhận Model từ Controller để sinh giao diện phù hợp  Model: Chứa liệu chia chung Controller View Models  Lưu trữ thông tin, trạng thái đối tượng, lớp ánh xạ từ bảng CSDL  Chứa tất nghiệp vụ logic, phương thức xử lý, truy xuất database, Class, hàm xử lý Ví dụ: lớp Product sử dụng để mô tả liệu từ bảng Products, bao gồm ProductID, OrderDate Views  Chịu trách nhiệm hiển thị thông tin lên cho người dùng thông qua giao diện Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET  Chứa đối tượng GUI(Textbox, images )  Các thông tin cần hiển thị lấy từ thành phần Models Ví dụ: Đối tượng Product có "Edit" view bao gồm textboxes, dropdowns checkboxes để chỉnh sửa thuộc tính sản phẩm Controllers  Xử lý tác động mặt giao diện, thao tác models, chọn view để hiển thị hình  Điều hướng yêu cầu từ người dùng gọi phương thức xử lý  Trong MVC, view có tác dụng hiển thị giao diện,còn điều khiển Controllers đảm trách 1.2 MVC làm việc nào?  User tương tác với View, cách click vào button, gửi yêu cầu  Controller nhận điều hướng đến phương thức xử lý Model  Model nhận thông tin thực thi yêu cầu, View nhận kết từ Model hiển thị lại cho người dùng 1.3 Ưu & Khuyết điểm MVC Ưu điểm:  Thể tính chun nghiệp lập trình, PTTK Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET  Được chia thành thành phần độc lập nên giúp phát triển ứng dụng nhanh, dễ nâng cấp, bảo trì  Ứng dụng tạo chạy ổn định Windows  Đáp ứng nhiều loại thiết bị truy cập  An tồn, Dễ tích hợp Khuyết điểm:  Đối với dự án nhỏ việc áp dụng mô hình MVC gây cồng kềnh, tốn thời gian trình phát triển  Tốn thời gian trung chuyển liệu thành phần 1.4 Sự khác biệt với WebForm 1.5 Lợi ích web dựa mơ hình MVC  Dễ dàng quản lý phức tạp ứng dụng cách chia ứng dụng thành Model, View, Controller  Không sử dụng view state server-based form Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET Điều tốt cho lập trình viên muốn quản lý hết khía cạnh ứng dụng  Sử dụng mẫu Front Controller, mẫu giúp quản lý requests (yêu cầu) thông qua Controller Hỗ trợ tốt cho mơ hình phát triển ứng dụng hướng kiểm thử (TDD)  Hỗ trợ tốt cho ứng dụng xây dựng đội có nhiều lập trình viên thiết kế mà quản lý tính ứng dụng 1.6 Lịch sử phát triển ASP.Net MVC: XÂY DỰNG ỨNG DỤNG WEB 2.1 Tạo Project ASP.Net MVC  Khởi động Visual Studio 2017  Tạo project: File -> New Project  Click vào New Project  Chọn Visual C# khung bên trái, chọn Web  Chọn ASP.NET Web Application khung bên phải  Đặt tên cho project "Lab01" click OK Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET  Ở cửa sổ New ASP.NET Project, click MVC click OK Visual Studio sử dụng khuôn mẫu mặc định (default template) cho ASP.NET MVC Project vừa tạo, có ứng dụng chạy Đây project đơn giản, phù hợp để bắt đầu Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET 2.2 Các thành phần Project ASP.Net MVC  Properties: Chứa thuộc tính project  References: Chứa thư viện sử dụng Project  App_Data: Thư mục chứa file liệu Project add file liệu vào project  App_Start: Thư mục chứa file cấu hình khởi động biên dịch project Chú ý đến file FilterConfig.cs dùng để khai báo filter sử dụng trước thực o hành động o RouteConfig.cs định nghĩa routes project  Content: Thư mục chứa file CSS (dùng cho view)  Controllers: Thư mục chứa file xxController.cs Controller  Models: Thư mục chứa file cs Model gắn với bảng CSDL  Scripts: Thư mục chứa file JS (dùng cho view)  Views: Thư mục chứa view folder, view file HTML với đuôi cshtml Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET o Shared: Thư mục chứa file HTML với đuôi cshtml dùng chung view  Global.aspx: File chứa khai báo chung sử dụng cho toàn project (Biến toàn cục)  package.config: File quản lý package cài vào  Web.config: File quan trọng, định nghĩa cài đặt hệ thống cho project Chạy thử cách nhấn F5 Ctrl + F5 (chế độ không cần Debug) để xem kết quả: Visual Studio gọi tiến trình IIS để chạy ứng dụng Sau gọi trình duyệt để duyệt vào ứng dụng Lúc này, quan sát địa trình duyệt, thấy địa có kiểu sau: localhost:port 2.3 Tạo Controller Bắt đầu tạo lớp controller:  Trong cửa sổ Solution Explorer, right-click thư mục Controllers  Click Add,  Chọn Controller Trong sổ Add Scaffold, click MVC Controller - Empty, click Add Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET Đặt tên cho controller tạo "HelloController" click Add Như cửa sổ Solution Explorer có file tạo có tên HelloController.cs thư mục có tên Views\Hello Mặc định controller tạo mở sẵn IDE Học kết hợp Trang HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET Đây action method  Action method (Phương thức hành động)  Một controller có nhiều action method để xử lý cho yêu cầu cần thiết  Thường có ánh xạ one-to-one với tương tác người dùng (như: nhập URL vào cửa sổ trình duyệt, click chuột vào đường link, submit form, …)  Cú pháp Trong Kiểu_ trả_về là: ActionResult kiểu dẫn xuất từ ActionResult  Hầu hết action method trả thể lớp dẫn xuất từ ActionResult Học kết hợp Trang 10 HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET  Lớp ActionResult lớp sở cho tất kết trả action Hãy thay nội dung đoạn code bên public class HelloController : Controller { } Giải thích đoạn mã trên:  Phương thức Index() trả kiểu string với giá trị “Đây phương thức Index, phương thức mặc định Controller Hello.” Đây phương thức mặc định Controller  Phương thức ChaoMung() trả kiểu string với giá trị “Đây phương thức ChaoMung nằm Controller Hello!” Ta tạo nhiều phương thức thực thi tập tin HelloController.cs tùy ý Chạy thử cách nhấn F5 Ctrl + F5 (chế độ không cần Debug) để xem kết Học kết hợp Trang 11 HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET Ở trình duyệt, ta thử chạy địa chỉ: http://localhost:xxxx/Hello/ http://localhost:xxxx/Hello/ChaoMung để xem kết (với xxxx số cổng tự động gieo server IIS Express Visual Studio, bạn không cần quan tâm số cổng này) Kết hình sau: 2.4 Điều hướng hiển thị: ASP.NET MVC gọi controller khác với phương thức tương ứng, điều phục thuộc vào URL địa trình duyệt Mặc định, sau: /[Controller]/[ActionName]/[Parameters] Ta thiết lập định dạng điều hướng tập tin App_Start/RouteConfig.cs Học kết hợp Trang 12 HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET Khi chạy ứng dụng khơng định URL cụ thể lấy mặc định "Home" controller phương thức "Index" Trong đó, phần đầu URL để xác định controller Như vậy, /Hello ánh xạ đến lớp HelloController Phần thứ hai URL để xác định phương thức thực thi Như /Hello/Index gọi phương thức Index lớp HelloController để thực thi Trong trường hợp, chỉ định /Hello có nghĩa phương thức có tên Index xem mặc định thực thi Phần thức ba URL để xác định tham số (Parameters) cung cấp cho phương thức (sẽ đề cập sau) Ví dụ điều chỉnh code App_Start/RouteConfig.cs sau: Chạy thử, kết sau điều hướng Controller: Học kết hợp Trang 13 HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET Duyệt đến URL http://localhost:61657/Hello/ChaoMung/ Phương thức ChaoMung chạy trả chuỗi "Đây phương thức Index, " Mặc nhiên MVC ánh xạ tới /[Controller]/[ActionName]/[Parameters] Như với URL này, controller Hello phương thức thực ChaoMung(khơng có sử dụng phần [Parameters] URL này) Để sử dụng tham số(Parameters), ta thay đổi code phương thức ChaoMung sau: Chạy ứng dụng: http://localhost:61657/Hello/ChaoMung?ten=Thu&solan=4 Như ví dụ thành phần tham số (Parameters) theo cấu trúc chưa dùng, tham số ten solan dùng tham số theo query strings Dấu ? (question mark) URL phần ngăn cách để phía sau Học kết hợp Trang 14 HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET query strings Dấu & để ngăn cách cặp query strings với Ta tiếp tục cập nhật lại đoạn code với nội dung sau: Chạy ứng dụng: http://localhost:61657/Hello/ChaoMung/3?ten=Son Lúc thành phần thứ URL ánh xạ với parameter ID Phương thức ChaoMung có chứa tham số (ID) với phần đăng ký phương thức RegisterRoutes Trong ứng dụng ASP.NET MVC, dạng điển hình việc truyền tham số (giống tham số ID ví dụ trên), thay phải truyền tham số theo query strings, thêm vào cấu trúc cho ten id phần parameters URL Tại file App_Start\RouteConfig.cs: Học kết hợp Trang 15 HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET Chạy ứng dụng: http://localhost:61657/Hello/ChaoMung/Son/3 Đối với ứng dụng MVC, định tuyến mặc định hoạt động tốt hầu hết trường hợp Tuy nhiên, tùy vào nhu cầu cụ thể, ta thay đổi định tuyến để phù hợp với nhu cầu 2.5 Tạo View  Ta tiếp tục cập nhật lớp HelloController để sử dụng với hiển thị file khuôn mẫu giao diện (View Template File) để hiểu rõ việc tạo HTML trả để hiển thị phía client (browser)  Hiện phương thức Index lớp controller Ta thay đổi phương thức Index để trả View object, hiển thị nó: Right click lên tên phương thức, chọn Add View Học kết hợp Trang 16 HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET Tại cửa sổ Add View, gõ tên view Index, Chọn Layout mục Use a layout page, click OK Tại cửa sổ Select a Layout Page, chọn mặc định View/Shared/_Layout.cshtml click OK Học kết hợp Trang 17 HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET Tập tin \Views\Hello\Index.cshtml tạo sau: Và đoạn code Razor sau: Học kết hợp Trang 18 HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET =>Chạy xem kết quả: => Quy trình hiển thị liệu giao diện View sau: Đầu tiên, người dùng chạy đường dẫn http://localhost:xxxx/Hello/Index, server dị tìm thực thi phương thức Index() tệp HelloController.cs Phương thức Index() trả View {return View()} Vì server thực thi tệp tin Index.cshtml nằm thư mục Views/Hello hiển thị kết hình http://localhost:61657/Hello/ChaoMung/Thu/3 kết là: 2.6 Thay đổi Layout Pages (giao diện trang) Vào thư mục /Views/Shared Solution Explorer mở tập tin _Layout.cshtml Tập tin gọi layout page nằm thư mục dùng chung mà cáct rang sử dụng Học kết hợp Trang 19 HỌC PHẦN: LẬP TRÌNH WEB BẰNG ASP.NET Các khuôn mẫu giao diện (Layout templates) cho phép bố trí thành phần giao diện site vị trí áp dụng cho tất trang  @RenderBody() thành phần giữ chỗ trang hiển thị chỗ  @Html.ActionLink cách tạo liên kết tới action controller thực thi action Cú pháp: @Html.ActionLink (Text link, Tên action, Tên controller) Ví dụ: @Html.ActionLink("Home", "Index", "Home"): liên kết hiển thị trang web “Home”, liên kết để thực thi action method có tên Index() Controller có tên “Home” Ta sửa thêm ActionLink sau: Học kết hợp Trang 20