10 chuong 10

CHAPTER10 SportsStore:Mobile Không thể trốn tránh phổ biến thiết bị smartphone tablet.Nếu bạn muốn truyền ứng dụng đến với nhiều người tiêu dùng có thể, bạn phải trọng vào giới web browser di động Nếu nghe khơng thích thú lắm, cụm từ Mobile web browser liên tưởng đến từ nhanh chóng, khả trình duyệt đại đối thủ cạnh tranh với trình duyệt desktop lại thành chậm chạp, không phù hợp lỗi thời Tóm lại gửi truyền tải trải nghiệm tốt đến nguoi dùng thiết bị di động khó, khó nhiều so với việc truyền nội dung đến desktop Nó cần lên kế hoạch cẩn thận, thiết kế mà nỗ lực kiểm thử lớn dễ bị phát thiết bị smartphone hay tablet đời Putting Mobile Web Development inContext (Đặt vấn đề việc phát triển ứng dụng Web Mobile) MVC Framework có tính giúp việc phát triển modile MVC Framework lại server-side Framework nhằm mục đích nhận HTTP request hồi đáp HTML Điều có hạn chế đối mặt với những yêu cầu tính gặp phải nhắm đến đối tượng khách hàng sử dụng thiết bị di động.Mức độ mà MVC Framework hỗ trợ phụ thuộc vào chiến lược di động động mà bạn dự định Có chiến lược web mobile bạn tuân theo Chúng ta đề cập phần Ghi chú: Có lựa chọn thứ tạo ứng dụng gốc, khơng bàn khơng liên quan trực tiếp đến MVC Framework hay ứng dụng web Không làm (hoặc làm có thể) Nó ý tưởng kỳ lạ không làm cả, số thiết bị mobile có khả xử lý nội dung vốn phát triển dành cho desktop client.Nhiều thiết bị công bố gần có độ phân giải độ hiển thị cao với browser có nhớ lớn dựng HTML chạy Javascript cách nhanh chóng.Nếu ứng dụng bạn khơng đòi hỏi q nhiều, bạn nhận thiết bị mobile không gặp phải nhiều vấn đề hiển thị nội dung ứng dụng bạn Một ví dụ hình 10-1 cho thấy Ipad hiển thị ứng dụng SportsStore mà chỉnh sửa Figure 10-1.Displaying the SportsStore application on atablet Nó thực cơng việc tốt Vấn đề gặp phải vùng link phân trang bị đẩy xuống đáy trang, điều dễ dàng điều chỉnh cách thay đổi số lượng sản phẩm hiên thị trang Chú ý: Hình ảnh thấy chương lấy từ Browserstack.com, dịch vụ kiểm thử browser đa tảng sử dụng để kiểm thử project Nó khơng dịch vụ hồn hảo.Đơi chậm chạp phân mảnh sử dụng ngồi lãnh thổ US, thiết bị mobile giả lập.Chúng sử dụng để hỗ trợ browser desktop, hoạt động mạnh lại nhận kết ý không cần phải bảo trì giả lập Các bạn nhận dùng thử miễn phí theo ví dụ chương có nhiều đối thủ cạnh tranh muốn có thêm lựa chọn khác Ghi nhớ chúng tơi khơng có mối quan hệ với Browser stack, khách hàng bình thường, vốn chi trả đầy đủ tiền cho sản phẩm không nhận lấy quan tâm đặc biệt Sử dụng thiết kế có tính tương tác (Responsive Design) Hướng tạo nội dung tương thích với khả thiết bị hiển thị nó, gọi responsive design Chuẩn CSS có tính cho phép thay đổi thuộc tính element dựa vào khả thiết bị, kỹ thuật sử dụng nhiều thay đổi cấu trúc layout nội dung dựa vào độ rộng hình hiển thị Responsive design thiết kế xử lý phía client dùng CSS khơng trực tiếp quản lý MVC Framework.Chúng ta sâu vào chủ đề responsive design sách Pro ASP.NET MVC Client book Tuy nhiên để chứng minh cách kỹ thuật áp dụng (và số điều cân nhắc có liên quan đến MVC Framework), sử dụng số tính thiết kế bao gồm thư viện Bootstrap vốn sử dụng xây dựng giao diện cho ứng dụng SportStore (nó trở thành số giao diện MS tích hợp vào MVC project cho Visual Studio 2013) Mục tiêu chúng là điều chỉnh giao diện phần nội dung ứng dụng cho phép hiển thị iPhone Chiến lược “khơng làm cả” không đáp ứng thiết bị hình hiển thị hẹp hình 10-2 Figure 10-2.Displaying the SportsStore application on asmartphone Chúng ta đối mặt với vấn đề theo vùng, tập trung vào khía cạnh khác layout Mục tiêu trì tất tính ứng dụng biểu diễn theo cách khác Ghi chú: MVC Framework không tham gia vào responsive design, gửi cho browser nội dung để tự xác định bit hiển thị Điều đồng nghĩa với khơng có cách để thêm unit test cho repsonsive design Visual Studio Đây kỹ thuật đòi hỏi cẩn thận khâu kiểm thử từ phía client khó để tự động hóa Tạo Responsive Header Chúng ta bắt đầu với phần header trang web, bao gồm tên SportsStore, thông tin chung giỏ hàng nút Checkout Mặc dù giả pháp đơn giản loại bỏ phần tên SportsStore giải phóng khơng gian cho nội dung khác nhiên giữ lại phần (xem lại phần Accepting the realities of Branding (Chấp nhận có mặt nhãn hiệu) sidebar) xếm lại nội dung khác thành hàng ACCEPTING THE REALITIES OFBRANDING (Chấp nhận diện nhãn hiệu) Một cách đơn giản để giải phóng khơng gian hình loại bỏ thương hiệu bạn khỏi ứng dụng Chúng ta cần biểu diện tên SportsStore dạng text nhung thấy diện tích hình mà chiếm dụng Nhãn hiệu vốn khiêm tốn hình desktop trở thành thứ chiếm dụng không gian smartphone One of the easiest ways to free up screen real-estate is to remove your branding from the application I am only displaying the SportsStore name as text, but you can see how much of the screen it occupies What was a modest degree of branding on the desktop becomes a space hog on a smart phone Loại bỏ nhãn hiệu vốn khó, nhiên Khơng phải lý kỹ thuật nhóm phát triểu thương hiệu bị ám ảnh việc đặt thương hiệu lên thứ.Đây lí thấy bút có in thương hiệu cơng ti phòng họp, ly tách phòng nghỉ lí bạn phải làm business card sau 18 tháng với logo Việc thay đổi nhãn hiệu thương xuyên người làm thiết kế thương hiệu biết rằng, sâu bên trong, họ khơng có cơng việc thực việc liên tục tập trung vào logoc mảng màu sắc tạo nên hoạt động điên cuồng, khiến họ phân tâm khỏi nỗi sợ hãi tồn ám ảnh họ thức dậy Lời khuyên chấp nhận khoảng hình dành cho nhãn hiệu, có thiết bị nhỏ Bạn phản đối ý tưởng nhóm phát triển thương hiệu thường phần phận marketing, marketing thương báo cáo VP phận sale VP có mối quan hệ mật thiết với CEO lợi tức thu tất họ 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 @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() Bootsrap định nghĩa lớp sử dụng để ẩn element dựa theo độ rộng hình thiết bị Bạn điều chỉnh nội dung cách sử dụng câu lệnh truy vấn CSS media, lớp Bootstrap tích hợp vào thuộc tính styles khác Về phần nhãn hiệu SportsStore sử dụng lớp visible-xs hidden-xs để chuyển thành dạng text chia thành hàng biểu diễn theo chiều dọc kích thước hình bé 768 pixels Bootstrap cung cấp cặp lớp cho phép hiển thị giấu elements browser có kích thước hình khác nhau, tên chúng bắt đầu visible- hidden.Phần lớp “**-xs” (ví dụ visible-xs hidden-xs) dùng ví dụ Phần *-sm lớp chạy phần hình lớn 768 pixel, phần *-md chạy phần hình lớn 992 pixel –lg chạy hình lớn 1200 pixel Chúý: tính Responsive CSS giống tính mà Bootstrap cung cấp dựa độ lớn hình browser, khơng phải hình thiết bị Browser thiết bị di động thường hiển thị toàn hình, nghĩa kích thước hình kích thước cửa sổ browser nhau.Chúng ta lúc dựa trường hợp Như khi, cần kiểm thử thiết bị mà nhắm tới để đảm bảo khơng vướng phải trường hợp giảđịnh bị phát Caution Responsive CSS features like the ones that Bootstrap provide are based on the size of the browser window, not the device screen Mobile device browsers are usually displayed full-screen, which means that the window size and the screen size are the same, but you can’t always rely on this being the case As ever, you need to test against the devices you are targeting to ensure that you have not made assumptions that catch you out Chúng ta thấy hiệu ứng thay đổi khởi động ứng dụng xem danh sách sản phẩm desktop browser thơng thường, vốn có ưu điểm cho phép thay đổi kích thước 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 đổi nhỏ có tác động lớn đối vối hình khoo3 đặc biệt kết hợp với thay đổi tạo file Views/Cart/Summary.cshtml Đây view cung cấp tóm tắt giỏ hàng nội dung Chúng ta thấy thay đổi hình 10-2 Listing 10-2.Thêm nội dung Responsive vào file Summary.cshtml Adding Responsive Content to the Summary.cshtml File @modelSportsStore.Domain.Entities.Cart @Html.ActionLink("Checkout", "Index", "Cart", new { returnUrl = Request.Url.PathAndQuery }, new { @class = "btn btn-default navbar-btn"}) "Cart", new { returnUrl = Yourcart: @Model.Lines.Sum(x =>x.Quantity)item(s), @Model.ComputeTotalValue().ToString("c") Trên sử dụng kỹ thuật áp dụng để giấu nội dung với file _Layout.cshtml Trong trường hợp này, giấu phần nút Checkout now chuẩn thay nút icon, sử dụng số icon Bootstrap package Bootstrap icon đặt vào dùng 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 group- justified" :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

@foreach (var link in Model){
• @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