ASP.NET MVC4 데스크탑 및 이동 뷰(MVC4 표시 모드)

I. MVC4 디스플레이 모드 소개
MVC 4는 디바이스별로 뷰를 간단하게 표시할 수 있는 디스플레이 모드 기능을 도입했다.
다시 말하면, 우리 웹 페이지의 내용이 데스크톱 버전의 브라우저를 위한 것이지만, 모바일 브라우저나 다른 장치 브라우저에서는 읽을 수 있는 것이 좋지 않다고 가정하면, 현재 이러한 상황에 따라 서로 다른 장치에 다른 보기를 만들 수 있다.
초기 버전에서는 우리만의 프레임워크를 통해 호환성 문제를 해결하고 코드를 많이 써야 했다.MVC 4 집행은 매우 간단하다.
다음 단계에서는 MVC 4에서 디스플레이 모드를 실행하는 방법을 보여 줍니다.
II. 어떻게 테스트합니까?
다음 옵션을 사용하여 다양한 뷰를 테스트할 수 있습니다.
이 글에서 나는 Windows 모바일 7 시뮬레이터를 사용하는 시뮬레이터가 필요하다.
또한 데스크톱 브라우저에서useragent값을 설정하여 테스트할 수 있습니다.이것은 User 에이전트를 설정하는 설정 단계입니다: IE -->F 12 -->도구 모음 -->user 에이전트 문자열 -->원하는 것을 선택하십시오.
다음 그림을 참조하십시오.
위의 글에서 나는 Windows 아이폰 8의 설정을 했다.아이폰 설정을 추가하지 않았습니다.
III. 일반 모바일 장치 보기 만들기
다음 절차에 따라 일반적인 모바일 장치 보기를 만드십시오.
단계 1: 뷰를 이동하기 위해layout 뷰를 생성합니다."Views\Shared\Layout.cshtml"을 복사하여 같은 디렉터리에 붙이고 이 layout 파일의 이름을 "\Layout.Mobile.cshtml"("Views\Shared\Layout.Mobile.cshtml")로 수정할 수 있습니다.
STEP2: "\Layout.Mobile.cshtml"페이지의 헤더 텍스트를 수정하여layout 보기가 모바일 버전에서 나온 것임을 식별합니다.
3단계: "Views\Home\index.cshtml"을 복사하여 같은 디렉터리에 붙이고, 수정 파일의 이름은 "Views\Home\index.Mobile.cshtml"입니다.
4단계: "\Index.Mobile.cshtml"페이지의 머리 문자를 수정하여 이 index가 실행 중인 모바일 버전임을 식별합니다.
만약 어떤 보기가 이동 장치로 설정할 필요가 있다면, 위의 처리 절차를 따르십시오.
IE 브라우저에서 실행 및 테스트
1. 데스크톱 보기
F5를 누르면 브라우저에 데스크톱 보기의 버전이 다음 그림과 같이 표시됩니다.Layout과 index 페이지 헤드가 "Desktop"으로 표시되는 것을 볼 수 있습니다.
2. 뷰 이동
위에서 설명한 대로 IE 구성IE에서 F12 --> tools --> change user agentstring --> "IE10 for Windows Phone 8"을 누릅니다.페이지를 새로 고치고 보기를 이동합니다.
Windows 모바일 7 에뮬레이터의 모바일 뷰:
IV. 특정 브라우저 또는 장치 보기
위에서, 우리는 이미 일반적인 모바일 보기를 만들었기 때문에, 언제든지 모바일 기기나 아이패드를 통해 사이트를 방문하면 모바일 보기를 볼 수 있다.현재 상황은 아이폰 보기를 만들거나 특수 장치를 지정하고 싶습니다.MVC4는 관련 구성만 하면 이 기능을 구현할 수 있습니다.
다음은 "아이패드"를 예로 들면, 브라우저에 아이패드의 User 에이전트를 추가했습니다.
보집1: 글로벌을 열어라.Asax와 아래 코드를 "Application_Start()"방법에 추가하고 명칭 공간 "using System.Web.WebPages;"도 추가해야 합니다.

 DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPad")
            {
                ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
                ("iPad", StringComparison.OrdinalIgnoreCase) >= 0)
            }); 

STEP 2: iPad에 대한 Layout을 만듭니다.빠른 실행, 복제"
Views\Shared\_Layout.cshtml"같은 위치에 붙이고layout 이름을 수정합니다"
\_Layout.iPad.cshtml” (“
Views\Shared\_Layout.iPad.cshtml”).
보집3: "\Layout.ipad.cshtml"의 머리 문자를 수정하여layout이 어느 모바일 버전의 보기에서 왔는지 식별합니다.
스텝4: "Views\Home\index.cshtml"을 복사하여 같은 위치에 붙여 넣고, 수정 파일의 이름은 "Views\Home\index.ipad.cshtml"입니다.
보집5: "\Index.ipad.cshtml"의 머리 문자를 수정하여 index가 어느 모바일 버전의 보기에서 왔는지 식별합니다.
만약 어떤 보기가 아이패드에 대한 보기를 설정해야 한다면, 위의 절차에 따라 처리하십시오.
IE 브라우저에서 실행 및 테스트
뷰 이동
위에서 설명한 대로 IE 설정을 만듭니다.IE에서 F12 --> tools --> change user agentstring --> "아이패드"를 누릅니다.
페이지를 새로 고칩니다. 이제 아이패드 보기가 다시 불러오고 나타납니다.
총결산
이 글에서 나는 이동 보기를 실행하는 방법을 설명했다.JQuery를 통해 실현되는 또 다른 방안도 있습니다. 가능한 한 빨리 제 블로그에 소개하겠습니다.수확이 있기를 바랍니다.
텍스트:http://www.codeproject.com/Tips/704007/Desktop-and-Mobile-Browser-View-in-MVC-4-MVC-4-Dis