Cách ly chế độ xem di động và máy tính bảng MVC 4

Question

Tôi đang cố gắng tạo các chế độ xem riêng cho Máy tính bảng và Thiết bị di động. Trong app_start tôi có mã này

DisplayModeProvider.Instance.Modes.Insert(0, new 
     DefaultDisplayMode("Tablet") 
     { 
      ContextCondition = (ctx => 
      ctx.Request.UserAgent.IndexOf("iPad", StringComparison.OrdinalIgnoreCase) >= 0 || 
      ctx.Request.UserAgent.IndexOf("Android", StringComparison.OrdinalIgnoreCase) >= 0) 
     }); 

Tôi đã tạo hai tệp bố cục, một cho thiết bị di động và một cho máy tính bảng. Nhưng có xung đột khi tôi đang truy cập từ thiết bị di động trên Android. Nó chuyển hướng tôi đến layout.tablet. Làm thế nào tôi có thể tách hai thiết bị đó?

Answer 1

Tôi đã thử nghiệm tính năng này bằng trình chuyển đổi tác nhân người dùng trong trình duyệt và hoạt động tốt.

DisplayModeProvider.Instance.Modes.Insert(0, new 
     DefaultDisplayMode("Tablet") 
     { 
      ContextCondition = (ctx => 
      ctx.Request.UserAgent.IndexOf("iPad", StringComparison.OrdinalIgnoreCase) >= 0 || 
      ctx.Request.UserAgent.IndexOf("Android", StringComparison.OrdinalIgnoreCase) >= 0 && 
      ctx.Request.UserAgent.IndexOf("mobile", StringComparison.OrdinalIgnoreCase) < 1) 
     }); 

     DisplayModeProvider.Instance.Modes.Insert(1, new DefaultDisplayMode("Mobile") 
     { 
      ContextCondition = (ctx => 
       ctx.GetOverriddenBrowser().IsMobileDevice) 
     }); 

Answer 2

neowinian,

Hãy thử thêm một đoạn mã bổ sung của logic:

&& ctx.Request.UserAgent.IndexOf("mobile", StringComparison.OrdinalIgnoreCase) < 0 

này sẽ loại trừ tất cả các thiết bị di động từ DisplayMode của bạn cho máy tính bảng.

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("Tablet") 
{ 
    ContextCondition = (ctx => 
    (ctx.Request.UserAgent.IndexOf("iPad", StringComparison.OrdinalIgnoreCase) >=0 
     || ctx.Request.UserAgent.IndexOf("Android", StringComparison.OrdinalIgnoreCase) >= 0) 
     && ctx.Request.UserAgent.IndexOf("mobile", StringComparison.OrdinalIgnoreCase) < 0) 
}); 

thêm vào đó, bạn có thể xem xét:

DisplayModeProvider.Instance.Modes.Insert(1, new DefaultDisplayMode("Mobile") 
{ 
    ContextCondition = (ctx => 
     ctx.GetOverriddenBrowser().IsMobileDevice) 
}); 

Answer 3

Bạn đã có một cái nhìn tại một dịch vụ như http://51degrees.mobi mà làm tất cả các user-agent/thiết bị nâng nặng cho bạn? Trong khi nó không phải là miễn phí, họ làm một phiên bản "lite" cung cấp cho bạn rất nhiều những gì bạn cần, mặc dù tôi nhận thấy "IsTablet" là một cái gì đó trong phiên bản đặc biệt của họ.

Answer 4

Bạn có thể sử dụng giải pháp dựa trên đám mây miễn phí của 51Degrees để giúp bạn phát hiện các loại thiết bị khác nhau. Sử dụng các thuộc tính IsMobile và IsTablet, bạn có thể chuyển hướng tùy thuộc vào kết quả. Bạn có thể nhận sản phẩm Đám mây miễn phí từ trang web và nhận được Khóa đám mây miễn phí. Để biết thông tin về cách sử dụng API, bạn có thể xem hướng dẫn tại đây. https://51degrees.com/Developers/Documentation/APIs/Cloud-API/NET-Cloud

Ví dụ: bạn có thể yêu cầu trả lại Loại thiết bị tương tự như những gì được hiển thị bên dưới, sau đó đặt vào logic chuyển hướng dựa trên phản hồi.

@using (var webClient = new System.Net.WebClient()) 
{ 
    string json = webClient.DownloadString(String.Format(
    "https://cloud.51degrees.com/api/v1/{0}/match?user-agent= 
{1}&values=DeviceType", 
    "YOUR KEY HERE", 
    HttpUtility.UrlEncode(Request.UserAgent))); 

dynamic match = Newtonsoft.Json.Linq.JObject.Parse(json); 
    SortedList<string, string[]> values = Newtonsoft.Json.JsonConvert.DeserializeObject<SortedList<string, string[]>>(match.Values.ToString()); 
    string[] hvValues; 

if (values.TryGetValue("DeviceType", out hvValues)) 
    { 
foreach (string s in hvValues) 
{ 
<h4> 
    Device Type: 
    @s 
</h4> 
} 
    } 

Tiết lộ: Tôi làm việc tại 51Độ.