CHAPTER 2 MVC Pro5 Ứng dụng MVC đầu tiên của bạn Cách tốt nhất để đánh giá một framework phát triển phần mềm là nhảy vào và sử dụng nó.Trong chương này,bạn sẽ tạo ra một chương trình nhậ
Trang 1CHAPTER 2 MVC Pro5 Ứng dụng MVC đầu tiên của bạn
Cách tốt nhất để đánh giá một framework phát triển phần mềm là nhảy vào và
sử dụng nó.Trong chương này,bạn sẽ tạo ra một chương trình nhập liệu đơn giản sử dụng ASP.NET MVC.Tôi sẽ làm từng bước một để bạn có thể thấy cách xây dựng một ứng dụng ASP.NET MVC Để cho đơn giản,tôi sẽ bỏ qua một vài chi tiết kĩ thuật.Nhưng đừng lo.Nếu bạn còn lạ lẫm với MVC ,bạn sẽ tìm thấy nhiều điều khiến bạn quan tâm thích thú.Những chỗ mà tôi sử dụng một cái gì đó mà giải thích,tôi sẽ cung cấp số chương để bạn tìm thấy tất cả chi tiết
Chuẩn bị Visual Studio
Visual Studio Express chứa tất cả tính năng bạn cần tạo,thử nghiệm và triển khai một ứng dụng MVC,nhưng một số tính năng được ẩn đi cho đến khi bạn yêu cầu chúng.Để kích hoạt tất cả tính năng,chọn Expert Setting từ menu Visual Studio Tools > Settings
Tip: Vì một vài lí do,Microsoft quyết định các menu cấp cao trong
Visual Studio nên để dưới dạng in hoa,có nghĩa là menu tôi nói đến chính xác
là TOOLS.Tôi nghĩ điều này giống như la lên và tôi sẽ viết hoa tên các menu như kiểu Tools trong suốt cuốn sách
Tạo một dự án ASP.NET MVC mới
Tôi sẽ bắt đầu tạo một dự án MVC Framework mới trong Visual Studio.Chọn New Project từ menu File để mở ra hộp thoại New Project,Nếu bạn chọn Web templates trong phần Visual C# section,bạn sẽ thấy các mẫu dự án ASP.NET Web Application.Chọn loại dự án như hình 2-1
Trang 2Hình 2-1 mẫu dự án Visual Studio ASP.NET Web Application
Đặt tên của dự án mới là PartyInvites và click OK để tiếp tục.Bạn sẽ
thấy một hộp thoại khác,như hình 2-2,yêu cầu bạn thiết các nội dung ban đầu
của dự án ASP.NET Đây một phần của sáng kiến của Microsoft để tích hợp các phần khác nhau của ASP.NET vào một tập hợp các công cụ đồng bộ và các mẫu
Hình 2-2 Chọn các thiết lập dự án ban đầu
Trang 3Tip: Hãy chắc chắn bạn đã chọn phiên bản 4.5.1 của NET Framework ở
phía trên cùng cửa sổ.Đây là phiên bản mới nhất của NET và cần thiết cho một
số tính năng nâng cao mà tôi mô tả trong cuốn sách này
Các mẫu tạo dự án với điểm bắt đầu khác nhau và cấu hình cho tính năng khác như xác thường,điều hướng và chủ đề hình ảnh.Tôi sẽ giữ mọi thứ đơn
giản:chọn option Empty và đánh dấu vào ô MVC trong phần Add Folders và Core refrerences,như trong hình.Như thế sẽ tạo một dự án MVC cơ bản với tối
thiểu nội dung xác định trước và sẽ điểm khởi đầu mà tôi sử dụng cho tất cả ví
dụ trong cuốn sách này.Click nút Ok để tạo dự án mới
Lưu ý:Các tuỳ chọn mẫu dự án khác nhằm cung cấp cho bạn một khởi
đầu hoàn chỉnh hơn cho dự án ASP.NET của bạn.Tôi không thích như mẫu có sẵn bởi vì chúng dành cho các nhà phát triển để nghiên cứu,xử lý một vài tính năng quan trọng,như chứng thực,hộp đen.Mục địch của tôi trong sách này là cung cấp cho bạn những kiến thức để hiểu và quản lý được mỗi khía canh trong ứng dụng MVC của bạn và,như một hệ quả,tôi sử dùng mẫu Empty cho phần lớn ví dụ trong sách-ngoại trừ chương 14,chương mà tôi cho bạn thấy rõ các nội dụng mà mẫu MVC thêm vào các dự án mới
Sau khi Visual Studio tạo dự án,bạn sẽ thấy một số tập tin và thư mục
hiển thị trong cửa sổ Solution Explorer,như trên hình 2-3.Đây là cấu trúc mặc
định cho một dự án MVC mới và bạn sẽ sớm hiểu được mục đích của từng file
và folder mà Visual Studio tạo ra
Hình 2-3 Các tập tin và thư mục ban đầu của một dự án MVC
Bạn có thể thử chạy ứng dụng ngây bây giờ bằng cách chọn Start Debugging từ menu Debug (nếu nó nhắc bạn kích hoạt debugging,hãy ấn vào
nút OK).Bạn có thể thấy kết quả như hình 2-4.Bời vì tôi bắt đầu với một mẫu dự
Trang 4án trống,ứng dụng không chứa thứ gì để chạy,nên server trả lại lỗi 404 Not Found
Thử chạy một dự án rỗng
Khi bạn kết thúc,hãy chắc chắn ngừng debugging bằng cách đóng cửa sổ trình duyệt ghi lỗi,hay quay lại bên Visual Studio và chọn Stop Debugging từ menu Debug
Như bạn vừa thấy,Visual Studio mở một trình duyệt để hiển thị dự án.Trình duyệt mặc định,tất nhiên,Internet Explorer,nhưng bạn có thể chọn trình duyệt khác mà bạn đã cài đặt bằng cách dùng thanh toolbar xuất hiện trong hình
2-5.Như hình minh hoạ.tôi có một loạt các trình duyệt được cài đặt,những trình
duyệt tôi cảm thấy hữu ích để thử nghiệm các ứng dụng web trong quá trình phát triển
Hình 2-5 Thay đổi trình duyệt mà Visual Studio sử dụng để chạy dự án
Trang 5Tôi sẽ sử dụng Internet Explorer 11 trong cả quyển sách,nhưng đó là vì tôi biết rằng IE được cài đặt rộng rãi,Internet Explorer thường chạy nhanh và mượt với các chuẩn web,nhưng các phiên bản gần đây trở nên rất tốt với việc cài đặt tiêu chuẩn HTML5.Google Chrome cũng là một lựa chọn tốt cho phát triển và tôi thường dùng nó cho dự án của mình
Thêm Controller đầu tiên
Trong kiến trúc MVC,các yêu cầu gửi đến được xử lý bởi controllers (bộ điều
khiển).Trong ASP.NET MVC ,controller chỉ là những lớp C# (thường kế thừa
từ System.Web.Mvc.Controller,lớp controller cơ sở tích hợp trong framework)
Mỗi phương thức public trong một controller được gọi là phương thức hoạt động,có nghĩa rằng bạn có thể gọi nó từ Web bằng vài đường dẫn URL để thực hiện hành động.Quy ước MVC là đặt controllers vào thư mục Controllers tạo sẵn khi bắt đầu dự án bởi Visual Studio
Tip: Bạn không cần tuân thủ quy ước nay hay phần lớn quy ước MVC
khác,nhưng tôi khuyên bạn nên làm theo – ít nhất là vì nó sẽ giúp nắm rõ ý nghĩa của ví dụ trong sách
Để thêm một controller vào dự án,click chuột phải vào thư muc Controllers trong cửa sổ Solution Explorer của Visual Studio và chọn Add sau
đó là Controller từ menu pop-up,như hình 2-6
Hình 2-6 Thêm một controller vào dự án MVC
Trang 6Khi hộp thoại Add Scaffold xuất hiện,chọn option MVC 5 Empty,như hình 2-7 và bấm nút Add
Controller-Hình 2-7 Lựa chọn một controller rỗng từ hộp thoại Add Scaffold
Hộp thoại Add Controller sẽ xuất hiện.Đặt tên cho Home Controller và bấm Add.Có vài quy ước đại diện trong cái tên này:cái tên của controller nên chỉ ra mục đích của chúng;Controller mặc định gọi là Home cà tên của Controller có phần theo sau là Controller
Tip:Nếu bạn dùng phiên bản trước của Visual Studio để tạo các ứng dụng
MVC ,thì bạn nên chú ý các quá trình có thể hơi khác nhau.Microsoft đã thây đổi cách để Visual Studio có tạo ra một dự án với các lớp tuỳ chỉnh trước và nhiều thứ khác
Visual Studio sẽ tạo một file C# mới trong thư mục Controllers gọi là HomeController.cs và mở nó lên để chỉnh sửa.Tôi đã ghi ra các nội dung mặc định mà Visual Studio đặt vào các file lớp (class) trong listing 2-1.Bạn có thể thấy một lớp gọi là HomeController và nó xuất phát từ lớp Controller,nằm trong System.Web.Mvc.namespace
Listing 2-1 Các nội dung mặc định của file HomeControler.cs
Trang 7public class HomeController : Controller {
public ActionResult Index() {
return View();
} }
}
Một cách tốt để bắt đầu với MVC là thực hiện một vài thay đổi đơn giản trong lớp controller.Sửa code trong file HomeController.cs theo như Listing 2- 2,tôi đã đánh dấu những dòng có thay đổi để xem chúng rõ ràng hơn
Listing 2-2 Tuỳ chỉnh file HomeController.cs
public class HomeController : Controller {
public string Index() {
return "Hello World";
} }
}
Những thay đổi đó không có ảnh hưởng lớn,nhưng là một ví dụ tốt.Tôi đã thay đổi phương thức hành động tên Index để nó trả lại chuỗi “Hello World”.Chạy dự án lại một lần nữa bằng cách chọn Start Debugging trong menu Debug của Visual Studio.Trình duyệt sẽ hiển thị kết quả của phương thức Index,như trong hình 2-8
Hình 2-8 Kết quả output từ phương thúc hoạt đông controller
Trang 8Tip: Lưu ý rằng Visual Studio đã quy định trình duyệt gắn với port
37782.Bạn gần như chắc chắn sẽ thấy số port khác nhau trong đường dẫn URL
mà trình duyệt yêu cầu bởi vì Visual Studio phân bố một port ngẫu nhiên khi dự
án được khởi tạo.Nếu bạn nhìn vào khu vực thông báo trong Windows taskbar,bạn sẽ thấy có biểu tượng của IIS Express.Đây là phiên bản rút gọn của server ứng dụng IIS đầy đủ nằm trong Visual Studio và được sử dụng để cung cấp nội dung ASP.NET và các dịch vụ trong khi quá trình phát triển.Tôi sẽ cho bạn thấy làm thế nào để triển khai một dự án vào môi trường sản xuất trong chương 13
Vì vậy, khi một trình duyệt yêu cầu http: // yoursite / hoặc http: // yoursite /
Home, nó sẽ quay lại phương thức Index HomeController Bạn có thể thử điều
chỉnh bằng cách thay đổi các URL trong trình duyệt Tại thời điểm này, sẽ là http: // localhost: 37.782/, ngoại trừ phần cổng có thể khác nhau Nếu bạn thêm
vào / Home hoặc / Home / Index vào URL và nhấn trở lại, bạn sẽ thấy Hello World cùng kết quả từ ứng dụng MVC
Đây là một ví dụ kinh điển của MVC Trong trường hợp này, các quy ước là tôi
sẽ có một bộ điều khiển gọi là HomeController và nó sẽ là điểm bắt đầu cho ứng dụng MVC của tôi Các cách mặc định mà Visual Studio tạo ra một dự án mới cho rằng tôi sẽ tuân theo quy ước này Và kể từ khi tôi làm theo các quy ước, tôi đã hỗ trợ tự động cho các URL trong danh sách trên
Nếu bạn không theo quy ước, bạn sẽ cần phải sửa đổi các cách làm để trỏ đến bất cứ các Controller mà bạn đã tạo ra để thay thế Ví dụ đơn giản, các cấu hình mặc định là tất cả tôi cần
TIP: Bạn có thể xem và chỉnh sửa cấu hình định tuyến của bạn bằng cách mở tập tin trong thư mục RouteConfig.cs App_Start Tôi giải thích những gì các mục trong tập tin này làm trong Chương 16 và 17
Rendering Web Pages
Creating and Rendering a View (tạo và tuỳ chỉnh một View)
Listing 2-3: Sửa đổi Controller để tuỳ chỉnh một View trong file
HomeController.cs
using System;
using System.Collections.Generic;
Trang 9using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace PartyInvites.Controllers {
public class HomeController : Controller {
public ViewResult Index() {
return View();
} }
}
Những thay đổi trong Listing 2-3 được in đậm Khi tôi quay lại đối tượng ViewResult từ một phương thức hành động, tôi đang hướng dẫn MVC để
Render lại một khung hình Tôi tạo ra ViewResult bằng cách gọi phương
thức View không có tham số Điều này cho MVC để render-tuỳ chỉnh giao diện mặc định cho hành động
Nếu bạn chạy các ứng dụng vào thời điểm này, bạn có thể xem các MVC Framework cố gắng để tìm thấy một giao diện mặc định để sử dụng, như được hiển thị trong thông báo lỗi hiển thị trong Hình 2-9
Hình 2-9 Các MVC Framework cố gắng để tìm thấy một giao diện mặc định
Thông báo lỗi này là khá hữu ích Nó không chỉ giải thích rằng MVC không thể tìm thấy View cho các phương thức hành động, mà nó còn hiển thị nơi nó đã tìm kiếm Đây là một minh họa tốt của một quy ước trong MVC: view được liên kết với các phương thức hành động thông qua quy ước đặt tên
Trang 10Các phương thức hành động được gọi là Index và controller được gọi là Home
và bạn có thể nhìn thấy trong hình 2-9 là MVC cố gắng tìm file khác nhau trong thư mục Views có cùng tên đó
Cách đơn giản nhất để tạo ra view là yêu cầu Visual Studio làm điều đó cho bạn Kích chuột phải vào bất cứ nơi nào của phương thức Index trong cửa
sổ code cho file HomeController.cs và chọn Add View từ menu pop-up,
cả các chi tiết trong chương sau Nhấp vào nút Add để tạo ra các file view mới
Trang 11Hình 2-11 Tuỳ chỉnh các nội dung trong view
Visual Studio sẽ tạo ra một tập tin gọi là Index.cshtml trong thư mục Views / Home Nếu như đây không phải là hiệu ứng mà bạn muốn, bạn
có thể xóa các tập tin mà bạn tạo ra và thử lại Đây là một quy ước khác của MVC Framework: views được đặt trong thư mục Views, quản lý trong các thư mục tương ứng với tên của bộ điều khiển chúng có liên quan
Tip:Phần đuôi file cshtml thể hiện view dạng C# được xử lý bởi
Razor.Các phiên bản trước của MVC thì phụ thuộc vào nền tảng view ASPX,có đuôi dạng aspx
Như những giá trị tôi bảo bạn nhập vào trong cửa sổ Add view, Visual sẽ tạo một view cơ bản nhất,mang nội dung như Lisiting 2-4
Listing 2-4 Nội dung của file Index.cshtml
Trang 12Visual Studio mở file Index.cshtml để chỉnh sửa Bạn sẽ thấy rằng tập tin này chứa chủ yếu là các file HTML Các trường hợp ngoại lệ là phần trông như thế này:
Đây là một biểu thức mà sẽ được giải thích bởi các công cụ view của Razor, xử
lý nội dung của view và tạo ra HTML để gửi tới trình duyệt Đây là một biểu thức Razor đơn giản và nó báo với Razor rằng tôi đã chọn không sử dụng Layout, cái mà nó giống như khuôn mẫu của HTML để gửi tới trình duyệt ( sẽ được nói rõ hơn trong chương 5) Tôi sẽ bỏ qua Razor lúc này và trở lại với nó sau Hãy bổ sung vào tập tin Index.cshtml những gì được in đậm trong Listing 2-5
Listing 2-5 Adding to the View HTML in the Index.cshtml File
Trang 13Figure 2-12 Testing the view
Khi lần đầu tiên tôi sửa các phương thức Index, nó trả về một giá trị chuỗi Điều này có nghĩa rằng MVC đã không làm gì ngoại trừ gán giá trị chuỗi vào trình duyệt Bây giờ là phương thức Index trả về một ViewResult, các MVC Framework trả lại một cái hiển thị và trả về HTML mà nó tạo ra Tôi không nói MVC những view nên được sử dụng, vì vậy nó đã sử dụng quy ước đặt tên để tìm một cách tự động Các quy ước hiển thị view có tên của phương thức hành động và được chứa trong một thư mục tên sau: /Views/Home/Index.cshtml
Tôi có thể trả lại kết quả khác từ phương thức hành động bên cạnh các chuỗi và các đối tượng ViewResult Ví dụ, nếu tôi trả về một RedirectResult, trình duyệt sẽ được chuyển hướng đến một URL khác Nếu tôi trả về một HttpUnauthorizedResult, tôi buộc người dùng phải đăng nhập Những
đối tượng này được gọi chung là kết quả hành động, và tất cả chúng đều có
nguồn gốc từ lớp ActionResult Hệ thống Action Result cho phép chúng ta đóng gói và sử dụng lại các phản ứng thông thường trong hành động Tôi sẽ cho bạn biết thêm những điều này và hướng dẫn sử dụng phức tạp hơn trong Chương 17
Thêm vào Dynamic Output
Điểm chung của một nền tảng ứng dụng web là xây dựng và hiển thị Dynamic Output Trong MVC, đó là công việc của bộ điều khiển để xây dựng dữ liệu và truyền tải cho người xem, đó là trách nhiệm chuyển sang cho HTML
Một cách để truyền dữ liệu từ Controller đến view là bằng cách sử dụng các đối tượng ViewBag, một trong những thành phần của lớp cơ sở Controller ViewBag là một đối tượng dynamic-động mà bạn có thể gán thuộc tính tùy ý, làm cho những giá trị có sẵn trong bất cứ nơi nào view sau đó được hiển thị Listing 2-6 cho thấy một số dữ liệu dynamic đơn giản theo cách này trong HomeController.cs
Trang 14Tôi cung cấp dữ liệu cho view khi mà tôi gán giá trị cho thuộc tính
ViewBag.Greeting Thuộc tình Greeting không tồn tại cho đến thời
điểm tôi gán giá trị -điều này cho phép tôi để truyền dữ liệu từ controller đến
view một cách tự nhiên, mà không cần phải xác định các lớp trước thời hạn Tôi
tham chiếu lại ViewBag.Greeting trong view để có được các giá trị dữ liệu,
như minh họa trong Listing 2-7, trong đó cho thấy sự thay đổi tương ứng với tập
tin index.cshtml
Việc bổ sung Listing 2-7 là một biểu thức Razor Khi tôi gọi là phương
thức View trong phương thức điều khiển Index , MVC framework sẽ xác định
Trang 15tạo tin view của Index.cshtml và yêu cầu các công cụ hiển thị Razor để
phân tích nội dung của tập tin Razor tìm đến các mô tả mà tôi thêm vào trong
danh sách và xử lý chúng Trong ví dụ này, việc xử lý các mô tả có nghĩa là
chèn các giá trị được gán cho thuộc tính ViewBag.Greeting trong phương
thức hành động vào view
Không có gì đặc biệt về thuộc tính Greeting, bạn có thể thay thế nó
với bất kì thuộc tính có tên khác và nó sẽ làm việc như nhau, miễn sao tên bạn
sử dụng trong controller trùng với tên mà bạn sử dụng trong view Bạn có thể
truyền tải dữ liệu từ Controller của bạn đến view bằng cách gán giá trị cho
nhiều hơn một thuộc tính Bạn có thể xem ảnh hưởng của những thay đổi này
bằng cách chạy dự án, như thể hiện trong hình 2-13
Figure 2-13 Phản hồi từ MVC
Tạo một ứng dụng Data-Entry đơn giản (ứng dụng nhập liệu)
Trong phần còn lại của chương này, tôi sẽ khám phá thêm các tính năng cơ bản
MVC bằng cách xây dựng một ứng dụng data-entry (nhập liệu) đơn giản Tôi sẽ
đi nhanh trong phần này Mục tiêu của tôi là để chứng minh, giải thích MVC
bằng hành động, vì vậy tôi sẽ bỏ qua một số giải thích sau cách thức hoạt động
Nhưng đừng lo, tôi sẽ nói sâu hơn phần này trong những chương sau
Thiết lập ngoại cảnh (Setting the Scene)
Hãy tưởng tượng rằng một người bạn đã quyết định tổ chức bữa tiệc đón năm
mới và rằng cô ấy đã hỏi tôi để tạo ra một ứng dụng web cho các lời mời của cô
ta vào một hệ thống RSVP điện tử Cô ấy yêu cầu bốn tính năng chính:
+Một trang chính hiển thị các thông tin về buổi tiệc
+Một Form có thể sử dụng được RSVP
Trang 16+Form RSVP xác nhận, hiển thị lời cảm ơn
+ RSVPs e-mailed đến mọi người khi hoàn thành
Trong phần dưới đây, tôi sẽ xây dựng project MVC mà tôi đã tạo ra ở phần đầu chương và thêm các tính năng này Tôi có thể kiểm tra các item đầu tiên ra khỏi danh sách bằng cách áp dụng những gì tôi đã giới thiệu trước đó và thêm code HTML vào view sẵn có của để cung cấp cho các chi tiết về buổi tiệc Bảng Listing 2-8 cho thấy các bổ sung thực hiện cho các Views / Home /
file Index.cshtml
Nếu chạy thử ứng dụng, bạn sẽ thấy nó hiển thị như hình 2-14:
Hình 2-14 Thêm view của HTML
Thiết kế mô hình dữ liệu(Designing a Data Model)
Trong MVC, các M là viết tắt của Model, và nó là một phần quan trọng nhất của ứng dụng Mô hình này là các đại diện của đối tượng thế giới thực, quy
Trang 17trình, và các quy tắc để xác định các đối tượng, được gọi là domain-phạm vi,
của ứng dụng Các mô hình, thường được gọi là một mô hình miền domain model, chứa các đối tượng C # (gọi là đối tượng tên miền domain objects) tạo
nên thế giới của các ứng dụng và các phương thức thao tác chúng Các view và các controller dẫn đến các domain đến các client một cách nhất quán và một ứng dụng MVC được thiết kế cũng bắt đầu với một mô hình được thiết kế tốt,
và các phần trọng tâm của view và controllers mới được thêm vào
Thêm lớp Model(Adding a Model Class)
MVC quy ước các lớp tạo nên Model được đặt bên trong thư mục Models, cái
mà Visual Studio tạo ra ban đầu khi dự án được thiết lập Kích chuột phải vào Models trong cửa sổ Solution Explorer và chọn Add cùng Class xuất hiện từ menu pop-up Đặt tên file GuestResponse.cs và nhấp vào nút Add
để tạo ra các lớp Chỉnh sửa nội dung của lớp để phù hợp với listing 2-9
Listing 2-9 The GuestResponse Domain Class Defined in the GuestResponse.cs
File
namespace PartyInvites.Models {
public class GuestResponse {
public string Name { get; set; } public string Email { get; set; } public string Phone { get; set; } public bool? WillAttend { get; set; } }
}
Tip: Bạn có thể nhận thấy rằng các thuộc tính WillAttend kiểu bool
và có giá trị có thể là NULL, có nghĩa là nó có thể true, false, hoặc null Tôi giải thích lý do cho điều này trong phần Thêm Validation trong chương sau
Trang 18@ViewBag.Greeting World (from the view)
<p>We're going to have an exciting party.<br />
(To do: sell it better Add pictures or something.)
Figure 2-15 Adding a link to the view
Nếu bạn để chuột vào liên kết trong trình duyệt, bạn sẽ thấy rằng các điểm liên kết dẫn đến http://yourserver/Home/RsvpForm Phương thức Html.ActionLink kiểm tra cấu hình định tuyến URL của ứng dụng và xác
Trang 19định / Home / RsvpForm là URL cho một hành động gọi là RsvpForm
trên một controller là HomeController
Tip: không giống như các ứng dụng ASP.NET truyền thống, các URL MVC không tương ứng với tập tin vật lý Mỗi phương thức hành động có URL riêng của mình, và MVC sử dụng hệ thống định tuyến ASP.NET để biên dịch những URLs thành hành động
Tạo phương thức hành động (Creating the Action Method)
Bạn sẽ thấy lỗi 404 Not Found nếu bạn click vào link.Bởi vì tôi vẫn chưa tạo một phương thức ứng với đường dẫn URL: /Home/RsvpForm.Tôi sẽ làm điều
đó bằng cách thêm một phương thức là RsvpForm vào lớp HomeController.như listing 2-11
Listing 2-11 Adding a New Action Method in the HomeController.cs File
public class HomeController : Controller {
public ViewResult Index() {
int hour = DateTime.Now.Hour;
ViewBag.Greeting = hour < 12 ? "Good Morning" : "Good Afternoon";
return View();
} public ViewResult RsvpForm() {
return View();
} }
}
Adding a Strongly Typed View
Tôi sẽ thêm một View cho các phương thức hành động RSVPForm,
nhưng hơi khác , tôi sẽ tạo ra hiển thị kiểu Strongly A strongly typed view
được thiết kế để làm cho tuỳ chỉnh cho một loại tên miền đặc biệt, và nếu tôi xác định loại tôi muốn làm việc v(trong trường hợp này là GuestResponse), MVC có thể tạo ra một số lối tắt hữu ích khiến nó dễ dàng hơn
Lưu ý: Hãy chắc chắn rằng dự án MVC của bạn được biên dịch trước khi
tiếp tục Nếu bạn đã tạo ra các lớp GuestResponse nhưng chưa biên dịch,
Trang 20MVC sẽ không thể tạo ra a Strongly Typed View Để biên dịch ứng dụng của bạn, chọn Build Solution từ menu Build của Visual Studio
Click chuột phải vào phương thức RsvpForm trong trình soạn thảo code
và chọn Add View từ menu pop-up để mở cửa sổ hộp thoại Add View Đảm bảo rằng View Name được đặt là RsvpForm, đặt Template là Empty và chọn GuestResponse từ danh sách thả xuống cho trường Model Class
Để lại yên phần View Options, như trong hình 2-16
Hình 2-16 Thêm view mới vào dự án
Nhấp vào nút Add và Visual Studio sẽ tạo ra một file mới có tên RvspForm.cshtml trong thư mục Views / Home và mở nó để chỉnh sửa Bạn có thể xem các nội dung trong Listing 2-12 Đây là một tập tin khung HTML , nhưng nó có chứa một biểu thức mô tả @model Razor Như bạn sẽ thấy sau một lát, đây sẽ một strongly typed view cùng sự tiện lợi nó cung cấp
Listing 2-12 The Initial Contents of the RsvpForm.cshtml File
Trang 21TIP: Các tùy chọn mà bạn chọn và đánh dấu khi bạn tạo ra một view xác
định các nội dung ban đầu của một tập tin view, nhưng đó là tất cả Bạn có thể thay đổi từ dạng thông thường thành dạng định nghĩa đặc biệt (strongly typed view), ví dụ, chỉ bằng cách thêm hoặc loại bỏ @model trong trình soạn thảo
mã
Xây dựng Form (Building the Form)
Bây giờ, tôi đã tạo ra strongly typed view, Tôi có thể xây dựng nội dung của RSVPForm.cshtml thành một dạng HTML để chỉnh sửa đối tượng GuestResponse, như thể hiện trong Listing 2-13
Listing 2-13 Creating a Form View in the RsvpForm.cshtml File
<p>Your name: @Html.TextBoxFor(x => x.Name) </p>
<p>Your email: @Html.TextBoxFor(x => x.Email)</p>
<p>Your phone: @Html.TextBoxFor(x => x.Phone)</p>
<p>
Will you attend?
@Html.DropDownListFor(x => x.WillAttend, new[] {
new SelectListItem() {Text = "Yes, I'll be there",
Value = bool.TrueString}, new SelectListItem() {Text = "No, I can't come",
Trang 22<input id="Phone" name="Phone" type="text" value="" />
Chức năng hữu ích này làm việc bởi vì view RsvpForm là dạng strongly typed, tôi đã báo với MVC là GuestResponse là loại mà tôi muốn tuỳ chỉnh cùng view này Điều này cung cấp phương thức hỗ trợ HTML với các thông tin
mà chúng cần phải hiểu được kiểu dữ liệu nào tôi muốn chúng đọc các thuộc tính thông qua mô tả trong @model
Đừng lo lắng nếu bạn không quen với các biểu thức C # lambda Tôi cung cấp một cái nhìn tổng quan trong Chương 4, sự thay thế cho việc sử dụng các biểu thức lambda là để chỉ tên của các loại mô hình thuộc tính như một chuỗi, như thế này: