1. Trang chủ
  2. » Giáo Dục - Đào Tạo

2 chuong 02 tủ tài liệu bách khoa

44 47 0

Đ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

Định dạng
Số trang 44
Dung lượng 2,08 MB

Nội dung

CHAPTER MVC Pro5 Ứng dụng MVC bạn Cách tốt để đánh giá framework phát triển phần mềm nhảy vào sử dụng nó.Trong chương này,bạn tạo chương trình nhập liệu đơn giản sử dụng ASP.NET MVC.Tôi làm bước để bạn thấy cách xây dựng ứng dụng ASP.NET MVC Để cho đơn giản,tôi bỏ qua vài chi tiết kĩ thuật.Nhưng đừng lo.Nếu bạn lạ lẫm với MVC ,bạn 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à giải thích,tơi cung cấp số chương để bạn tìm thấy tất chi tiết Chuẩn bị Visual Studio Visual Studio Express chứa tất tính bạn cần tạo,thử nghiệm triển khai ứng dụng MVC,nhưng số tính ẩn bạn yêu cầu chúng.Để kích hoạt tất tính năng,chọn Expert Setting từ menu Visual Studio Tools > Settings Tip: Vì vài lí do,Microsoft định menu cấp cao Visual Studio nên để dạng in hoa,có nghĩa menu tơi nói đến xác TOOLS.Tơi nghĩ điều giống la lên viết hoa tên menu kiểu Tools suốt sách Tạo dự án ASP.NET MVC Tôi bắt đầu tạo dự án MVC Framework Visual Studio.Chọn New Project từ menu File để mở hộp thoại New Project,Nếu bạn chọn Web templates phần Visual C# section,bạn thấy mẫu dự án ASP.NET Web Application.Chọn loại dự án hình 2-1 Hình 2-1 mẫu dự án Visual Studio ASP.NET Web Application Đặt tên dự án PartyInvites click OK để tiếp tục.Bạn thấy hộp thoại khác,như hình 2-2,yêu cầu bạn thiết nội dung ban đầu dự án ASP.NET Đây phần sáng kiến Microsoft để tích hợp phần khác ASP.NET vào tập hợp cơng cụ đồng mẫu Hình 2-2 Chọn thiết lập dự án ban đầu Tip: Hãy chắn bạn chọn phiên 4.5.1 NET Framework phía cửa sổ.Đây phiên NET cần thiết cho số tính nâng cao mà mô tả sách Các mẫu tạo dự án với điểm bắt đầu khác cấu hình cho tính khác xác thường,điều hướng chủ đề hình ảnh.Tơi giữ thứ đơn giản:chọn option Empty đánh dấu vào ô MVC phần Add Folders Core refrerences,như hình.Như tạo dự án MVC với tối thiểu nội dung xác định trước điểm khởi đầu mà sử dụng cho tất ví dụ sách này.Click nút Ok để tạo dự án Lưu ý:Các tuỳ chọn mẫu dự án khác nhằm cung cấp cho bạn khởi đầu hoàn chỉnh cho dự án ASP.NET bạn.Tơi khơng thích mẫu có sẵn chúng dành cho nhà phát triển để nghiên cứu,xử lý vài tính quan trọng,như chứng thực,hộp đen.Mục địch sách cung cấp cho bạn kiến thức để hiểu quản lý khía canh ứng dụng MVC bạn và,như hệ quả,tôi sử dùng mẫu Empty cho phần lớn ví dụ sách-ngoại trừ chương 14,chương mà cho bạn thấy rõ nội dụng mà mẫu MVC thêm vào dự án Sau Visual Studio tạo dự án,bạn thấy số tập tin thư mục hiển thị cửa sổ Solution Explorer,như hình 2-3.Đây cấu trúc mặc định cho dự án MVC bạn sớm hiểu mục đích file folder mà Visual Studio tạo Hình 2-3 Các tập tin thư mục ban đầu dự án MVC Bạn thử chạy ứng dụng ngây cách chọn Start Debugging từ menu Debug (nếu nhắc bạn kích hoạt debugging,hãy ấn vào nút OK).Bạn thấy kết hình 2-4.Bời tơi bắt đầu với mẫu dự án trống,ứng dụng không chứa thứ để chạy,nên server trả lại lỗi 404 Not Found Thử chạy dự án rỗng Khi bạn kết thúc,hãy chắn ngừng debugging cách đóng cửa sổ trình duyệt ghi lỗi,hay quay lại bên Visual Studio chọn Stop Debugging từ menu Debug Như bạn vừa thấy,Visual Studio mở 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 chọn trình duyệt khác mà bạn cài đặt cách dùng toolbar xuất hình 2-5.Như hình minh hoạ.tơi có loạt trình duyệt cài đặt,những trình duyệt tơi cảm thấy hữu ích để thử nghiệm ứng dụng web 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 Tôi sử dụng Internet Explorer 11 sách,nhưng tơi biết IE cài đặt rộng rãi,Internet Explorer thường chạy nhanh mượt với chuẩn web,nhưng phiên gần trở nên tốt với việc cài đặt tiêu chuẩn HTML5.Google Chrome lựa chọn tốt cho phát triển tơi thường dùng cho dự án Thêm Controller Trong kiến trúc MVC,các yêu cầu gửi đến xử lý controllers (bộ điều khiển).Trong ASP.NET MVC ,controller lớp C# (thường kế thừa từ System.Web.Mvc.Controller,lớp controller sở tích hợp framework) Mỗi phương thức public controller gọi phương thức hoạt động,có nghĩa bạn gọi từ Web vài đường dẫn URL để thực hành động.Quy ước MVC đặt controllers vào thư mục Controllers tạo sẵn bắt đầu dự án Visual Studio Tip: Bạn không cần tuân thủ quy ước hay phần lớn quy ước MVC khác,nhưng tơi khun bạn nên làm theo – giúp nắm rõ ý nghĩa ví dụ sách Để thêm controller vào dự án,click chuột phải vào thư muc Controllers cửa sổ Solution Explorer Visual Studio chọn Add sau Controller từ menu pop-up,như hình 2-6 Hình 2-6 Thêm controller vào dự án MVC Khi hộp thoại Add Scaffold xuất hiện,chọn option MVC ControllerEmpty,như hình 2-7 bấm nút Add Hình 2-7 Lựa chọn controller rỗng từ hộp thoại Add Scaffold Hộp thoại Add Controller xuất hiện.Đặt tên cho Home Controller bấm Add.Có vài quy ước đại diện tên này:cái tên controller nên mục đích chúng;Controller mặc định gọi Home cà tên Controller có phần theo sau Controller Tip:Nếu bạn dùng phiên trước Visual Studio để tạo ứng dụng MVC ,thì bạn nên ý q trình khác nhau.Microsoft thây đổi cách để Visual Studio có tạo dự án với lớp tuỳ chỉnh trước nhiều thứ khác Visual Studio tạo file C# thư mục Controllers gọi HomeController.cs mở lên để chỉnh sửa.Tơi ghi nội dung mặc định mà Visual Studio đặt vào file lớp (class) listing 2-1.Bạn thấy lớp gọi HomeController xuất phát từ lớp Controller,nằm System.Web.Mvc.namespace Listing 2-1 Các nội dung mặc định file HomeControler.cs using System; using using using using System.Collections.Generic; System.Linq; System.Web; System.Web.Mvc; namespace PartyInvites.Controllers { public class HomeController : Controller { public ActionResult Index() { return View(); } } } Một cách tốt để bắt đầu với MVC thực vài thay đổi đơn giản lớp controller.Sửa code file HomeController.cs theo Listing 22,tôi đánh dấu dòng có thay đổi để xem chúng rõ ràng Listing 2-2 Tuỳ chỉnh file HomeController.cs using using using using using System; System.Collections.Generic; System.Linq; System.Web; System.Web.Mvc; namespace PartyInvites.Controllers { public class HomeController : Controller { public string Index() { return "Hello World"; } } } Những thay đổi khơng có ảnh hưởng lớn,nhưng ví dụ tốt.Tôi thay đổi phương thức hành động tên Index để trả lại chuỗi “Hello World”.Chạy dự án lại lần cách chọn Start Debugging menu Debug Visual Studio.Trình duyệt hiển thị kết phương thức Index,như hình 2-8 Hình 2-8 Kết output từ phương thúc hoạt đông controller Tip: Lưu ý Visual Studio quy định trình duyệt gắn với port 37782.Bạn gần chắn thấy số port khác đường dẫn URL mà trình duyệt yêu cầu Visual Studio phân bố port ngẫu nhiên dự án khởi tạo.Nếu bạn nhìn vào khu vực thơng báo Windows taskbar,bạn thấy có biểu tượng IIS Express.Đây phiên rút gọn server ứng dụng IIS đầy đủ nằm Visual Studio sử dụng để cung cấp nội dung ASP.NET dịch vụ trình phát triển.Tơi cho bạn thấy làm để triển khai dự án vào môi trường sản xuất chương 13 Hiểu rõ đường dẫn Cũng mơ hình,view,và controller,ứng dụng MVC sử dụng hệ thống đường dẫn ASP.NET ,thứ định cách URL nối với controllers hành động.Khi Visual Studio tạo dự án MVC ,nó thêm đường dẫn mặc định để bắt đầu.Bạn yêu cầu đường dẫn URL dưới,và chúng dẫn trực tiếp đến phương thức Index HomeController: +/ Vì vậy, trình duyệt yêu cầu http: // yoursite / http: // yoursite / Home, quay lại phương thức Index HomeController Bạn thử điều chỉnh cách thay đổi URL trình duyệt Tại thời điểm này, http: // localhost: 37.782/, ngoại trừ phần cổng khác Nếu bạn thêm vào / Home / Home / Index vào URL nhấn trở lại, bạn thấy Hello World kết từ ứng dụng MVC Đây ví dụ kinh điển MVC Trong trường hợp này, quy ước tơi có điều khiển gọi HomeController điểm bắt đầu cho ứng dụng MVC Các cách mặc định mà Visual Studio tạo dự án cho tuân theo quy ước Và kể từ làm theo quy ước, hỗ trợ tự động cho URL danh sách Nếu bạn không theo quy ước, bạn cần phải sửa đổi cách làm để trỏ đến Controller mà bạn tạo để thay Ví dụ đơn giản, cấu hình mặc định tất tơi cần TIP: Bạn xem chỉnh sửa cấu hình định tuyến bạn cách mở tập tin thư mục RouteConfig.cs App_Start Tôi giải thích mục tập tin làm Chương 16 17 Rendering Web Pages Creating and Rendering a View (tạo tuỳ chỉnh View) Listing 2-3: Sửa đổi Controller để tuỳ chỉnh View file HomeController.cs using System; using System.Collections.Generic; using 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 Listing 2-3 in đậm Khi quay lại đối tượng ViewResult từ phương thức hành động, hướng dẫn MVC để Render lại khung hình Tơi tạo ViewResult cách gọi phương thức View khơng có tham số Điều cho MVC để render-tuỳ chỉnh giao diện mặc định cho hành động Nếu bạn chạy ứng dụng vào thời điểm này, bạn xem MVC Framework cố gắng để tìm thấy giao diện mặc định để sử dụng, hiển thị thông báo lỗi hiển thị Hình 2-9 Hình 2-9 Các MVC Framework cố gắng để tìm thấy giao diện mặc định Thơng báo lỗi hữu ích Nó khơng giải thích MVC khơng thể tìm thấy View cho phương thức hành động, mà hiển thị nơi tìm kiếm Đây minh họa tốt quy ước MVC: view liên kết với phương thức hành động thông qua quy ước đặt tên Các phương thức hành động gọi Index controller gọi Home bạn nhìn thấy hình 2-9 MVC cố gắng tìm file khác thư mục Views có tên Cách đơn giản để tạo view yêu cầu Visual Studio làm điều cho bạn Kích chuột phải vào nơi phương thức Index cửa sổ code cho file HomeController.cs chọn Add View từ menu pop-up, xem hình 2.10 Hình 2-10 Yêu cầu Visual Studio tạo view cho phương thức hành động Visual Studio hiển thị hộp thoại Add View, cho phép bạn thiết lập nội dung ban đầu file tạo Đặt View Name Index (tên phương thức hành động mà View liên kết -theo quy ước), thiết lập dạng Template Empty (without model),không check vào Create as a partial view Use a layout page hình 2-11 Đừng lo lắng tất tùy chọn có nghĩa thời điểm này-Tơi giải thích tất chi tiết chương sau Nhấp vào nút Add để tạo file view Các quy tắc kiểm chứng thực in đậm MVC tự động phát thuộc tính sử dụng chúng để kiểm tra liệu q trình ràng buộc mơ hình Chú ý tơi nhập khơng gian làm việc có chứa quy tắc chứng thực, tơi gọi đến chúng mà không cần phải thảo mãn tên TIP: Như nói trước đây, tơi sử dụng nullable bool cho thuộc tính WillAttend Tơi làm điều để tơi áp dụng thuộc tính xác nhận Required Nếu tơi sử dụng bool thông thường, giá trị nhận thông qua mô hình ràng buộc true hay false, tơi khơng thể biết người dùng có chọn giá trị khơng Một nullable bool có ba giá trị true, false, null Các giá trị null sử dụng người dùng không lựa chọn giá trị nào, điều làm cho thuộc tính Required báo lỗi xác nhận Tôi kiểm tra xem vấn đề kiểm tra việc dùng thuộc tính ModelState.IsValid lớp điều khiển Listing 2-17 tơi làm điều phương pháp hành động RsvpForm POST-được kích hoạt lớp controller Home Listing 2-17 Checking for Form Validation Errors in the HomeController.cs File [HttpPost] public ViewResult RsvpForm(GuestResponse guestResponse) { if (ModelState.IsValid) { // TODO: Email response to the party organizer return View("Thanks", guestResponse); } else { // there is a validation error return View(); } } Nếu khơng có lỗi xác nhận, tơi nói với MVC để thị view Thanks, làm trước Nếu có lỗi xác nhận, tơi lại cho hiển thị view RsvpForm cách gọi phương thức View mà không kèm tham số Chỉ hiển thị form có lỗi khơng tốt lắm, tơi cần phải cung cấp cho người dùng với số dấu hiệu để biết vấn đề chấp nhận form họ Tôi làm điều cách sử dụng phương pháp hỗ trợ Html.ValidationSummary view RsvpForm, Listing 2-18 Listing 2-18 Using the Html.ValidationSummary Helper Method in the RsvpForm.cshtml File @model PartyInvites.Models.GuestResponse @{ Layout = null; } RsvpForm @using (Html.BeginForm()) { @Html.ValidationSummary()

