2012-07-18 4 views
6

태블릿 및 모바일에 대한 별도의보기를 만들려고합니다. app_start에서이 코드가 있습니다MVC 4 모바일 및 태블릿보기 분리

모바일 용 및 태블릿 용으로 두 개의 레이아웃 파일을 만들었습니다. 하지만 안드로이드에있는 모바일 장치에서 액세스 할 때 충돌이 발생합니다. 나를 layout.tablet로 리디렉션합니다. 이 두 장치를 어떻게 분리 할 수 ​​있습니까?

답변

8

브라우저에서 사용자 에이전트 전환기로이를 테스트했으며 정상적으로 작동합니다.

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) 
     }); 
+0

헤이 - 부, 너 내 영광을 다시 찔렀다 !! :) –

1

neowinian, 논리의 하나 개의 추가 조각을 추가

시도 :

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

이 태블릿에 대한 DisplayMode를 모든 모바일 장치를 제외됩니다.

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

당신이 http://51degrees.mobi 같은 서비스를 살펴 경험이 당신에 대한 모든 사용자 에이전트/장치 무거운 수행합니다에서

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) 
}); 

또한 볼 수 있었다? 무료는 아니지만, "IsTablet"가 프리미엄 버전에 포함되어 있음에도 불구하고 필요한 것을 많이 제공하는 "라이트"버전을 사용합니다.

+0

나는 그것을 시도했지만 MVC 4는 나를 위해 아주 청초한 모바일 기능을 제공한다. – jasenkoh

0

51Degree의 무료 클라우드 기반 솔루션을 사용하면 다양한 장치 유형을 감지하는 데 도움이됩니다. IsMobile 및 IsTablet 속성을 사용하면 결과에 따라 리디렉션 할 수 있습니다. 무료 클라우드 제품을 웹 사이트에서 가져 와서 무료 클라우드 키를 얻을 수 있습니다. API 사용 방법에 대한 정보는 여기에서 자습서를 참조하십시오. https://51degrees.com/Developers/Documentation/APIs/Cloud-API/NET-Cloud

예를 들어 아래에 표시된 것과 비슷한 기기 유형을 반환하도록 요청한 다음 응답을 기반으로 리디렉션 로직을 입력 할 수 있습니다.

@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> 
} 
    } 

공개 : 나는 51Deges에서 일한다.