1. Trang chủ
  2. » Địa lý lớp 12

Lập trình web ASP.NET MVC (Cao đẳng CNTT) - Nguồn: BCTECH

81 112 2

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Lập Trình Web Asp.net Mvc
Tác giả Phan Hữu Phước
Trường học Trường Cao đẳng Kỹ thuật Công nghệ Bà Rịa – Vũng Tàu
Chuyên ngành Công Nghệ Thông Tin
Thể loại Giáo trình
Năm xuất bản 2020
Thành phố Bà Rịa – Vũng Tàu
Định dạng
Số trang 81
Dung lượng 7,07 MB

Cấu trúc

  • BÀI 1: TỔNG QUAN VỀ ASP.NET MVC (10)
    • 1. Mô hình MVC (10)
      • 1.1. Giới thiệu (10)
      • 1.2. Ưu và nhược điểm (11)
      • 1.3. Lý do nên làm trên mô hình MVC (11)
    • 2. ASP.NET MVC (12)
      • 2.1. ASP.NET MVC là gì? (12)
      • 2.2. Kiến trúc (12)
      • 2.3. Quá trình xử lý yêu cầu (13)
      • 2.4. Một số đặc điểm (14)
      • 2.5. So sánh MVC và Web Form (16)
  • BÀI 2: TẠO ỨNG DỤNG WEB ASP.NET MVC (18)
    • 1. Thao tác tạo (18)
    • 2. Tổ chức lưu trữ (0)
    • 3. Phân biệt ASPX và Razor View Engine (0)
    • 4. Cú pháp mã Razor (0)
    • 5. Tạo Web Page đơn giản với mã Razor (0)
    • 6. Cài đặt Entity Framework (0)
  • BÀI 3: XÂY DỰNG MODEL (24)
    • 1. Khái niệm (24)
    • 2. Các loại Model (0)
      • 2.1. Data Model (24)
      • 2.2. Business Model (25)
      • 2.3. View Model (25)
    • 3. Tạo Data Model (0)
    • 4. Model Binder (0)
      • 4.1. Giới thiệu DefaultModelBinder (28)
      • 4.2. Giới thiệu Model Binding (Mô hình liên kết) (28)
  • BÀI 4: TẠO VIEW (31)
    • 1. Khái niệm View (31)
    • 2. Tạo View (0)
      • 2.1. Các loại View (31)
      • 2.2. Tạo View (32)
    • 3. Sử dụng Layout View (Master) với Razor (0)
      • 3.1. Giới thiệu _ViewStart (33)
      • 3.2. Tạo Layout View (33)
      • 3.3. Tạo View Page dùng Layout View (35)
      • 3.4. Tạo Partial View (36)
      • 3.5. Sử dụng Partial View (37)
    • 4. Tạo liên kết giữa các View (0)
    • 5. Chi tiết Razor (0)
      • 5.1. Các đặc điểm về Razor (38)
      • 5.2. Viết lệnh C# trong Razor View (40)
  • BÀI 5: TẠO CONTROLLER (41)
    • 1. ASP.NET MVC Routing (41)
      • 1.1. Giới thiệu rout (41)
      • 1.2. Cấu trúc (42)
    • 2. Controller (0)
      • 2.1. Khái niệm (43)
      • 2.2. Tạo controller (43)
      • 2.3. Action method (44)
  • BÀI 6: TRUYỀN DỮ LIỆU GIỮA CONTROLLER VÀ VIEW (47)
    • 1. Tổng quan (47)
    • 2. Sử dụng ViewBag (0)
    • 3. Sử dụng ViewData (0)
    • 4. Truyền dữ liệu giữa Controller và View (0)
      • 4.1. Kiểu cơ sở (49)
      • 4.2. Kiểu Generic collection (49)
      • 4.3. Strongly-typed Views (49)
      • 4.4. Dynamic (50)
  • BÀI 7: THIẾT KẾ VIEW BẰNG HTML HELPERS (52)
    • 1. Giới thiệu (52)
    • 2. Các loại HTML Helper (0)
      • 2.1. Rendering (52)
      • 2.2. HTML Form (54)
      • 2.3. Input (55)
      • 2.4. Strongly-typed (55)
      • 2.5. Template (56)
    • 3. Cập nhật dữ liệu trên form (0)
  • BÀI 8: HIỂN THỊ DỮ LIỆU TRÊN WEB GRID (58)
    • 2. Các bước tạo (0)
    • 3. Định dạng dữ liệu (0)
    • 4. Phân trang (0)
    • 5. Sắp xếp dữ liệu (0)
  • BÀI 9: KIỂM TRA DỮ LIỆU TRÊN TRANG WEB (62)
    • 1. Data Annotations (62)
      • 1.2. Cú pháp chung (62)
    • 2. Chú thích dữ liệu (0)
    • 3. Kiểm tra dữ liệu với Validation Annotations (0)
      • 3.1. Bắt buộc nhập (64)
      • 3.2. Kiểm tra độ dài chuỗi (64)
      • 3.3. Kiểm tra miền giá trị (65)
      • 3.4. So sánh giá trị (65)
      • 3.5. Kiểm tra kiểu dữ liệu (65)
      • 3.6. Kiểm tra dữ liệu chỉ đọc (66)
      • 3.7. Kiểm tra mẫu email (66)
      • 3.8. Kiểm tra theo biểu thức có quy tắc (66)
      • 3.9. Hiển thị lỗi trên trang web (66)
    • 4. Giám sát lỗi trong controller (0)
      • 4.1. Thuộc tính IsValid của ModelState (67)
      • 4.2. Giám sát lỗi phía Server (68)
  • BÀI 10: TRIỂN KHAI ỨNG DỤNG (69)
    • 1. Custom Route (69)
      • 1.1. Đặc điểm của ASP.NET MVC Routing (69)
      • 1.2. Tạo Routes tùy biến (69)
    • 2. Xuất bản ứng dụng localhost (0)
      • 2.1. Cài đặt IIS (70)
      • 2.2. Publish ứng dụng (71)
      • 2.3. Chèn ứng dụng web trên IIS (72)
    • 3. Xuất bản ứng dụng lên Internet (0)
      • 3.1. Đăng ký tên miền, thuê hosting (73)
      • 3.2. Upload CSDL (73)
      • 3.3. Cấu hình web.config (74)
      • 3.4. Upload web (74)
  • TÀI LIỆU THAM KHẢO (75)

Nội dung

o Là các thành phần xử lý tương tác với người dùng, làm việc với Model, chọn một View thích hợp để hiển thị thông tin giao diện người dùng o Trong một ứng dụng MVC, View hiển thị thông t[r]

TỔNG QUAN VỀ ASP.NET MVC

Mô hình MVC

Model View Controller là một mô hình kiến trúc theo hướng đối tượng, cho phép người phát triển tách một ứng dụng thành 3 thành phần chính:

 Model: thành phần đại diện cho dữ liệu của ứng dụng, bao gồm cả chức năng kiểm tra tính hợp lệ của dữ liệu.

 View: thành phần đảm trách việc hiển thị dữ liệu và các thành phần trong giao diện người dùng.

Controller là thành phần chịu trách nhiệm tiếp nhận và xử lý các yêu cầu từ người dùng gửi đến ứng dụng, đồng thời đóng vai trò điều phối công việc giữa View và Model.

 Việc phát triển ứng dụng, nâng cấp, bảo trì và thử nghiệm trở nên đơn giản và dễ dàng hơn.

Hình 1.1 Mô hình 3 thành phần của MVC

1.2 Ưu và nhược điểm Ưu điểm

Phát triển phần mềm chuyên nghiệp yêu cầu phân chia công việc thành các nhóm chuyên môn khác nhau, bao gồm nhóm thiết kế, nhóm lập trình và nhóm tổ chức dữ liệu Sự phân công này giúp tối ưu hóa quy trình phát triển, nâng cao chất lượng sản phẩm và đảm bảo tiến độ dự án.

 Giúp phát triển ứng dụng nhanh, đơn giản, dễ dàng nâng cấp

Bảo trì hệ thống trở nên dễ dàng hơn nhờ vào việc phân chia thành các lớp riêng biệt Mỗi thành phần có thể được thay thế mà không ảnh hưởng đến toàn bộ ứng dụng, chỉ tác động đến lớp gần kề, giúp tối ưu hóa quy trình bảo trì.

 Mở rộng: việc thêm chức năng vào từng lớp sẽ dễ dàng hơn.

 Thích hợp với các dự án vừa và lớn

 Mất nhiều thời gian trong quá trình phát triển

 Mấ thời gian trung chuyển dữ liệu giữa các lớp

1.3 Lý do nên làm trên mô hình MVC

Mô hình MVC phân chia ứng dụng thành ba thành phần chính: Model, View và Controller, giúp các nhà phát triển dễ dàng tạo ra nhiều View và Controller cho các Model mà không cần lo lắng về việc thay đổi thiết kế của Model.

 Giúp cho việc duy trì, di chuyển và tổ chức ứng dụng dễ dàng hơn.