Your name: @Html.TextBoxFor(x => x.Name)

Your email: @Html.TextBoxFor(x => x.Email)

Your phone: @Html.TextBoxFor(x => x.Phone)

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", Value = bool.FalseString} }, "Choose an option")

} Nếu khơng có lỗi, phương thức Html.ValidationSummary tạo danh mục ẩn chỗ cất Form.MVC tạo chỗ cất thêm thơng báo lối định nghĩa thuộc tính cần kiểm tra.Bạn thấy chúng xuất Hình 2-21 Hình 2-21 Sơ lược xác thực liệu Người sử dụng không thấy view Thanks đến tất ràng buộc xác nhận áp dụng cho lớp GuestResponse thỏa mãn Chú ý liệu nhập vào mẫu lưu trữ hiển thị lần view xử lý với xác nhận Đây lợi ích khác tính ràng buộc mơ hình đơn giản hóa làm việc với mẫu liệu Đánh dấu trường không hợp lệ (Highlighting Invalid Fields) Phương thức HTML Helper tạo text boxes, drop-downs thẻ khác có tính tiện dụng mà sử dụng kết hợp với việc ràng buộc Model Một số chế tương tự ràng buộc liệu mà người dùng nhập vào form có sử dụng để đánh vùng bị lỗi việc kiểm tra xác nhận Khi thuộc tính lớp Model xác nhận không hợp lệ, phương thức HTML Helper tạo thẻ HTML khác Như ví dụ, thẻ gọi đến Html.TextBoxFor(x => x.Name) tạo để khơng có xác nhận lỗi: Và số HTML gọi tương tự tạo người dùng không cung cấp giá trị nào( xác thực lỗi tơi áp dụng thuộc tính required đến thuộc tính name lớp mơ hình GuestResponse): Tôi phải đánh dấu khác chữ in đậm: phương thức helper thêm vào class gọi input-validation-error đến thẻ input Tơi tận dụng lợi để tạo style sheet chứa file css cho lớp thứ khác mà phương thức html helper thực thi Các quy ước project MVC nội dung tĩnh, file css đặt vào folder tên content Tạo folder nhấp phải vào PartyInvites Solution Explorer, chọn Add -> New Folder từ menu đặt tên Content Để tạo file css, nhấp phải vào folder Content tạo, chọn Add -> New Item từ menu chọn style sheet Đặt tên file tạo styles.css, hình 2-22 Hình 2-22 : tạo file style sheet Click vào nút Add Visual Studio tạo file Content/ Style.css.Đặt nội dung file listing 2-19 Listing 2-19 Nội dung file Style.css field-validation-error {color: #f00;} field-validation-valid { display: none;} .input-validation-error { border: 1px solid background-color: #fee; } validation-summary-errors { font-weight: color: #f00;} validation-summary-valid { display: none;} #f00; bold; Để sử dụng style sheet Tôi thêm tham chiếu vào phần head view RsvpForm , bạn thấy listing 2-20 Bạn thêm thẻ link vào views bạn thường làm với file HTML tĩnh thông thường, Trong chương 27, tơi bạn tính bundles giúp JavaScript Css hợp với trình duyệt yêu cầu html Tip: Bạn kéo JavaScript CSS file từ cửa sổ Solution Explorer thả chúng vào trình soạn thảo mã Visual Studio tạo script thẻ link cho tập tin bạn chọn Listing 2-20 Thêm thẻ link vào file RsvpForm.cshtml @model PartyInvites.Models.GuestResponse @{ Layout = null; } RsvpForm @using (Html.BeginForm()) { @Html.ValidationSummary()

Your name: @Html.TextBoxFor(x => x.Name)

Your email: @Html.TextBoxFor(x => x.Email)

Your phone: @Html.TextBoxFor(x => x.Phone)

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", Value = bool.FalseString} }, "Choose an option")

} Tip Nếu bạn chuyển đến MVC trực tiếp từ MVC 3, chúng thêm tập tin CSS vào view cách xác định thuộc tính href @Href("∼Content/Site.css")hoặc@Url.Content("∼/Content/ Site.css") Tại MVC 4, Razor phát thuộc tính bắt đầu ~ / tự động chèn @Href @Url cho bạn Với việc áp dụng style sheet, nhiều lỗi xác thực hiển thị liệu gửi lên gây lỗi xác nhận, thể Hình 2-23 Hình 2-23 : Tự động đánh dấu nhập không hợp lệ Style cho nội dung (Styling the Content) Các chức ứng dụng đề ra, ngoại trừ việc gửi email, mà làm xong sớm, quan sát tổng thể sơ sài Mặc dù sách tập trung vào phát triển phía server, Microsoft thơng qua số thư viện mã nguồn mở thêm chúng số dự án Visual Studio Tôi người u thích template này, tơi thường sử dụng số thư viện mà họ sử dụng MVC Bootstrap, thư viện CSS tốt, phát triển Twitter đã sử dụng rộng rãi Bạn không cần sử dụng dự án template Visual Studio sử dụng thư viện Bootstrap Tất nhiên, Bạn tải tập tin trực tiếp từ dự án trang web sử dụng NuGet, tích hợp vào Visual Studio cung cấp quyền truy cập vào danh mục phần mềm đóng gói sẵn mà tải cài đặt tự động Một tính tốt NuGet quản lý phụ thuộc packages bạn cài đặt Bootstrap, ví dụ, NuGet tải cài đặt jQuery, mà số tính Bootstrap cần sử dụng thư viện Sử dụng NuGet để cài đặt Bootstrap Để cài đặt gói Bootstrap, chọn Library Package Manager -> Package Manager Console từ Tools Visual Studio Visual Studio mở dòng lệnh NuGet Nhập lệnh ấn Enter : Install-Package -version 3.0.0 bootstrap Dòng lệnh Install-Package gọi NuGet để tải thêm vào Project Tên gói mà tơi muốn gọi Bootstrap, bạn tìm gói khác thơng qua trang web NuGet (http://www.nuget.org) sử dụng Visual Studio NuGet giao diện người dùng ( chọn Tools -> Library Package Manager -> Manage NuGet Packages for Solution) Cái bootstrap mà muốn sử dụng version 3, phiên ổn định Nếu khơng có phần -version, NuGet tải phiên gói, tơi muốn chắn bạn làm lại ví dụ xác tơi cài đặt phiên cụ thể giúp để đảm bảo tính quán NuGet tải tất tập tin cần thiết cho Bootstrap cho jQuery, c thứ Bootstrap phụ thuộc File css thêm vào folder Content folder Script tạo ra(nơi quy định mà MVC chứa tất file JavaScript) Note : Cái lý mà bạn sử dụng Bootstrap chương để hình dùng tạo file html dễ dàng framework MVC sử dụng css phổ biến với thư viện JavaScript Tôi không muốn tập trung để nói phát triển phía server Tuy nhiên, bạn muốn biết chi tiết đầy đủ code phía client làm việc framework MVC tham khảo sách Pro ASP.NET MVC Client,sẽ xuất Apress năm 2014 Style cho trang Index Bootstrap làm việc cách áp dụng class đến thẻ, thẻ khai báo class chứa folder Content Bạn lấy hết class mà Bootstrap định nghĩa từ link http://getbootstrap.com, bạn xem tơi thực thi số style vào file Index.cshtml Listing 2-21 Listing 2-21 Thêm bootstrap vào file Index.cshtml @{ Layout = null; } Index btn a { color: white; text-decoration: none} body { background-color: #F1F1F1; } We're going to have an exciting party! And you are invited @Html.ActionLink("RSVP Now", "RsvpForm") Tôi thêm thẻ link cho file bootstrap.css bootstraptheme.css thư mục Content Đây tập tin Bootstrap cần thiết cho việc tạo kiểu CSS mà thư viện cung cấp có tập tin JavaScript tương ứng thư mục Scripts, tơi khơng cần chương Tơi xác định thẻ style đặt màu cho thẻ body phong cách văn cho thẻ Tip : Bạn nhận thấy tập tin Bootstrap thư mục Content có file với tiền tố “min” ví dụ, bootstrap.css bootstrap.min.cs File bootstrap.css để bạn dễ đọc thực hành, file để giảm bớt JavaScript CSS triển khai ứng dụng, loại bỏ tất khoảng trắng, trường hợp JavaScript, thay chức tên biến nhãn ngắn Mục tiêu giảm tính chất để làm giảm lượng băng thông cần thiết để đưa nội dung vào trình duyệt Chương 27, tơi mơ tả tính ASP.NET để quản lý q trình tự động Đối với chương hầu hết chương khác sách sử dụng tập tin thơng thường, chuyện bình thường trình phát triển thử nghiệm Sau import style Bootstrap định nghĩa file chúng theo ý mình, tơi cần tạo kiểu cho thẻ tơi Đây ví dụ đơn giản, cần sử dụng ba class css Bootstrap : text-center, btn btnsuccess Class text-center để canh cho nội dung thẻ thẻ Class btn sử dụng cho thẻ button, input thẻ a để thành button đẹp btn-success để xác định màu mà bạn muốn button hiển thị Màu button dựa chủ đề sử dụng Tôi chọn chủ đề default( định nghĩa file bootstrap-theme.css) Nhưng thay đổi với tìm kiếm online Bạn thấy hiệu mà tơi tạo hình 2-24 Hình -24 Style trang Index Tôi nhà thiết kế web Trong thực tế, tơi khơng có tài nghệ thuật Đối với dự án thực sự, tơi tìm chuyên gia để giúp thiết kế phong cách nội dung, ví dụ tơi làm điều có nghĩa áp dụng Bootstrap với nhiều yếu cầu quán tập hợp Style cho view RsvpForm Bootsrap định nghĩa class mà sử dụng tạo kiểu cho form Tôi không vào chi tiết, bạn thấy tơi áp dụng lớp Listing 2-22 Listing 2-22 Thêm bootstrap vào file RsvpForm.cshtml @model PartyInvites.Models.GuestResponse @{ Layout = null; } RsvpForm RSVP @using (Html.BeginForm()) { @Html.ValidationSummary() Your name: @Html.TextBoxFor(x => x.Name, new { @class = "formcontrol"}) Your email: @Html.TextBoxFor(x => x.Email, new { @class = "formcontrol"}) Your phone: @Html.TextBoxFor(x => x.Phone, new { @class = "formcontrol"}) 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", Value = bool.FalseString} }, "Choose an option", new { @class = "formcontrol" }) } Các class Bootstrap ví dụ tạo panel với tiêu đề để tạo cấu trúc cho layout Để tạo kiểu cho form, sử dụng lớp formgroup, sử dụng để tạo kiểu cho thẻ có chứa label input thẻ select Những thẻ tạo cách sử dụng phương thức HTML helper, có nghĩa khơng có thẻ xác định sẵn mà tơi áp dụng yêu cầu class form-control May mắn thay, phương pháp helper tạo đối tượng tùy chọn cho phép tơi định thuộc tính thẻ mà họ tạo ra, sau: @Html.TextBoxFor(x => x.Name, new { @class = "formcontrol"}) Tôi tạo đối tượng sử dụng tính loại ẩn danh C #(anonymous type),mô tả chương quy định thuộc tính lớp nên thiết lập để hình kiểm sốt yếu tố mà helper TextBoxFor tạo Các thuộc tính xác định đối tượng sử dụng cho tên thuộc tính thêm vào thẻ HTML class từ dành riêng ngơn ngữ C #, tơi phải thêm tiền tố với @ Đây tính # C tiêu chuẩn cho phép từ khóa sử dụng biểu thức Bạn xem kết style hình 2-25 hình 2-25: Tạo kiểu cho trang RsvpForm Style cho view Thanks File view cuối Thanks.cshtml bạn thấy tơi hồn thành Listing 2-23 Bạn nhận thấy đánh dấu thêm vào tương tự view Index.cshtml Để thực ứng dụng dễ dàng quản lý, quy tắc tốt để tránh lặp lại mã đánh dấu nơi có thể, Chương Tơi giới thiệu bạn với Razor layouts Chương 20, tơi mơ tả partial views, hai sử dụng để giảm trùng lặp đánh dấu Listing 2-23 Áp dụng Bootstrap đến file Thanks.cshtml @model PartyInvites.Models.GuestResponse @{ Layout = null; } Thanks body { background-color: #F1F1F1; } Thank you, @Model.Name! @if (Model.WillAttend == true) { @:It's great that you're coming The drinks are already in the fridge! } else { @:Sorry to hear that you can't make it, but thanks for letting us know } Class lead style bootstrap mà bạn thấy hiệu ứng hình 2-26 hình 2-26 : tạo kiểu cho Thanks view Hồn thành ví dụ u cầu cuối cho ứng dụng ví dụ tơi e-mail hoàn thành RSVPs đến nhà tổ chức bữa tiệc Tơi làm điều cách thêm action method để tạo gửi tin nhắn e-mail cách sử dụng class e-mail NET Framework-và kỹ thuật phù hợp với mơ hình MVC Thay vào đó, tơi sử dụng phương pháp WebMail helper Đây phần MVC framework, cho phép tơi hồn thành ví dụ mà không bị sa lầy vào chi tiết việc thiết lập phương tiện khác việc gửi e-mail Tôi muốn e-mail gửi thị view Thanks Bảng listing 2-24 cho thấy thay đổi mà cần phải áp dụng Listing 2-24 Sử dụng WebMail Helper vào file Thanks.cshtml @{ try { WebMail.SmtpServer = "smtp.example.com"; WebMail.SmtpPort = 587; WebMail.EnableSsl = true; WebMail.UserName = "mySmtpUsername"; WebMail.Password = "mySmtpPassword"; WebMail.From = "rsvps@example.com"; WebMail.Send("party-host@example.com", "RSVP Notification", Model.Name + " is " + ((Model.WillAttend ?? false) ? "" :"not") + "attending"); } catch (Exception) { @:Sorry - we couldn't send the email to confirm your RSVP } } Thank you, @Model.Name! @if (Model.WillAttend == true) { @:It's great that you're coming The drinks are already in the fridge! } else { @:Sorry to hear that you can't make it, but thanks for letting us know } Note Tôi sử dụng WebMail helper cho phép minh hoạ việc gửi tin nhắn e-mail với tốn cơng Tuy nhiên, ưu tiên đưa chức vào action method Tơi giải thích lý tơi mơ tả kiến trúc mơ hình MVC Chương Tôi thêm mô tả Razor có sử dụng WebMail helper để cấu hình chi tiết máy chủ e-mail tôi, bao gồm tên máy chủ,các máy chủ đòi hỏi kết nối SSL, chi tiết tài khoản Một cấu hình tất chi tiết, tơi sử dụng phương thức WebMail.Send để gửi e-mail Tơi đóng gói tất code e-mail khối try…catch để tơi cảnh báo người dùng e-mail không gửi Tôi làm điều cách thêm khối văn nội dung thông báo view Thanks Một cách tiếp cận tốt hiển thị view báo lỗi tin nhắn e-mail không gửi muốn giữ cho thứ đơn giản cho ứng dụng MVC Tóm lượt Trong chương này, tạo dự án MVC sử dụng để xây dựng ứng dụng nhập liệu MVC đơn giản, đem lại cho bạn nhìn thống qua kiến trúc cách tiếp cận MVC Framework Tơi bỏ qua số tính (bao gồm cú pháp Razor, routing tự động test), quay trở lại với đề tài cách chiều sâu chương sau Trong chương tiếp theo, mô tả kiến trúc MVC, mẫu thiết kế, kỹ thuật mà tơi sử dụng suốt phần lại sách tạo thành tảng cho phát triển có hiệu với MVC Framework ... liên kết RSVP Now, thêm số liệu vào form, nhấn nút Submid RSVP Bạn thấy kết thể hình 2- 20 (mặc dù khác tên bạn khơng phải Joe hay bạn nói bạn khơng thể tham dự) Hình 2- 20 The Thanks view Thêm phương... giản lớp controller.Sửa code file HomeController.cs theo Listing 22 ,tơi đánh dấu dòng có thay đổi để xem chúng rõ ràng Listing 2- 2 Tuỳ chỉnh file HomeController.cs using using using using using... Chọn Start Debugging từ Menu Debug để chạy ứng dụng kiểm tra xem Bạn thấy tương tự hình 2- 12 Figure 2- 12 Testing the view Khi lần sửa phương thức Index, trả giá trị chuỗi Điều có nghĩa MVC khơng

Ngày đăng: 09/11/2019, 07:23

TỪ KHÓA LIÊN QUAN