10 chuong 10

SPORTSSTORE

Yourcart:

element, nghĩa chúng khơng thể dùng cơng cụ Html.ActionLink helper khơng cung cấp khả đặt nội dung vào element tạo Thay vào định nghĩa element trực tiếp sử dụng công cụ trợ giúp Url.Action (miêu tả chương 23).Để khởi tạo URL cho thuộc tính href.Câu trả lời element với thuộc tính tạo vởi Html.ActionLink bao gồm slement Chúng ta thấy thay đội file hình 10-4, biểu diễn nội dung header iPhone Figure 10-4.The modified SportsStore header displayed on an iPhonesimulator MOBILE FIRST VERSUS DESKTOPFIRST Hầu hết dự án web project bắt đầu với desktop slient sau hỗ trợ cho mobile client, tương tự thực sách Đây gọi thiết kế phát triển theo hướng desktop first vấn đề nằm việc phát triển phía server cần hồn thiện nhiều trước phát triển cho mobile client, kết trải nghiệm mobile trở nên gượng gạo nhiều tính vốn sử dụng desktop client Có triết lý gọi phát triển theo hướng Mobile first có nghĩa theo tên gọi, phát triển cho mobile client làm tảng cho ứng dụng thêm tính tận dụng khả desktop browser Hoặc nói cách khác, desktop first có xu hướng bắt đầu với tính đầy đủ sau giảm bớt cho thiết bị với khả mobile first xu hướng bắt đầu với tính nâng cấp lên cho thiết bị với khả đáp ứng tốt Cả hai hướng tiếp cận có tích cực, riêng tơi thường thích hướng desktop fist dễ dàng để desktop browser lấy nội dung từ môi trường làm việc.Điều lại khó khăn đơi với thiết bị mobile Tơi có xu hướng làm vòng tròn chặt chẽ việc viết, biên dịch kiếm tra, nghĩa reload lại đường dẫn URL liên tục, điều lại khiến khổ sở áp vào vòng làm việc phát triển theo hướng mobile first thiết bị mobile Sự nguy hiểm đặt nhóm người dùng lên trước tạo trải nghiệm chất lượng nhóm kia, Những người ủng hộ xu hướng mobile first thường tranh cãi điều bắt đầu với tính đẩy lên, điều tơi (tác giả) chưa trải nghiệm The danger in putting any group of users first is that you create a substandard experience for another group, just moving the pain around Proponents of mobile first design often argue that this can’t happen when you start with the basic features and then scale up, but that has not been my experience Điều quan trọng cần có kế hoạch chắn cho tính mà layout truyền tải đến tất thiệt bị trước bắt đầu phát triển loại Khi có kế hoạch thế, khơng quan trọng thiết bị bắt đầu trước đặc biệt, phần bên phía server ứng dụng xây dựng sở phục vụ tất đối tượng client Creating a Responsive ProductList (Tạo danh sách sản phẩm Responsive) Để hồn tất việc tương thích responsive, cần danh sách sản phẩn liệt kệ thiết bị có hình hiển thị hẹp Vấn đề lớn không gian bề ngang chiếm dụng nút category.Chúng ta chuyển nút chỗ khác, cho phần mô tả sản phẩm chiếm toàn bề ngang phần hiển thị Hình 10 -3, thấy tơi chỉnh sửa thêm vào file _Layout.cshtml Listing 10-3.Creating a Responsive Product List in the _Layout.cshtml File @ViewBag.Title navbar-right{ float: right!important; margin-right: 15px; margin-left:15px; } SPORTSSTORE SPORTS STORE @Html.Action("Summary","Cart") @Html.Action("Menu","Nav") @RenderBody() Chỉ có lời gọi đến hàm RenderBody layout này.Chúng ta vào chi tiết layouts chương 20 tác động hạn chế khiến khơng thể có thêm element để giấu hiện, cần lời gọi đến RenderBody Thay vào đó, cần đổi layout lưới kèm theo lời gọi hàm RenderBody cho phép element layout tương thích với nội dung view Một lý sử dụng cấu trúc Bootstrap dáng lưới cho nội dung _Layout.cshtml chương bao gồm chức thiết kế responsive cho phép làm việc với hạm chế RenderBody Cấu trúc layout dạng lưới Bootstrap hỗ trợ 12 cột xác định element cách đặt vào class, đây, cách thiết lập lớp Bootstrap chương @RenderBody() Cũng giống hidden-* visible-* mô tả trước đây, Bootstrap cung cấp lớp đặt số lượng column dạng lưới dựa theo bề rộng cửa sổ Các lớp col-xs-* chỉnh sửa không thay đổi theo bề rộng hình hiển thị Chúng ta sử dụng lớp col-xs-8 cho Bootstrap biết element nên cách khoảng 12 cột hiển thị element không đươc thay đổi theo bề ngang cửa sổ Nhóm lớp col-sm-* đặt cột cửa sổ 768 pixel rộng hơn.Lớp col-md-* làm việc với cửa sổ 992 pixel rộng cuối col-lg-* làm việc với cửa sổ có độ rộng 1200 pixel rộng Lun phải ý bề rộng, ví dụ class đặt vào element xung quanh lời gọi tới hàm RenderBody List 10-3 @RenderBody() Kết class element chiến toàn 12 cột lưới cột hình mức 768 px rộng Những cột khác lưới bao gồm nút category sau @Html.Action("Menu","Nav") Element chiếm cột hình rộng 768 pixel ẩn trường hợp khác.Kết hợp với lớp khác đưa vào, hiệu đạt phần mô tả sản phẩm lấp đầy cửa sổ nhỏ chia sẻ không gian với nút bategory cửa sổ lớn hơn.Chúng ta thấy layout hình 10-5 Tơi sử dụng desktop browser cho ví dụ nàu tơi dễ dàng thay đổi bề rộng cửa sổ Figure 10-5.Using a responsive grid in the productlayout Helping the Controller Select aView (Giúp Controller chọn View) Tôi không muốn người dùng mobile bỏ qua khả lọc sản phẩm, nghĩa cần biểu diễn category theo hướng khách Để làm điều này, tạo view gọi MenuHorizontal.cshtml Views/Nav folder với nội dung List 10-4 Listing 10-4 The Contents of the MenuHorizontal.cshtmlFile @modelIEnumerable @Html.ActionLink("Home", "List", "Product", new { @class = "btn btndefault btn-sm"}) @foreach (var link in Model){ @Html.RouteLink(link, new { controller = "Product", action = "List", category =link, page=1 }, new{ @class = "btn btn-defaultbtn-sm" + (link == ViewBag.SelectedCategory ?" btn-primary" :"") }) } Đây phiên thay đổi so với gốc Menu.cshtml layout với vùng chứa dùng element số lớp Bootstrap để tạo layout bề ngang button Chức giữ nguyên Chúng ta tạo nhóm liên kết lọc sản phẩm theo Category Bộ category button tạo thông qua Menu action method controller Nav, cần update controller để lựa chọn đến file view dựa yêu cầu tập trung vào nút bấm List 10-5 Listing 10-5.Updating the Menu Action Method in the NavController.cs File using System.Collections.Generic; usingSystem.Web.Mvc; using SportsStore.Domain.Abstract; usingSystem.Linq; namespace SportsStore.WebUI.Controllers { public class NavController : Controller{ private IProductRepositoryrepository; public NavController(IProductRepository repo) { repository =repo; } public PartialViewResult Menu(string category = null, bool horizontalLayout = false){ ViewBag.SelectedCategory = category; IEnumerable categories =repository.Products 10 .Select(x =>x.Category) Distinct() OrderBy(x =>x); "Menu"; } } } string viewName = horizontalLayout ? "MenuHorizontal" : return PartialView(viewName,categories) Chúng ta định nghĩa tham số cho action method xác định chiều, dùng để chọn view file truyền đến hàm PartialView Để đặt giá trị cho tham số này, cần quay lại file _Layout.cshtml List 10-6 Listing 10-6.Updating the _Layout.cshtml File to Include the Horizontal Buttons SPORTSSTORE SPORTS STORE @Html.Action("Summary","Cart") @Html.Action("Menu", "Nav", new { horizontalLayout = true}) @Html.Action("Menu","Nav") @RenderBody() 11 Tham số không bắt buộc đến hàm html.Action object cho phép đặt giá trị cho hệ thống định tuyến, đề cập chương 15,16 Chúng ta sử dụng tính để liên hệ xem controller nên chọn Kết tổng quát đạt được thể hình hình 10-6 Figure 10-6 The revised product listing for smallscreens Chúng ta thấy việc di chuyển nút lên danh sách sản phẩm tạo đủ khỏng trống cho sản phẩm hiển thị cách tương đối Chúng ta tiếp tục cải tiến để view trở nên cân đối nhiên nắm ý tưởng Thay diễn giải cụ thể việc lớp responsive CSS sử dụng nào, muốn chạm đến hạn chế MVC Framework (ví dụ hạn chế hàm RenderBody )và số sở cung cấp nhầm hỗ trợ phát sinh nội dung theo cách khác (ví dụ như truyền liệu từ View vào Controller thông qua hệ thống định hướng hàm trợ giúp Html.Action ) Lưu ý Chúng ta tập trung chủ yếu vào iPhone, đừng quên thiết bị di động cho phép tập trung vào nhiều hướng phải cung cấp đầy đủ cho chúng project thực tế Loại bỏ lặp lại View Trong ví dụ trước, tơi muốn cho bạn thấy khiến controller lựa chọn view dựa vực định hướng thông tin truyền lời gọi từ hàm trợ giúp Html.Action Đây tính quan trọng hữu ích tơi muốn sử dụng project thực để lại cho view bao gồm Menu.cshtml MenuHorizontal.cshtml, chứa đoạn khai báo razor tương tự Đây cơng đoạn bảo trì rủi ro thay đổi yêu cầu nút lọc category phải đặt hai nơi Để giải vấn đề củng cố lại view Chúng ta tạo view file tên FlexMenu.cshtml folder Views/Nav với nội dung List 10-7 Listing 10-7 The Contents of the FlexMenu.cshtmlFile @modelIEnumerable @{ boolhorizontal =((bool)(ViewContext.RouteData.Values["horizontalLayout"] ??false)); string wrapperClasses = horizontal ? "btn-group btn-group-sm btn-groupjustified" :null; } 12 @Html.ActionLink("Home", "List","Product", new{@class= horizontal ? "btnbtn-defaultbtn-sm": "btn btn-block btn-defaultbtn-lg" }) @foreach (var link in Model){ @Html.RouteLink(link, new { controller = "Product", action = "List", category =link, page=1 }, new{ @class = (horizontal ?"btnbtn-defaultbtn-sm" : "btn btn-block btn-default btn-lg") + (link == ViewBag.SelectedCategory ?" btn-primary" :"") }) } Cái giá cho việc loại bỏ việc nhân view dùng view phức tạp phát sinh hướng tập trung nút Đây vấn đề mang yếu tố cá nhân tùy theo bạn thích hướng tiếp cận Nếu bạn giống tơi, tơi có xu hướng tránh việc lặp lại , sau liệt kê số tính bạn muốn thêm vào views Đầu tiên khả truy cập vào định tuyến thông tin trực tiếp từ view Thuộc tính ViewContent cung cấp thơng tin trạng thái thời yêu cầu xử lý bao gồm chi tiết thông tin định tuyến sau boolhorizontal =((bool)(ViewContext.RouteData.Values["horizontalLayout"] ??false)); Tính thứ hai khả tạo biến cục bên view Điều khả thi mà Razor view biện dịch thành class (sẽ miêu tả Chương 20), tạo biến cục gọi horizontal nghĩa không cân kiểm tra định tuyến liệu xuyên suốt danh sách để tìm hướng tập trung mà view sử dụng Chú ý biến cục nên hạn chế sử dụng dốc tạo view khiến khó bảo trì khó để kiểm thử, nên dùng trường hợp mà giá xứng đáng cho việc đơn giản hóa view Một tính liên quan mà Razor thiết lập thuộc tính có điều kiện dựa vào biến Tôi định nghĩa class có tên gọi kiểu string có biến cục view sau string wrapperClasses = horizontal groupjustified" :null; ? "btn-group btn-group-sm btn- Giá trị biến wrapperClasses đoạn string tên class mà dùng cho layout theo chiều nang null Tơi đặt biến vào thuộc tính lớp sau Khi biến null, Razor đủ thơng minh để loại bỏ hồn tồn thuộc tính class element , khởi tạo element sau Khi mà biến khơng null, Rzor thêm vào giá trị để nguyên thuộc tính class, cho kết sau 13 Đây cách hay để nhóm đặc tính C# với mặt ý nghĩa HTML tính vơ hữu ích viết view phức tạp khơng thêm giá trị null vào thuộc tính khơng phát sinh thuộc tính rỗng vốn gây lỗi với hàm chọn CSS (và số thư viện Javascript dùng thuộc tính để chọn elements, cụ thể jQuery) Lưu ý: thuộc tính điều kiện hoạt động biến, bao gồm biến định nghĩa view Điều có nghĩa sử dụng tính thuộc tính model viewbag Để sử dụng view củng cố, cần xem lại Menu action method controller Nav List 10-8 Listing 10-8.Updating the Menu Action in the NavController.cs File public PartialViewResult Menu(string category = null){ ViewBag.SelectedCategory = category; IEnumerable categories =repository.Products Select(x =>x.Category) Distinct() OrderBy(x =>x); return PartialView("FlexMenu",categories); } 14 Tôi bỏ tham số nhận thông tin thay đổi hướng tập trung (orientation: hướng hình quay ngang hay dọc, ám hình chế độ ngang dọc)và thay đổi lời gọi đến PartialView method FlexMenu ln ln chọn Kết thay đổi không làm thay đổi layout nội dung hay ảnh hưởng đến thiết kế responsive hồn tồn loại bỏ việc lặp view nghĩa xóa Menu.cshtml MenuHorizontal.cshtml view VS project Cả hai hướng tập trung nút lọc category tạo FlexMenu.cshtml view THE LIMITATIONS OF RESPONSIVEDESIGN (Hạn chế Responsive Design) Có số vấn đề Responsive design hỗ trợ tập trung nhiều vào mobile client Đầu tiên bị tình trạng nhân nhiều nội dung gửi đến server để hiển thị tình khác Chúng ta thấy điều phần trước HTML phát sinh vởi layout có chứa nhiều element dành cho phần header nút lọc category Những elements thêm vào không ngốn nhiều lời gọi tổng quan, tác động cua ứng dụng mức busy lớn mà làm tăng lượng băng thông cần để cung cấp.dấn đến việc gia tăng giá thành vận hành Vấn đề thứ hai responsive design khó sử dụng đòi hỏi nhiều công sức để kiểm thử để đạt kết mong đợi Không phải tất thiết bị cầm tay có tính CSS cho phép responsive design (thường biết đến media queries) bạn không thật tỉ mỉ cẩn trọng, bạn tạo ứng dụng cung cấp trả nghiệm tương đương đối vời thiết bị mà không xuất sắc thiết bị nào, kiểu hoạt động mức trung bình thiết bị Xây dựng nội dung cụ thể cho Mobile Responsive design đưa đến nội dung thiết bị sử dụng CSS để xem thức bố trí nội dung Cơng đoạn khơng liên quan đến phần bên phía server-side ứng dụng, giả định muốn xem tất kiểu thiết bị theo Một hướng tiếp cận thay dùng server để đánh giá khả browser phía client gửi đoạn code HTML khác đến người dùng khác nhau.Việc tốt muốn thể khía cạnh hồn toàn khác ứng dụng desktop tablet Lưu ý: Chúng ta không cần chọn responsive design xây dựng nội dung cụ thể cho mobile Trong hầu hết project, cần phải sử dụng hai để đạt kết tốt đối tượng thiết bị mà nhắm đến Ví dụ định tạo nội dung dành riêng cho tablet dùng responsive design để tạo hướng ngang dọc mà hầu hết tablet hỗ trợ MVC framework hỗ trợ tính gọi display modes, cho phép tạo views khác chuyển đến client dựa vào client gửi yêu cầu, tính cung cấp ASP.NET Framework Tơi giải thích cách tạo quản lý display modes chuyên sâu Pro ASP.NET MVC Platform nhằm mục đích phục vụ ứng dụng SportsStore, dùng form display modes, đối xử với thiết bị mobile tương tự Mục tiêu chuyển trải nghiệm người dùng đến thiết bị mobile dùng thư viện jQuery phổ biến cho Mobile, giữ nguyên nội dung thiết bị Desktop Ghi chú, không vào chi tiết jQuery Mobile sách thay giải thích cách dùng để chuyển nội dung lên thiết bị di động cụ thể Để biết thêm chi tiết jQuery Mobile, tìm đọc Pro jQuery 2.0 nhà xuất Apress Creating a MobileLayout (Tạo Mobile Layout) Tất cần là tạo nội dung dành riêng cho thiết bị mobile để tạo view layout có hậu tố Mobile.cshtml Chúng ta tạo layout gọi _Layout.Mobile.cshtml Views/Shared folder với nội dung List 10-9 Chú ý: Bởi tên View có thêm dấu chấm, cần tạo view cách chuột phải Shared folder chọn Add>MVC5 Layout Page (Razor) cửa sổ pop-up Listing 10-9 The Contents of the _Layout.Mobile.cshtml File 15 @ViewBag.Title SportsStore @Html.Action("Menu","Nav")