Đối với những người mới, việc phát triển ứng dụng theo mô hình MVC có thể trở nên phức tạp và tốn kém, tương tự như việc thực hiện một dự án lớn Tuy nhiên, "bí mật" của MVC không chỉ nằm ở việc viết mã, mà chính là ở khả năng duy trì và quản lý mã nguồn sau khi hoàn thành.

 Cho phép sửa code mà không ảnh hưởng nhiều đến các thành phần khác.

 Cho phép làm việc nhóm trở nên dễ dàng hơn vì mỗi nhóm sẽ làm việc dựa trên thế mạnh của mình.

 Nhóm View: chịu trách nhiệm về xây dựng giao diện tương tác với người dùng

 Nhóm Model: chịu trách nhiệm về việc xây dựng các lớp xử lý trên dữ liệu

Nhóm Controller đóng vai trò quan trọng trong việc quản lý và điều phối các luồng của ứng dụng, đảm nhận nhiệm vụ xử lý các yêu cầu từ người dùng, tương tác với các Model để lấy dữ liệu, và lựa chọn View phù hợp để hiển thị thông tin một cách hiệu quả.

ASP.NET MVC

2.1 ASP.NET MVC là gì?

 ASP.NET MVC là một Framework hỗ trợ đầy đủ cho việc xây dựng ứng dụng web ASP.NET theo mô hình MVC.

ASP.NET MVC, giống như ASP.NET Web Forms, được phát triển dựa trên ASP.NET Framework, cho phép các lập trình viên sử dụng các API từ ứng dụng ASP.NET Web Forms truyền thống trong ứng dụng ASP.NET MVC.

 Trong ASP.NET MVC, nhiều cải tiến về ASP.NET đã được đưa vào Framework.

Mẫu thiết kế này nhằm mục đích cô lập xử lý nghiệp vụ khỏi giao diện người dùng, giúp nâng cao khả năng bảo trì, cải tiến và kiểm thử Việc này góp phần làm cho ứng dụng có cấu trúc gọn gàng hơn.

 MVC Framework được định nghĩa trong namespace System.Web.Mvc. 2.2 Kiến trúc

Hình 1.2 Mô hình kiến trúc 3 thành phần trong MVC

Models là các thành phần chính trong ứng dụng, chịu trách nhiệm đọc và ghi dữ liệu, lưu trữ thông tin và trạng thái của các đối tượng Tất cả các nghiệp vụ logic đều được thực hiện tại Model, nơi dữ liệu nhập từ người dùng qua View sẽ được kiểm tra trước khi lưu vào cơ sở dữ liệu Việc truy xuất, xác nhận và lưu trữ dữ liệu hoàn toàn thuộc về Model.

Views là các thành phần chịu trách nhiệm hiển thị thông tin cho người dùng thông qua giao diện Các thông tin cần hiển thị trên Views được tạo ra từ các thành phần Models trong mô hình dữ liệu.

Controllers là các thành phần quan trọng trong ứng dụng MVC, chúng xử lý tương tác với người dùng và làm việc với Model để chọn View phù hợp cho việc hiển thị thông tin giao diện Trong mô hình MVC, View chỉ đảm nhiệm việc hiển thị thông tin, trong khi Controller chịu trách nhiệm điều khiển dòng nhập xuất của người dùng.

2.3 Quá trình xử lý yêu cầu

Một trong những khái niệm quan trọng nhất để hiểu về ứng dụng MVC là không có mối quan hệ trực tiếp giữa một yêu cầu và một tập tin vật lý trên Web Server Trong ứng dụng ASP.NET Web Forms truyền thống, mỗi yêu cầu được chuyển đổi thành một lời gọi đến một tập tin cụ thể, ví dụ như khi truy cập vào URL http://myapp/mypage.aspx, Web Server sẽ tìm kiếm và xử lý tập tin mypage.aspx để trả về kết quả HTML Ngược lại, trong ứng dụng MVC, khi nhận được yêu cầu như http://myapp/product/list, một thành phần gọi là “routing engine” sẽ so sánh yêu cầu với các route đã được định nghĩa.

 Route sẽ xác định các yêu cầu bằng cách sử dụng một chuỗi nền, thiết lập Controller và phương thức bên trong Controller cần xử lý yêu cầu.

Khi Route được xác định, công cụ route sẽ tạo ra bộ giám sát yêu cầu, từ đó sinh ra các đối tượng Controller để xử lý yêu cầu, trong đó Controller là sản phẩm và phương thức xử lý là danh sách.

Hình 1.3 Quá trình xử lý yêu cầu của MVC

Tiếp tục hỗ trợ các tính năng trong ASP.NET, bao gồm khả năng sử dụng các tập tin ASPX, ASCX, và Master như là các thành phần View Đồng thời, đảm bảo hỗ trợ đầy đủ các tính năng bảo mật của ASP.NET.

The article discusses key components of web application security and architecture, including Forms/Windows authentication, URL authorization, and the use of Membership and Roles It emphasizes the importance of output and data caching, session/profile state management, and a robust configuration system Furthermore, it highlights the significance of a well-defined provider architecture, which facilitates clear relationships among components and enables Test Driven Development (TDD) practices for improved software testing and quality assurance.

Bạn có thể thực hiện kiểm thử đơn vị trong ứng dụng mà không cần phải khởi động Controllers cùng với tiến trình của ASP.NET Hơn nữa, bạn có thể sử dụng bất kỳ framework kiểm thử đơn vị nào như NUnit, MBUnit, hay MS Test để tiến hành kiểm thử.

 Có khả năng mở rộng ứng dụng, mọi thứ trong MVC được thiết kế để dễ thay thế, dễ dàng tùy biến.

 Ánh xạ URL mạnh mẽ, cho phép xây dựng ứng dụng với URL gọn gàng, thân thiện với các Search Engine

 Không sử dụng mô hình PostBack từ giao diện gửi đến Server Thay vào đó, chủ động đưa những PostBack từ View đến thẳng Controller tùy ý.

 Không còn ViewState hay Page Lifecycle tồn tại trong mô hình MVC

Hỗ trợ công cụ tạo View cho phép người dùng chọn công cụ tạo View phù hợp Trong hộp thoại New Project, người dùng có thể xác định View Engine mặc định cho dự án của mình, giúp tối ưu hóa quá trình phát triển Ngoài ra, có nhiều loại View Engine khác nhau để lựa chọn, đáp ứng nhu cầu đa dạng của các dự án.

 Hay mọt View Engine nguồn mở như Spark, Nhaml, Ndjango.

ASP.NET MVC Framework sở hữu một bộ máy ánh xạ URL mạnh mẽ, cho phép định tuyến linh hoạt giữa các URL và Controller Nhờ vào các quy luật cài đặt đường đi, ASP.NET MVC có thể xác định chính xác Controller và phương thức (Action) cần thực thi Hơn nữa, framework này còn có khả năng phân tích URL, chuyển đổi các thông số trong URL thành các tham số trong lời gọi đến phương thức của Controller.

Model Binding là một tính năng nổi bật của ASP.NET MVC, cho phép lập trình viên nhận đối tượng tùy chỉnh như một tham số trong phương thức Nhờ vào Model Binding, các nhà phát triển có thể tập trung vào việc triển khai logic nghiệp vụ mà không cần lo lắng về việc ánh xạ dữ liệu từ người dùng sang các đối tượng NET.

Tính năng Bunding được áp dụng mặc định, giúp người phát triển không cần phải gọi các script hoặc tập tin CSS riêng biệt, vì tất cả sẽ được đóng gói và nén lại một cách tự động.

Filters trong ASP.NET MVC là một tính năng mạnh mẽ, giúp kiểm tra tính hợp lệ trước khi gọi phương thức hành động hoặc sau khi thực hiện Chúng hỗ trợ quản lý quy trình xử lý yêu cầu và cải thiện hiệu suất ứng dụng.

TẠO ỨNG DỤNG WEB ASP.NET MVC

Thao tác tạo

 Tạo mới project, chọn NET Framework, thư mục và tên project theo hộp thoại dưới rồi chọn OK

Hình 2.1 Tạo ứng dụng ASP.NET

 Chọn MVC trong hộp thoại Select a template, chọn Change Authentication

Hình 2.2 Chọn mô hình MVC cho ứng dụng web

Hình 2.3 Chọn loại chứng thực quản lý người dùng

Cấu trúc thư mục của ứng dụng ASP.NET MVC gồm 3 thực mục chính:

 Controllers: lưu trữ các class đóng vai trò Controller

 Models: lưu trữ các class Model

 Views: lưu trữ các View

 Content: chứa các tập tin CSS, hình ảnh liên quan đến giao diện

 Scripts: chứa các thư viện Javascript, jquery

 App_Start: chứa các tập tin liên quan đến việc cấu hình cho các tính năng như: routes, filters, bundles

 App_Data: lưu trữ tập tin dữ liệu XML hoặc local database, SQLite

 Bin: lưu trữ các compiled của ứng dụng

