Đang tải... (xem toàn văn)
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