@RenderBody() Layout sử dụng jQuery Mobile, lấy thơng qua content delivery network (CND), khơng cần cài đặt gói NuGet cho JavaScript CSS file mà cần Chú ý: Tôi vừa lướt qua phần việc tạo view dành riêng cho mobile, dùng controller action method cho desktop client Tách view cho phép giới thiệu controllers khách nhau, giống dành riêng cho nhóm clients, dùng để tạo tính hồn tồn chức cho đối tượng khách hàng khác MVC Framework tự động xác định mobile client dùng file _Layout.Mobile.cshtml dựng views, cách kín đáo thay _Layout.cshtml file vốn dùng cho client khác Chúng ta thấy tác động thay đổi Hình 10-7 Figure 10-7.The effect of creating a mobile layout in the SportsStoreapplication Chúng ta thấy layout khác hiệu ứng tổng quan lộn xộn cần tạo mobile version view 16 xử lý request partial view dùng cho nút lọc category Tạo Mobile Views Chúng ta lọc category, nghĩa tạo view FlexMenu.Mobile.cshtml Views/Nav folder với nội dung List 10-10 Listing 10-10 The Contents of the FlexMenu.Mobile.htmlFile @modelIEnumerable

@Html.RouteLink(link, new { controller = "Product", action = "List", category =link, page=1 }, new{ data_transition ="fade", @class = (link ==ViewBag.SelectedCategory ? "ui-btn-active" :null) }) }