4 Phân biệt ASPX và Razor View Engine

Cả Master Page và User Control đều được sử dụng để hiển thị giao diện trên trình duyệt web, với khái niệm Layout (View kế thừa Layout) và PartialView (subView) được định nghĩa rõ ràng.

ASPX cho phép sử dụng Master Page và User Control, ngay cả khi chúng chỉ hiển thị dữ liệu mà không xử lý Điều này giúp các lập trình viên chưa quen với phong cách MVC dễ dàng hơn trong việc phát triển Bên cạnh đó, subView cũng có thể được sử dụng để thay thế User Control, giúp xử lý dữ liệu từ action một cách hiệu quả.

 Razor: được hỗ trợ mạnh hơn về Javascript, tùy chỉnh linh hoạt giữa code C# với HTML, linh hoạt trong Layout và subView (PartialView)

 Cú pháp HTML Helpers trong ASPX

 Cú pháp HTML Helper trong Razor

@các_lệnh_được_viết_ở_đây

Ví dụ: tạo một TextBox có Id là txtFirstName

//Các lệnh C# được viết tại đây

 Biểu thức Inline: bắt đầu bằng @

@DateTime.Now.ToString(“dd/MM/yyyy”)

 Khai báo biến bằng từ khóa var

@foreach (var x in Request.ServerVariables) {

  • @x
  • } o while

     Tập tin có phần mở rộng là cshtml

    6 Tạo Web Page đơn giản với mã Razor

    Click chuột phải lên project  Add  New Item…

    Hình 2.4 Tạo web page Razor

    Click chuột phải lên project  Manage NuGet Packages

    Chọn Online  nuget.org trong cây bên trái

    Nhập entity framework vào hộp tìm kiếm

    Chờ Magage NuGet Packages hiển thị kết quả rồi click chuột lên nút Install tại dùng EntityFramework trong danh sách để cài đặt.

    Hình 2.5 Tìm kiếm và cài đặt Entity Framework cho ứng dụng

    Bài 2.1: Tạo ứng dụng ASP.NET MVC có tên Bookstore.

    Bài 2.2 Sử dụng vòng lặp tạo nội dung cho trang chủ.

    Bài 2.3 Sử dụng vòng lặp tạo nội dung cho trang chủ.

    Sản phẩm 1 Sản phẩm 2 Sản phẩm 3 Sản phẩm 4

    Sản phẩm 5 Sản phẩm 6 Sản phẩm 7 Sản phẩm 8

    Sản phẩm 9 Sản phẩm 10 Sản phẩm 11 Sản phẩm 12

    Bài 2.2 Sử dụng vòng lặp for hoặc foreach.

    Bài 2.3 Sử dụng vòng lặp for hoặc foreach, kết hợp với các thẻ HTML tạo table.

    Cài đặt Entity Framework

    Bài này giúp HSSV biết rõ về Model, kỹ năng tạo Model cho ứng dụng.

     Trình bày khái niệm và công dụng của Model

     Tạo được các Data Model với EF

     Lập trình được các hàm đọc và cập nhật dữ liệu thông qua Model

     Cẩn thận, thực hiện đúng các bước tạo Entity Data Model, khai báo đúng thông tin kết nối đến nguồn dữ liệu

    Là thành phần quan trọng trong ứng dụng, nó có chức năng truy cập và cung cấp dữ liệu từ một nguồn dữ liệu cụ thể.

     Lưu trữ thông tin, trạng thái của các đối tượng.

     Tất cả các nghiệp vụ logic đều được thực thi ở Model.

     Một model class trong ứng dụng ASP.NET MVC không trực tiếp xử lý đầu vào từ trình duyệt, cũng không tạo ra HTML cho trình duyệt.

     Dữ liệu nhập vào từ người dùng thông qua View để kiểm tra ở Model trước khi lưu vào CSDL.

     Model có thể được phân làm 3 loại: Data Model, Business Model và View Model với nhiệu vụ cụ thể khác nhau.

     Các đối tượng trong Data Model đại diện cho các class tương tác với một CSDL Các class được tạo ra bởi những công cụ như Entity Framework (EF).

     Các class này có thể được tạo ra từ phương pháp Database First hoặc Code first Ngoài ra, cũng có thể sử dụng ADO.NET để tạo thủ công.

    XÂY DỰNG MODEL

    Các loại Model

    Bài này giúp HSSV biết rõ về Model, kỹ năng tạo Model cho ứng dụng.

     Trình bày khái niệm và công dụng của Model

     Tạo được các Data Model với EF

     Lập trình được các hàm đọc và cập nhật dữ liệu thông qua Model

     Cẩn thận, thực hiện đúng các bước tạo Entity Data Model, khai báo đúng thông tin kết nối đến nguồn dữ liệu

    Là thành phần quan trọng của ứng dụng, chức năng chính của nó là truy cập dữ liệu từ nguồn dữ liệu và cung cấp thông tin trở lại cho nguồn đó.

     Lưu trữ thông tin, trạng thái của các đối tượng.

     Tất cả các nghiệp vụ logic đều được thực thi ở Model.

     Một model class trong ứng dụng ASP.NET MVC không trực tiếp xử lý đầu vào từ trình duyệt, cũng không tạo ra HTML cho trình duyệt.

     Dữ liệu nhập vào từ người dùng thông qua View để kiểm tra ở Model trước khi lưu vào CSDL.

     Model có thể được phân làm 3 loại: Data Model, Business Model và View Model với nhiệu vụ cụ thể khác nhau.

     Các đối tượng trong Data Model đại diện cho các class tương tác với một CSDL Các class được tạo ra bởi những công cụ như Entity Framework (EF).

     Các class này có thể được tạo ra từ phương pháp Database First hoặc Code first Ngoài ra, cũng có thể sử dụng ADO.NET để tạo thủ công.

    Các lớp trong mô hình kinh doanh thường đảm nhận chức năng kiểm tra quy tắc nghiệp vụ và xử lý nghiệp vụ, chẳng hạn như tính toán chi phí vận chuyển cho giỏ hàng dựa trên trọng lượng sản phẩm Để thực hiện các nhiệm vụ này, các lớp trong mô hình kinh doanh có khả năng tương tác với các lớp trong mô hình dữ liệu nhằm đọc và lưu trữ thông tin trong cơ sở dữ liệu.

     Các class trong View model cung cấp thông tin được truyền vào từ controller đến view để view biết được render những gì cho trình duyệt.

    Ví dụ: một class có thể chứa thông tin sản phẩm, view sử dụng class này để hiển thị tên sản phẩm, giá bán và hình ảnh.

    Chức năng của một lớp view model không phải là xử lý logic, mà là lưu trữ dữ liệu cùng với siêu dữ liệu tùy chọn, nhằm hỗ trợ việc render view một cách chính xác.

     View model cũng được sử dụng khi người dùng yêu cầu từ một view đã được render trước đó (ví dụ: khi submit một form liên hệ)

    3.1 Tạo CSDL bookstore trong project

    Bước 1: click chuột phải lên thư mục App_Data của project.

    Bước 2: chọn Add  New Item… Xuất hiện hộp thoai.

    Bước 3: Chọn Data, SQL Server Database rồi đặt tên cho CSDL rồi chọn Add.

    Bước 4: thiết kế cấu trúc và nhập dữ liệu cho các table theo yêu cầu.

    3.2 Tạo ADO.NET Entity Data Model

    Bước 1: tạo thư mục dtModels trong thư mục Models

    Bước 2: click chuột phải thư mục Models, chọn Add  ADO.NET Entity Dat Model

    Hình 3.1 Các bước tạo ADO.NET Entity Data Model

    Bước 3: đặt tên cho model rồi chọn OK

    Hình 3.2 Hộp thoại đặt tên cho Model

    Bước 4: chọn Code First from database như hình bên dưới rồi chọn Next

    Bước 5: đặt tên thông tin kết nối để lưu vào Web.config

    Hình 3.3 Đặt tên cho chuỗi kết nối

    Bước 6: đánh dấu chọn các object trong CSDL rồi chọn Finish.

    Hình 3.4 Chọn các đối tượng trong CSDL

    Kết quả có được sau khi hoàn tất tạo ADO.NET Entity Data Model

    Hình 3.5 Các lớp đối tượng trong model

    Model binder trong MVC giúp ánh xạ dễ dàng các giá trị từ form thành kiểu dữ liệu của NET Framework, cho phép truyền kiểu dữ liệu này đến phương thức action như một tham số.

    Các model binder hoạt động như công cụ chuyển đổi kiểu dữ liệu, cho phép chuyển đổi các yêu cầu HTTP thành các đối tượng được truyền vào phương thức action, đồng thời cung cấp thông tin về ngữ cảnh của controller hiện tại.

     Model binder mặc định trong MVC có tên là DefaultModelBinder.

    The framework is capable of implementing link models with most types of the NET Framework, including traditional classes, arrays, IList, ICollection, and even IDictionary objects.

    4.2 Giới thiệu Model Binding (Mô hình liên kết)

    Model Binding là một tính năng mạnh mẽ trong ASP.NET MVC, cho phép lập trình viên dễ dàng nhận đối tượng tùy biến như một tham số trong phương thức Tính năng này giúp tập trung vào việc triển khai logic ứng dụng mà không cần phải lo lắng về việc ánh xạ dữ liệu người dùng với các đối tượng NET.

    Khi các input name trong form được đặt giống với các property name của đối tượng dữ liệu mà nó liên kết

    Tính năng model binding trong ASP.NET MVC giúp ánh xạ các giá trị từ form đến các đối tượng tương ứng với tham số của phương thức action, từ đó đơn giản hóa quá trình xử lý dữ liệu trong ứng dụng.

    Ví dụ 2: tạo model class và thực hiện model binding đơn giản (nguồn dữ liệu là table của CSDL SQL Server)

     Model class: PhanLoaiController, gồm các action: Index, Create, Edit

     Các View tương ứng với action: Index, Create, Edit

     Xem, Thêm, Sửa dữ liệu từ CSDL

     Các View tương ứng với action trong PhanLoaiController class

    Bài 3.1 Khảo sát các tập tin bên trong thư mục dtModels, ghi lại tên class, các thuộc tính bên trong class  Nhận xét mối tương quan giữa các class bên trongADO.NET Entity Data Model với các table bên trong CSDL.

    Model Binder

    Hình 3.5 Các lớp đối tượng trong model

    Model binder trong MVC giúp ánh xạ dễ dàng các giá trị từ form thành kiểu dữ liệu của NET Framework, cho phép truyền kiểu dữ liệu này đến phương thức action như một tham số.

    Các model binder hoạt động như công cụ chuyển đổi kiểu dữ liệu, chuyển đổi các yêu cầu HTTP thành các đối tượng được truyền vào phương thức action, đồng thời cung cấp thông tin về ngữ cảnh của controller hiện tại.

     Model binder mặc định trong MVC có tên là DefaultModelBinder.

    The ability to implement a linking model with most types of the NET Framework is supported, including traditional classes, arrays, IList, ICollection, and even IDictionary objects.

    4.2 Giới thiệu Model Binding (Mô hình liên kết)

    Model Binding là một tính năng mạnh mẽ của ASP.NET MVC, cho phép lập trình viên nhận đối tượng tùy chỉnh như một tham số trong phương thức Tính năng này giúp tập trung vào việc triển khai logic ứng dụng mà không cần lo lắng về việc ánh xạ dữ liệu người dùng với các đối tượng NET.

    Khi các input name trong form được đặt giống với các property name của đối tượng dữ liệu mà nó liên kết

    Tính năng model binding trong ASP.NET MVC giúp ánh xạ các giá trị từ form vào các đối tượng tương ứng với tham số của phương thức action, hỗ trợ quá trình xử lý dữ liệu hiệu quả hơn.

    Ví dụ 2: tạo model class và thực hiện model binding đơn giản (nguồn dữ liệu là table của CSDL SQL Server)

     Model class: PhanLoaiController, gồm các action: Index, Create, Edit

     Các View tương ứng với action: Index, Create, Edit

     Xem, Thêm, Sửa dữ liệu từ CSDL

     Các View tương ứng với action trong PhanLoaiController class

    Bài 3.1 Khảo sát các tập tin bên trong thư mục dtModels, ghi lại tên class, các thuộc tính bên trong class  Nhận xét mối tương quan giữa các class bên trongADO.NET Entity Data Model với các table bên trong CSDL.

    TẠO VIEW

    Tạo View

    Bài này cung cấp cho HSSV kiến thức và kỹ năng tạo giao diện các trang trong ứng dụng ASP.NET MVC.

     Trình bày công dụng của từng loại View

     Trình bày quy trình tạo View

     Tạo và sử dụng Layout View

     Tạo được Partial View, View Page và _ViewStart

     Cẩn thận xác định đúng vị trí cho RenderBody và RenderSection khi tạo Layout

     Nhớ chỉ định sử dụng Layout hoặc không sử dụng khi tạo View

     Tạo View tương ứng với Action tránh gây lỗi

     Hiển thị thông tin cho người dùng

    Nhận dữ liệu từ người dùng, gửi yêu cầu đến controller, và nhận phản hồi từ controller để hiển thị kết quả cho người dùng.

    View có định kiểu mạnh (strongly-typed view) nhận một kiểu đối tượng từ model như tham số trong phương thức action, mang lại nhiều lợi ích Đầu tiên, IntelliSense hỗ trợ trong Visual Studio giúp truy cập dễ dàng vào các thuộc tính và phương thức của lớp view model Thứ hai, tính năng automatic scaffolding cho phép Visual Studio tự động tạo ra view với thẻ chứa đầy đủ các trường và tùy chọn kiểm tra dữ liệu dựa trên khai báo thuộc tính trong lớp view model Cuối cùng, việc kiểm tra kiểu dữ liệu tại thời điểm biên dịch (compile-time type checking) giúp trình biên dịch phát hiện lỗi, nhờ vào khả năng nhận biết lớp view model và các thuộc tính của nó.

     Partial view: view có thể sử dụng trong những view khác (tương tự User Control trong ASP.NET Web Form)

    Layout view là một kiểu bố cục chung, tương tự như Master Page trong ASP.NET Web Form Khi sử dụng Razor View Engine, view khởi tạo sẽ là _ViewStart.cshtml, và layout view mặc định được khai báo trong file này.

    Bước 1: trong thư mục Views, click chuột phải lên thư mục chứa, chọn Add  View

    Hình 4.1 Các bước chọn để tạo View

    Bước 2: Khai báo các thuộc tính trong cửa sổ Add View

    Hình 4.2 Khai báo thuộc tính cho View

    Sử dụng Layout View (Master) với Razor

    View _ViewStart.cshtml sẽ được thực thi đầu tiên khi bắt đầu quá trình render của các trang view, đảm bảo rằng mọi đoạn mã trong _ViewStart.cshtml sẽ được thực hiện trước khi các view khác được xử lý.

     Thông thường, tập tin sẽ chứa đoạn code đầu tiên như sau:

    Bước 1: Trong thư mục Views, click chuột phải lên thư mục Shared, chọn Add

    Bước 2: Chọn và nhập thông tin theo hình bên dưới

    Hình 4.3 Tạo Layout View Page

     Layout view được tạo ra với cấu trúc cơ bản như sau:

    Hình 4.4 Thiết kế giao diện cho Layout

     Ta có thể xây dựng 1 layout cho website từ layout view này.

     Một số điểm cần lưu ý o Trong layout view sẽ chứa

     Các khai báo CSS, Script dùng chung cho các view sử dụng layout

     Phần thiết kế bố cục chung cho các view sử dụng nó o Trong thành phần body phải có lệnh

     Là nơi chứa phần thiết kế nội dung chính của từng view cụ thể

     Chỉ duy nhất một lệnh RenderBody trong một layout view

     Ý nghĩa: khai báo thêm những vùng thiết kế khác cho view tại các vị trí chỉ định sẵn trong layout

     Cú pháp: @RenderSection(string name, bool required)

    Trong đó: o name: tên sử dụng của section trong view o required: (true) bắt buộc phải sử dụng

    Ví dụ: Trong layout view có đoạn sau:

    3.3 Tạo View Page dùng Layout View

    Trong thư mục Views, click chuột phải lên thư mục chứa, chọn Add  View

    Hình 4.5 Tạo View dùng Layout Đoạn code có được

    Để khai báo sử dụng layout trong view, bạn có thể sử dụng cú pháp @{Layout = “Đường dẫn/TênLayout”; } để chỉ định layout cụ thể Nếu không muốn sử dụng layout, bạn có thể khai báo @{Layout = null; } Trong trường hợp không có khai báo nào, view sẽ tự động sử dụng layout mặc định được chỉ định trong file _ViewStart.cshtml.

     Sử dụng lệnh @section o Ý nghĩa: khai báo sử dụng section đã được định nghĩa trong layout view (lệnh RenderSection) o Cú pháp:

     name: tên của section đã khai báo trong layout view

    Trong thư mục Views, nhấp chuột phải vào thư mục mong muốn, chọn "Add" và sau đó chọn "View" Đánh dấu tùy chọn "Create as a partial view" và nhập các thông tin cần thiết như hình minh họa bên dưới.

    Hình 4.6 Khai báo thông tin cho Partial View

    Trong view muốn sử dụng dụng partial view, sử dụng các phương thức sau để chèn partial view:

     @Html.Partial(string partialViewName): render partial view thành một chuỗi HTML được mã hóa

     @Html.Partial(string partialViewName, object Model): có khai báo model của partial view

     @Html.RenderPartial(string name): render partial view bằng cách sử dụng HTML helper cụ thể

     @Html.RenderPartial(string name, object Model): có thiết lập thuộc tính Model cho model cụ thể).

     Lấy mã HTML cuối cùng của partial view và hiển thị trong view chứa nó.

    13 Tạo liên kết giữa các View

     Gọi đến action trong cùng controller

     Gọi đến action trong controller khác

    5.1 Các đặc điểm về Razor

    Việc hạn chế số lượng ký tự trong một tập tin giúp việc gõ code trở nên nhanh chóng, linh hoạt và rõ ràng Không cần chỉ ra rõ ràng khối code server trong văn bản HTML, vì bộ phân tích Razor đủ thông minh để suy ra điều này.

     Easy to Learn: dễ học

     Is not a new language: chỉ sử dụng cú pháp C# khết hợp với HTML

     Works with any Text Editor: làm việc với bất kỳ bộ soạn thảo văn bản nào

     Has great Intellisense: từ phiên bản Visual Studio 2010 và Visual Web Developer 2010 hỗ trợ đầy đủ tính năng intellisense cho Razor.

    Razor supports unit testing for views without the need for controllers or a web server, allowing for greater flexibility in testing It can be hosted by any unit test project, making it a versatile option for developers looking to implement effective testing strategies.

     URL Resolution: hỗ trợ cú pháp ~/

    Razor tự động xử lý các thuộc tính điều kiện mà không cần mã biện luận, đặc biệt là khi một thuộc tính có thể nhận giá trị null.

    Ví dụ: nội dung

    Nếu @myclass là null thì thuộc tính class sẽ không được render và kết quả sẽ là

    nội dung o Các câu lệnh điều kiện không chỉ hỗ trợ giá trị null mà còn có cả giá trị boolean

    Trong trường hợp @ViewBag.Checked có giá trị null hoặc false thì sẽ được render thành

    Ngược lại, nếu @ViewBag.Checked có giá trị true thì sẽ được render thành

     Render lệnh khai báo trong thẻ o Styles: @Styles.Render(“~/Content/css”) o Modernizr: @Scripts.Render(“~/bundles/modernirz”) o jquery: @Scripts.Render(“~/bundles/jquery”)

     khi muốn cập nhật phiên bản mới, chỉ cần download file về và chép vào thư mục Scripts và Content mà không cần phải chỉnh sửa code.

    5.2 Viết lệnh C# trong Razor View

    Bài 4.1 Tạo layout view cho website ThuongMaiDienTu

    Bài 4.2 Sử dụng partial view cho các vị trí Banner, Footer, Menu trong layout view

    Bài 4.3 Tạo các view (sử dụng layout view, thiết kế nội dung tĩnh) để hiển thịTrang chủ, Danh sách sản phẩm, Chi tiết sản phẩm.

    Chi tiết Razor

     Gọi đến action trong cùng controller

     Gọi đến action trong controller khác

    5.1 Các đặc điểm về Razor

    Việc hạn chế số lượng ký tự trong một tập tin giúp việc gõ code trở nên nhanh chóng, linh hoạt và rõ ràng Người dùng không cần phải chỉ định rõ ràng vị trí của khối code server trong văn bản HTML, vì bộ phân tích Razor có khả năng suy ra điều này một cách thông minh.

     Easy to Learn: dễ học

     Is not a new language: chỉ sử dụng cú pháp C# khết hợp với HTML

     Works with any Text Editor: làm việc với bất kỳ bộ soạn thảo văn bản nào

     Has great Intellisense: từ phiên bản Visual Studio 2010 và Visual Web Developer 2010 hỗ trợ đầy đủ tính năng intellisense cho Razor.

    Razor supports unit testing for views without the need for controllers or a web server, allowing for seamless integration into any unit testing project.

     URL Resolution: hỗ trợ cú pháp ~/

    Razor tự động xử lý các thuộc tính điều kiện mà không cần phải viết mã biện luận cho các thuộc tính có khả năng mang giá trị null, giúp đơn giản hóa quá trình lập trình.

    Ví dụ: nội dung

    Nếu @myclass là null thì thuộc tính class sẽ không được render và kết quả sẽ là

    nội dung o Các câu lệnh điều kiện không chỉ hỗ trợ giá trị null mà còn có cả giá trị boolean

    Trong trường hợp @ViewBag.Checked có giá trị null hoặc false thì sẽ được render thành

    Ngược lại, nếu @ViewBag.Checked có giá trị true thì sẽ được render thành

     Render lệnh khai báo trong thẻ o Styles: @Styles.Render(“~/Content/css”) o Modernizr: @Scripts.Render(“~/bundles/modernirz”) o jquery: @Scripts.Render(“~/bundles/jquery”)

     khi muốn cập nhật phiên bản mới, chỉ cần download file về và chép vào thư mục Scripts và Content mà không cần phải chỉnh sửa code.

    5.2 Viết lệnh C# trong Razor View

    Bài 4.1 Tạo layout view cho website ThuongMaiDienTu

    Bài 4.2 Sử dụng partial view cho các vị trí Banner, Footer, Menu trong layout view

    Bài 4.3 Tạo các view (sử dụng layout view, thiết kế nội dung tĩnh) để hiển thịTrang chủ, Danh sách sản phẩm, Chi tiết sản phẩm.

    TẠO CONTROLLER

    ASP.NET MVC Routing

     Có nhiệm vụ ánh xạ các yêu cầu từ trình duyệt đến action của controller cụ thể

    Utilizing a route table is essential for managing incoming requests in an application The route table is generated when the application is first launched and is configured within the Global.asax file During the Application_Start event, the RegisterRoutes() method is invoked from the RouteConfig class, which is located in the App_Start directory The relevant code can be found in both the Global.asax file and the RouteConfig.cs file.

     Cú pháp tổng quát: http://domain/controller/action/id

    When the application is launched for the first time, the Application_Start() method is invoked This method subsequently calls RegisterRoutes(), which establishes the route table By default, the route table contains a single route, known as Default, which maps to the structure {controller}/{action}/{id}.

     aciton: hành động tương ứng trong controller

     id: tham số của action

    Hình 5.1 Ánh xạ yêu cầu và action trong controller

     Nếu không có controller thì route sẽ ánh xạ mặc định là Home

     Nếu không có action thì route sẽ ánh xạ mặc định là Index

    Controller

     Như tên gọi của nó, controller điều khiển logic và hoạt động như là thành phần điều phối giữa view và model.

    Nhận yêu cầu từ người dùng qua các view, sau đó tương tác với model để thực hiện các hành động cụ thể và cuối cùng trả kết quả về cho view.

     Trong ứng dụng MVC, controller đảm trách việc điều khiển nhập xuất của người dùng.

     Click chuột phải lên thư mục Controllers, chọn Add  Controller…

     Khai báo các thông tin trong cửa sổ Add Controller o Controller name: tên controller o Scaffoding options

     Cửa sổ code phát sinh ứng với o Template: Empty MVC controller

     Một controller có thể có nhiều action method để xử lý cho các yêu cầu cần thiết

    Các tương tác của người dùng, như việc nhập URL vào trình duyệt, nhấp chuột vào một liên kết hoặc gửi một mẫu, thường có ánh xạ one-to-one, cho thấy mối liên hệ trực tiếp giữa hành động và kết quả.

    2.3.3 Kiểu giá trị trả về

    Hầu hết các phương thức action trong ASP.NET trả về một thể hiện của lớp được dẫn xuất từ ActionResult, lớp cơ sở cho tất cả các kết quả trả về Có nhiều loại kết quả khác nhau, tùy thuộc vào chức năng mà phương thức action thực hiện.

    Trong lập trình ASP.NET, phương thức View thường được sử dụng để trả về một thể hiện của lớp ViewResult, lớp này được kế thừa từ lớp ActionResult Mặc dù cả hai đều thực hiện chức năng tương tự, điểm khác biệt chính là ActionResult không cam kết trả về một View cụ thể Điều này cho phép lập trình viên linh hoạt thay đổi mã trong phương thức để trả về các đối tượng khác được dẫn xuất từ ActionResult mà không cần thay đổi định nghĩa ban đầu của phương thức.

    Ví dụ: o Các kiểu được dẫn xuất từ ActionResult

    Hình 5.1 Các kiểu dữ liệu của action

     Các kiểu dữ liệu cơ sở khác o string o int o bool o …

    2.3.4 Tạo view từ action method

    Click chuột phải bên trong định nghĩa của action method, chọn Add View

    Nhập các thông tin cho view (để tên mặc định trong View name).

    Câu 5.1 Tạo controller SanPham chứa các action (kèm theo các view tương ứng):

     DanhSach: hiển thị danh sách sản phẩm trong một nhóm

     ChiTiet: hiển thị chi tiết một sản phẩm

    Câu 5.2 Tạo controller Menu chứa các action (kèm theo các partial view tương ứng)

     Nhom: liên kết đến view hiển thị danh sách sản phẩm trong một nhóm

     PhanLoai: danh sách menu nhóm trong một phân loại

     Index: danh sách menu của các phân loại

    TRUYỀN DỮ LIỆU GIỮA CONTROLLER VÀ VIEW

    Tổng quan

    Khi truyền thông tin từ action đến view trong ASP.NET, có ba phương pháp chính để lựa chọn: sử dụng từ điển ViewData, áp dụng ViewBag, hoặc sử dụng Strong-typed View với một đối tượng view model.

    ViewBag và ViewData cho phép thêm thông tin, bao gồm các kiểu dữ liệu cơ bản như số nguyên và các đối tượng phức tạp, để có thể truy xuất từ view nhằm tạo ra HTML.

    ViewBag là một đối tượng kiểu Dynamic được giới thiệu từ NET Framework 4.0, cho phép gán các thuộc tính tùy ý mà không cần định nghĩa trước Ví dụ, bạn có thể sử dụng ViewBag.Title hoặc ViewBag.Message để lưu trữ thông tin mà không gặp phải giới hạn về kiểu dữ liệu.

     ViewBag là đối tượng mặc định được truyền giữa Action và View

     Dùng để truyền dữ liệu giữa controller và view nhưng thông qua ViewDataDictionary chứa một cặp Key-Value.

     View có thể thay đổi giá trị của ViewData và gởi giá trị đã được thay đổi đến controller.

     Cú pháp: ViewData[“key”]=

     So sánh giữa ViewBag và ViewData o Giống nhau:

     Giúp duy trì dữ liệu khi di chuyển từ controller đến view

     Được sử dụng để truyền dữ liệu từ controller đến view tương ứng

    Giá trị sẽ là null khi xảy ra điều hướng, vì mục tiêu của nó là cung cấp phương thức giao tiếp giữa controller và view Đây là một cơ chế truyền thông trong các lời gọi ở Server.

    Hình 6.1 So sánh giữa ViewBag và ViewData

    18 Truyền dữ liệu giữa Controller và View

    Xem lại 2 ví dụ về ViewBag và ViewData.

    Khai báo định hướng @model và sử dụng đối tượng Model để truy xuất các thuộc tính.

    Thật ra, đoạn code trên đã thiết lập giá trị của thuộc tính ViewData.Model cho giá trị được truyền vào phương thức View.

    Ví dụ 2: trong một view khác, ta muốn tạo liên kết đến view ThongTin.cshtml

    Ví dụ 2: không hỗ trợ Intellisense

    Ví dụ 3: hỗ trợ Intellisense

    Bài 6.1 Hoàn chỉnh truyền dữ liệu giữa giữa controller và view cho các bài tập ở bài trước.

    Truyền dữ liệu giữa Controller và View

    Hình 6.1 So sánh giữa ViewBag và ViewData

    18 Truyền dữ liệu giữa Controller và View

    Xem lại 2 ví dụ về ViewBag và ViewData.

    Khai báo định hướng @model và sử dụng đối tượng Model để truy xuất các thuộc tính.

    Thật ra, đoạn code trên đã thiết lập giá trị của thuộc tính ViewData.Model cho giá trị được truyền vào phương thức View.

    Ví dụ 2: trong một view khác, ta muốn tạo liên kết đến view ThongTin.cshtml

    Ví dụ 2: không hỗ trợ Intellisense

    Ví dụ 3: hỗ trợ Intellisense

    Bài 6.1 Hoàn chỉnh truyền dữ liệu giữa giữa controller và view cho các bài tập ở bài trước.

    THIẾT KẾ VIEW BẰNG HTML HELPERS

    Các loại HTML Helper

    Bài này cung cấp cho HSSV kiến thức và kỹ năng sử dụng các HTML Helper để thiết kế giao diện và hiển thị dữ liệu trên view.

     Biết công dụng các loại HTML Helper

     Thiết kế View bằng các HTML Helper

     Lớp HTML Helper cung cấp các phuoơng thức hỗ trợ cho việc phát sinh ra tag Form và các HTML control trong view.

     Thuộc namespace System.Web.Mvc.Html

     Phát sinh ra những liên kết và xây dựng những thành phần giao diện tái sử dụng như partial view Gồm các phương thức (cơ bản) bên dưới.

     Action(“Action”, “Controller”): gọi action method và trả về chuỗi HTML Rất hữu ích khi dữ liệu hiển thị một partial view độc lập với view model.

     ActionLink(“Văn bản hiển thị”, “action”, [“controller”, routeValues, htmlAttributes]): trả về tag

    Thẻ chứa liên kết ảo đến một hành động cụ thể, với routeValues là các tham số của phương thức hành động, được phân cách bằng dấu phẩy Ngoài ra, htmlAttributes cho phép thiết lập các thuộc tính cho thẻ HTML được tạo ra tương ứng.

     RenderAction(“action”, “controller”, routeValues): tương tự như Action() nhưng nhanh hơn Action() vì nó được ghi trực tiếp vào HTTP response.

     Partial(“Tên PartialView”): render một partial view thành một chuỗi

     RenderPartial(“Tên PartialView”): tương tự Partial() nhưng được ghi trực tiếp vào HTTP response thay vì trả về một chuỗi Cú pháp sử dụng cũng khác nhau.

     Cung cấp các phương thức hỗ trợ tạo form và các điều khiển trong form. Gồm các phương thức bên dưới.

    Phương thức BeginForm() tạo ra thẻ và khi người dùng gửi yêu cầu, nó sẽ gửi đến action của controller liên kết với view để xử lý Nếu được sử dụng trong khối lệnh của using, thẻ sẽ tự động được sinh ra khi kết thúc khối lệnh, do đó không cần gọi Html.EndForm().

    Cả 2 cách dùng trên đều render kết quả như nhau.

    The HTML.BeginForm method allows users to submit a form, sending a request to a specified action of a controller using the defined FormMethod, which can be either FormMethod.Get or FormMethod.Post.

     Html.BeginForm(“action”, “controller”, FormMethod, htmlAttributes): tương tự như trên nhưng bổ sung thêm các thuộc tính cho form.

     TextBox(“Tên field”, “giá trị”, htmlAttributes): render tag có type là “text”.

     Password(): tương tực TextBox() nhưng có type=“password”.

     Hidden(): tương tự TextBox() nhưng có type là “hidden”.

     TextArea(): tương tự TextBox() nhưng có bổ sungmặc định về thuộc tính cols và rows (là 2).

     CheckBox(“Tên field”, “Giá trị mặc định”, htmlAttributes): render về tag

    có type là “checkbox”.

     RadioButton(): tương tự CheckBox() nhưng có type là “radio”.

     DropDownList(): render khối tag

     ListBox(): tương tự DropDownList() nhưng bổ sung thuộc tính multiple. 2.4 Strongly-typed

    Các HTML Helpers không có hậu tố "For" thường được gọi là untyped HTML Helper Với loại này, việc kiểm tra thuộc tính binding sẽ không được thực hiện trong quá trình biên dịch Ví dụ về các untyped HTML Helper bao gồm: Display(), DisplayName(), và Editor().

    HTML Helpers có hậu tố "For" được gọi là Strongly-typed helper, giúp phát hiện lỗi trên view khi có sự thay đổi thuộc tính trong controller Một số phương thức cơ bản bao gồm: DisplayFor() để hiển thị giá trị của thuộc tính, DisplayNameFor() để hiển thị tên thân thiện của thuộc tính, LabelFor() để hiển thị tên thân thiện và render tag , DropDownListFor() để render bộ tag , và EditorFor() cùng TextBoxFor() để render tag với type là “text”.

    Ví dụ: tạo điều khiển danh sách chọn Nhóm sản phẩm.

    DisplayForModel() và EditorForModel() là hai phương thức giúp tạo ra HTML cho toàn bộ mô hình đối tượng, cho phép lập trình viên tiết kiệm thời gian khi không cần xây dựng từng điều khiển cho view model Thay vào đó, chỉ cần sử dụng một dòng lệnh đơn giản trong view: @Html.EditorForModel().

    Bằng cách sử dụng các helper, chúng ta có thể bổ sung thuộc tính mới cho đối tượng mô hình và ngay lập tức quan sát sự thay đổi trong giao diện người dùng mà không cần chỉnh sửa gì trong view.

     Cú pháp sử dung cũng tương tự DisplayFor() và EditorFor().

     Khuyết điểm chung: tùy biến giao diện trên view sẽ không thực hiện được đối với từng HTML control.

    20 Cập nhật dữ liệu trên form

    Bước 1: tạo action method cập nhật dữ liệu trong controller.

     Phương thức này gọi là CRUD method (Create, Read, Update, Delete)

    Có hai phương pháp để tạo mã: phương pháp thủ công (manual), trong đó bạn viết mã từ đầu đến cuối, và phương pháp sử dụng công cụ wizard, cho phép tự động sinh mã khi tạo controller Sau đó, bạn có thể chỉnh sửa mã trong controller để phù hợp hơn, sử dụng các phương thức cập nhật của Entity Framework và thực hiện truy vấn bằng LINQ.

    Hình 7.1 Khai báo thông tin tạo controller wizard CRUD

    Bước 2: Tạo giao diện người dùng nhập dữ liệu để submit gửi yêu cầu đến action tương ứng.

     Nếu tạo controller thủ công thì phải tạo view thủ công từ A  Z (sử dụng HTML Form phù hợp)

     Nếu tạo controller bằng wizard thì chỉ cần hiệu chỉnh từng view đã được tạo sẵn.

    Cập nhật dữ liệu trên form

     Biết công dụng của WebGrid

     Thiết kế được View hiển thị dữ liệu trên WebGrid

     Hiển thị dữ liệu theo dạng tabular (dòng, cột), render bộ tag .

     Hỗ trợ định dạng, phân trang và sắp xếp dữ liệu.

     Hình 8.1 Giao diện sử dụng WebGrid

     Bước 1: Tạo action method, trả về một danh sách.

     Bước 2: Tạo view tương ứng, code HTML như sau:

    HIỂN THỊ DỮ LIỆU TRÊN WEB GRID

    Sắp xếp dữ liệu

    This article equips students with essential knowledge and skills for utilizing Data Annotation and Validation techniques to verify input data and display errors on forms effectively.

     Biết công dụng của Data Annotation và Validataional

     Sử dụng được Data Annotation trong Model để hiện thị các label trên View

     Sử dụng được Validation trong Model để ràng buộc dữ liệu nhập và hiển thị lỗi trên View

    Data Annotations là các thuộc tính đi kèm với dữ liệu trong mô hình, giúp tạo tên thân thiện cho thuộc tính, thiết lập kiểm tra tính hợp lệ của dữ liệu và xác định cách hiển thị dữ liệu khi tạo Html trên view, đặc biệt khi kết hợp với các Html helper để render.

     Thuộc namespace System.ComponentModel.DataAnnotaions

     Lưu ý: có một vài thuộc tính không thuộc namespace này như: HiddenInput, Remote, ReadOnly, …

    KIỂM TRA DỮ LIỆU TRÊN TRANG WEB

    Data Annotations

    Data Annotations là các thuộc tính gắn liền với dữ liệu trong model, giúp tạo tên thân thiện cho thuộc tính, thiết lập các kiểm tra tính hợp lệ và xác định cách hiển thị dữ liệu khi tạo Html trên view, đặc biệt khi sử dụng cùng với các Html helper để render.

     Thuộc namespace System.ComponentModel.DataAnnotaions

     Lưu ý: có một vài thuộc tính không thuộc namespace này như: HiddenInput, Remote, ReadOnly, …

     Tên thân thiện khi hiển thị trên view

     Định dạng dữ liệu: thường dùng với kiểu ngày hoặc số

    DataFormatString=“Biểu thức định dạng”)]

     Cho phép che đi field trong form cập nhật

     [ScaffoldColumn(true|false)] o Không phát sinh control trong view cập nhật (Create, Edit), thường dùng với các field tự động tăng hoặc field tính toán.

    2 Kiểm tra dữ liệu với Validation Annotations

    Validation Annotations là các thuộc tính của Data Annotations, tập trung vào việc thiết lập các kiểm tra tính hợp lệ cho dữ liệu đầu vào từ người dùng.

    These attributes enable the implementation of server-side data validation checks, while the framework also supports client-side validation.

     Để sử dụng một trong những thuộc tính này, chúng ta phải khai báo nó ngay phía trên thuộc tính dữ liệu trong model.

     Dùng thông báo của hệ thống

     Nội dung thông báo tùy biến

     [Required(ErrorMessage=“Nội dung thông báo”)]

     3.2 Kiểm tra độ dài chuỗi

     Quy định chiều dài chuỗi nhập vào

    Sử dụng thông báo của hệ thống để quy định độ dài tối đa cho chuỗi bằng cách áp dụng các thuộc tính như [StringLength(Độ dài tối đa)], [StringLength(Độ dài tối đa, MinimumLength=Độ dài tối thiểu)], và [MinLength(Độ dài tối thiểu), [MaxLength(Độ dài tối đa)] Những quy tắc này giúp đảm bảo tính hợp lệ và độ chính xác của dữ liệu nhập vào.

    The customizable notification content includes attributes such as [StringLength(MaxLength, ErrorMessage="Content")] and [StringLength(MaxLength, MinimumLength=MinLength, ErrorMessage="Content")], which define the maximum and minimum character limits Additionally, it incorporates [MinLength(MinLength, ErrorMessage="Content")] and [MaxLength(MaxLength, ErrorMessage="Content")] to ensure that the content meets specified length requirements.

     3.3 Kiểm tra miền giá trị

     Đối chiếu giá trị với một thuộc tính dữ liệu khác

     [Compare(“Tên thuộc tính khác”)]

     [Compare(“Tên thuộc tính khác”, ErrorMessage=“Nội dung báo”]

     3.5 Kiểm tra kiểu dữ liệu

     [DataType(Kiểu dữ liệu, ErrorMessage=“Nội dung báo”)]

     Bảng liệt kê một số kiểu dữ liệu cơ bản của DataType

     Hình 9.1 Các kiểu dữ liệu cơ bản của DataType

     3.6 Kiểm tra dữ liệu chỉ đọc

     Sử dụng namespace System.ComponentModel

     [EmailAddress(ErrorMessage=“Nội dung báo”)]

     3.8 Kiểm tra theo biểu thức có quy tắc

     [RegularExpression(Biểu thức quy định)]

     Tham khảo thêm các biểu thức quy định tại địa chỉ bên dưới.

     http://msdn.microsoft.com/en-us/library/az24scfc.aspx

     3.9 Hiển thị lỗi trên trang web

     Muốn hiển thị các thông báo đã cài đặt trong model, chúng ta sử dụng 2 phương thức sau:

     @Html.ValidationMessageFor(): trả về thông báo lỗi dưới dạng HTML cho field cụ thể

     Ví dụ: Thông báo lỗi cho field Email nếu không hợp lệ thì xuất hiện dấu

     @Html.ValidationSummary(): trả về danh sách lỗi trên trang web dưới dạng bộ tag

      .

      3 Giám sát lỗi trong controller

       4.1 Thuộc tính IsValid của ModelState

       Nếu thuộc tính IsValid là true, nghĩa là tất cả dữ liệu trên view model đều hợp lệ.

      To validate the "name" field in a model, you can use ModelState.IsValidField("name") to check its validity Additionally, ModelState["name"].Errors.Count provides the total number of errors associated with the "name" field, while ModelState["name"].Errors[i].ErrorMessage retrieves the specific error message for the i-th error related to that field.

       4.2 Giám sát lỗi phía Server

       Sử dụng Validation Annotations kiểm lỗi ở mức Client đối với những trường hợp đơn giản Trong những trường hợp phức tạp, chúng ta phải kiểm lỗi ở phía Server.

       Sử dụng phương thức AddModelError của ModelState để bổ sung các lỗi vào tập hợp collection của đối tượng ModelState.

       ModelState.AddModuleError(“key”, “Nội dung thông báo”)

       Bài 9.1 Bổ sung kiểm tra dữ liệu nhập và thông báo lỗi cho các giao diện quản trị nội dung.

      Kiểm tra dữ liệu với Validation Annotations

      Validation Annotations là các thuộc tính thuộc Data Annotations, tập trung vào việc thiết lập kiểm tra tính hợp lệ cho dữ liệu đầu vào từ người dùng.

      These attributes enable the implementation of server-side data validation checks, while the framework also supports client-side validation processes.

       Để sử dụng một trong những thuộc tính này, chúng ta phải khai báo nó ngay phía trên thuộc tính dữ liệu trong model.

       Dùng thông báo của hệ thống

       Nội dung thông báo tùy biến

       [Required(ErrorMessage=“Nội dung thông báo”)]

       3.2 Kiểm tra độ dài chuỗi

       Quy định chiều dài chuỗi nhập vào

      Sử dụng các thông báo của hệ thống như sau: [StringLength(Độ dài tối đa)], [StringLength(Độ dài tối đa, MinimumLength=Độ dài tối thiểu)], và [MinLength(Độ dài tối thiểu), MaxLength(Độ dài tối đa)] để đảm bảo tính chính xác và tuân thủ quy định về độ dài cho các trường dữ liệu.

      The customizable notification content includes various string length attributes to ensure proper validation Utilize the [StringLength] attribute to define a maximum length, with an optional minimum length and a specific error message for invalid entries Additionally, implement the [MinLength] attribute to set a minimum character requirement, and the [MaxLength] attribute to enforce a maximum limit, each accompanied by tailored error messages for user guidance.

       3.3 Kiểm tra miền giá trị

       Đối chiếu giá trị với một thuộc tính dữ liệu khác

       [Compare(“Tên thuộc tính khác”)]

       [Compare(“Tên thuộc tính khác”, ErrorMessage=“Nội dung báo”]

       3.5 Kiểm tra kiểu dữ liệu

       [DataType(Kiểu dữ liệu, ErrorMessage=“Nội dung báo”)]

       Bảng liệt kê một số kiểu dữ liệu cơ bản của DataType

       Hình 9.1 Các kiểu dữ liệu cơ bản của DataType

       3.6 Kiểm tra dữ liệu chỉ đọc

       Sử dụng namespace System.ComponentModel

       [EmailAddress(ErrorMessage=“Nội dung báo”)]

       3.8 Kiểm tra theo biểu thức có quy tắc

       [RegularExpression(Biểu thức quy định)]

       Tham khảo thêm các biểu thức quy định tại địa chỉ bên dưới.

       http://msdn.microsoft.com/en-us/library/az24scfc.aspx

       3.9 Hiển thị lỗi trên trang web

       Muốn hiển thị các thông báo đã cài đặt trong model, chúng ta sử dụng 2 phương thức sau:

      Giám sát lỗi trong controller

       Ví dụ: Thông báo lỗi cho field Email nếu không hợp lệ thì xuất hiện dấu

       @Html.ValidationSummary(): trả về danh sách lỗi trên trang web dưới dạng bộ tag

        .

        3 Giám sát lỗi trong controller

         4.1 Thuộc tính IsValid của ModelState

         Nếu thuộc tính IsValid là true, nghĩa là tất cả dữ liệu trên view model đều hợp lệ.

        To validate the "name" field in your model, you can use ModelState.IsValidField("name") to check its validity Additionally, ModelState["name"].Errors.Count provides the total number of errors associated with the "name" field, while ModelState["name"].Errors[i].ErrorMessage allows you to access the specific error message at index i for the "name" field.

         4.2 Giám sát lỗi phía Server

         Sử dụng Validation Annotations kiểm lỗi ở mức Client đối với những trường hợp đơn giản Trong những trường hợp phức tạp, chúng ta phải kiểm lỗi ở phía Server.

         Sử dụng phương thức AddModelError của ModelState để bổ sung các lỗi vào tập hợp collection của đối tượng ModelState.

         ModelState.AddModuleError(“key”, “Nội dung thông báo”)

         Bài 9.1 Bổ sung kiểm tra dữ liệu nhập và thông báo lỗi cho các giao diện quản trị nội dung.

        TRIỂN KHAI ỨNG DỤNG

        Custom Route

         1.1 Đặc điểm của ASP.NET MVC Routing

         ASP.NET MVC hỗ trợ cơ chế định tuyến rất mạnh mẽ và dễ cài đặt.

         URL được định tuyến để thân thiện với người dùng.

         Giúp việc bảo mật tốt hợn.

         Giúp Search Engine tìm kiếm trang web dễ hơn.

        Các URL request có thể dễ dàng tích hợp với các phương thức hành động trong các lớp controller thông qua việc sử dụng route mặc định Tuy nhiên, nếu ứng dụng yêu cầu một cấu trúc khác cho việc nhận các URL request, cần tìm giải pháp phù hợp.

         có thể dễ dàng tạo ra các route mới bằng cách sử dụng phương thức MapRoute() để tạo ra ánh xạ mới (trong lớp RouteConfig).

         Ví dụ: tạo route mới dùng để xem danh sách sản phẩm trong một nhóm.

        Xuất bản ứng dụng localhost

         Lưu ý: Custom routes phải được khai báo trước Default route.

         Các cấu trúc routes sau là hợp lệ.

         Cấu trúc route sau là không hợp lệ vì giữa {controller} và {action} không có dấu “/” hoặc ký tự chữ.

        26 Xuất bản ứng dụng localhost

         Vào Control Panel  Add or Remove Programes  Add or Remove Features

         Đánh dấu chọn Internet Information Service

         Khởi động lại máy tính.

         Click chuột phải lên project  Publish

         Hình 10.1 Chọn đích xuất bản ứng dụng

         Chọn Custom trong danh sách Select a publish target, nhậpMYTARGET.

         Chọn File System trong danh sách Publish method, chỉ định ổ đĩa và thư mục tại Target location.

         Hình 10.2 Chọn đích xuất bản ứng dụng

         2.3 Chèn ứng dụng web trên IIS

         Click chuột phải lên Sites  chọn Add Website…

        Xuất bản ứng dụng lên Internet

         Hình 10.3 Đặt website vào IIS

         Nhập và chọn các thông tin theo hướng dẫn dưới đây.

         Hình 10.4 Khai báo thông tin website trong IIS

        27 Xuất bản ứng dụng lên Internet

         3.1 Đăng ký tên miền, thuê hosting

         Liên hệ http://pavietnam.vn để được hướng dẫn và thuê dịch vụ

         Backup CSDL trên SQL Server

         Sao chép tập tin CSDL đã backup lên hosting

         Kết nối đến SQL Server trên hosting

         Click chuột phải lên tên CSDL trên hosting, chọn Restore

         Thay đổi thông tin kết nối CSDL phù hợp với CSDL trên hosting.

         Sao chép toàn bộ tập tin, thư mục bên trong thư mục mà chúng ta đã nhập trong ô Target location tại mục 2.2 vào thư mục public_html trên hosting.

         Bài 10.1 Đăng ký dịch vụ domain và web hosting miễn phí rồi xuất bản lên Internet.

    Ngày đăng: 10/03/2021, 15:38

    HÌNH ẢNH LIÊN QUAN

    Hình 1.1. Mô hình 3 thành phần của MVC - Lập trình web ASP.NET MVC (Cao đẳng CNTT)
                                 - Nguồn: BCTECH
    Hình 1.1. Mô hình 3 thành phần của MVC (Trang 10)
    Hình 1.2. Mô hình kiến trúc 3 thành phần trong MVC - Lập trình web ASP.NET MVC (Cao đẳng CNTT)
                                 - Nguồn: BCTECH
    Hình 1.2. Mô hình kiến trúc 3 thành phần trong MVC (Trang 12)
    Hình 1.3. Quá trình xử lý yêu cầu của MVC - Lập trình web ASP.NET MVC (Cao đẳng CNTT)
                                 - Nguồn: BCTECH
    Hình 1.3. Quá trình xử lý yêu cầu của MVC (Trang 14)
    Hình 2.1. Tạo ứng dụng ASP.NET - Lập trình web ASP.NET MVC (Cao đẳng CNTT)
                                 - Nguồn: BCTECH
    Hình 2.1. Tạo ứng dụng ASP.NET (Trang 18)
    Hình 2.2. Chọn mô hình MVC cho ứng dụng web - Lập trình web ASP.NET MVC (Cao đẳng CNTT)
                                 - Nguồn: BCTECH
    Hình 2.2. Chọn mô hình MVC cho ứng dụng web (Trang 19)
    Hình 2.4. Tạo web page Razor - Lập trình web ASP.NET MVC (Cao đẳng CNTT)
                                 - Nguồn: BCTECH
    Hình 2.4. Tạo web page Razor (Trang 21)
    Hình 3.1. Các bước tạo ADO.NET Entity Data Model - Lập trình web ASP.NET MVC (Cao đẳng CNTT)
                                 - Nguồn: BCTECH
    Hình 3.1. Các bước tạo ADO.NET Entity Data Model (Trang 26)
    Hình 3.4. Chọn các đối tượng trong CSDL - Lập trình web ASP.NET MVC (Cao đẳng CNTT)
                                 - Nguồn: BCTECH
    Hình 3.4. Chọn các đối tượng trong CSDL (Trang 27)
    Hình 3.3. Đặt tên cho chuỗi kết nối - Lập trình web ASP.NET MVC (Cao đẳng CNTT)
                                 - Nguồn: BCTECH
    Hình 3.3. Đặt tên cho chuỗi kết nối (Trang 27)
    Hình 3.5. Các lớp đối tượng trong model - Lập trình web ASP.NET MVC (Cao đẳng CNTT)
                                 - Nguồn: BCTECH
    Hình 3.5. Các lớp đối tượng trong model (Trang 28)
    Hình 4.1. Các bước chọn để tạo View - Lập trình web ASP.NET MVC (Cao đẳng CNTT)
                                 - Nguồn: BCTECH
    Hình 4.1. Các bước chọn để tạo View (Trang 32)
    Hình 4.4. Thiết kế giao diện cho Layout - Lập trình web ASP.NET MVC (Cao đẳng CNTT)
                                 - Nguồn: BCTECH
    Hình 4.4. Thiết kế giao diện cho Layout (Trang 34)
    Hình 4.6. Khai báo thông tin cho Partial View - Lập trình web ASP.NET MVC (Cao đẳng CNTT)
                                 - Nguồn: BCTECH
    Hình 4.6. Khai báo thông tin cho Partial View (Trang 37)
    Hình 5.1. Các kiểu dữ liệu của action - Lập trình web ASP.NET MVC (Cao đẳng CNTT)
                                 - Nguồn: BCTECH
    Hình 5.1. Các kiểu dữ liệu của action (Trang 46)
    Hình 7.1. Khai báo thông tin tạo controller wizard CRUD - Lập trình web ASP.NET MVC (Cao đẳng CNTT)
                                 - Nguồn: BCTECH
    Hình 7.1. Khai báo thông tin tạo controller wizard CRUD (Trang 57)

    TỪ KHÓA LIÊN QUAN

    w