View dùng hàm Razor foreach để khởi tạo

element cho product category, tạo elements đặt theo cách mà jQuery Mobile trông đợi cho navigation bar nằm trang web Chúng ta thấy tác động hình 10-8 Figure 10-8 The effect of creating a mobile-specificview Chú ý: jQuery Mobile phụ thuộc vào việc sử dụng liệu thuộc tính để định dạng elements Thuộc tính liệu bắt đầu với data- cách khơng thức để định nghĩa thuộc tính nhiều năm trước trở thành phần thức chuẩn HTML5 Trong danh sách, tơi cần thêm vào thuộc tính data-transition vào

element dùng data-transition thuộc tính tên cho anoymous object expression C# Vấn đề dấu gạch (-) nối Razor làm việc cách dịch dấu (_ )trong thuộc tính tên gọi thành dấu( - ) thuộc tính tên giống tơi dùng data_transition danh sách lấy thuộc tính data-transition elements mà tơitạo 17 Thơng tin product lộn xộn nút category phát sinh view dành riêng cho mobile Việc đáng để bỏ khoảng thời gian để phản ánh cách MVC Framework làm để dựng lên nội dung hình 10-8 HTTP request browser nhắm đến List action method Product controller, cho MVC biết để dựng List.cshtml file MVC Framework biết request đến từ mobile browser nên tìm đến view dành riêng cho thiết bị mobile Khơng có file List.Mobile.cshtml nên List.cshtml file xử lý thay vào đó.View dựa vào file _Layout.cshtml MVC Framework nhận có phiên dành cho mobile nên dùng _Layout.Mobile.cshtml để thay Layout yêu cầu file FlexMobile.cshtml có phiên mobile cho file Kết phản hồi từ browser phát sinh từ view dành cho mobile lần view thông thườngMVC Framework dùng file view cụ thể dùng lại bị giảm cần đến THE TWO PROBLEMS IN THEEXAMPLE vấn đề ví dụ Ví dụ chương định để mơ tả cách MVC Framework truyền tải nội dung dành riêng cho mobile, thật thiếu sót khơng vấn đề nghiêm trọng ví dụ gây cho ứng dụng SportStore Đầu tiên cung cấp tính thiết bị Mobile so với thiết bị Desktop,lấy ví dụ việc khơng có tổng hợp thơng tin giỏ hàng phần header Tôi bỏ bớt số chức để đơn giản cho thay đổi khuyên không nên cung cấp sản phẩm lược bớt tính cho thiết bị trừ có hạn chế khơng cho phép thiết bị hỗ trợ Tiết bị Mobile ngày phổ biến đến người dùng nhiều người dùng truy cập vào ứng dụng mobile browser Chuyện bạn nghĩ mobile thiết bị bổ sung cho desktop khơng Vấn đề thứ hai tơi khơng đưa khả cho phép user chuyển desktop layout Đứng đánh giá thấp số lượng người dùng thích dùng desktop layout thiết bị mobile, gượng gạo, kèm theo thao tác phóng to cuộn hình nhỏ Một số thiết bị Mobile cho phép hình lớn kết nối, điều khó mà nhận chế MVC Framework dùng để nhận diện thiết bị mobile Chúng ta nên cho phép người dùng mobile lựa chọn kiểu layout họ muốn Cả vấn đề kể khơng ảnh hướng q trình triển khai ứng dụng chúng ta, thất bại người dùng ứng dụng thiết bị mobile Thiết bị mobile phần quan trọng ứng dụng web đại nên lường trước để cung cấp trải nghiệm tốt người dùng loại thiết bị Thay đổi cuối tạo phiên mobile phát sinh thông tin tổng quan product Tôi tạo view file gọi ProductSummary.Mobile.cshtml folder Views/Shared với nội dung hình 10-11 Listing 10-11 The Contents of the ProductSummary.Mobile.cshtmlFile @modelSportsStore.Domain.Entities.Product @Model.Name @Model.Description (@Model.Price.ToString("c")) @using (Html.BeginForm("AddToCart", "Cart")){ @Html.HiddenFor(x =>x.ProductID) @Html.Hidden("returnUrl",Request.Url.PathAndQuery) 18 } View dùng jQuery Mobile widget cho phép user mở tắt vùng nội dung Đây cách lý tưởng để biểu diễn thơng tin product cách đơn giản nhấn mạnh phần cho nội dung dành riêng cho mobile thay thư viện jQuery Mobile Chúng ta thấy tác động 10-9 Figure 10-9 The effect of mobile-specificviews Trong project thực tế, phải tiếp tục, tạo phiên view dành riêng cho mobile hiển thị đường dẫn phân trang, giỏ hàng checkout form Tuy nhiên thấy cách MVC Framework cho phép nhắm đến thiết bị mobile Tổng hợp Trong chương biết hai kỹ thuật để xử lý thiết bị mobile: responsive design nội dung dành riêng cho mobile Responsive Design không trực tiếp liên quan đến MVC Framework, gửi nội dung đến tất browser cho phép browser tự tìm cách xử lý nội dung Nhưng tơi nêu, có nhiều hạn chế cách views làm việc đòi hỏi suy nghĩ cẩn thần số tính Razor cho phép giảm bớt trình xử lý Tạo nội dung dành riêng cho mobile tính MVC Framework tham gia cách tự đập áp view dành cho mobile layout khả dụng hòa trộn vào q trình dừng lên HTML cho phía client Trong chương thêm số tính cần thiết để quẩn trị SportStore product catalog 19 ... lọc category, nghĩa tạo view FlexMenu.Mobile.cshtml Views/Nav folder với nội dung List 10- 10 Listing 10- 10 The Contents of the FlexMenu.Mobile.htmlFile @modelIEnumerable ... quan tâm Vì tranh luận mà không chiến thắng Trong hình 10- 1, thấy nội dung header điều chỉnh Layout.cshtml project SportsStore.WebUI Listing 10- 1.Adding Responsive Content to the _Layout.cshtmlFile... cửa sổ Điều chỉnh sổ nhỏ lại (bé 786 pixels) thấy dòng chữ SportsStore đẩy thành dòng hình 10- 3 Figure 10- 3.Using Bootstrap responsive design features to adjust the applicationbranding Đây thay