Razor 템플릿을 사용하여 HTML 보기 빌드

아티클
07/13/2023

모바일 개발 환경에서 "하이브리드 앱"이라는 용어는 일반적으로 호스트된 웹 뷰어 컨트롤 내에서 화면의 일부(또는 전부)를 HTML 페이지로 표시하는 애플리케이션을 나타냅니다.

HTML 및 JavaScript에서 모바일 앱을 완전히 빌드할 수 있는 몇 가지 개발 환경이 있지만 이러한 앱은 복잡한 처리 또는 UI 효과를 수행하려고 할 때 성능 문제가 발생할 수 있으며 액세스할 수 있는 플랫폼 기능에서도 제한됩니다.

Xamarin은 특히 Razor HTML 템플릿 엔진을 사용하는 경우 두 가지 면에서 가장 적합한 제품을 제공합니다. Xamarin을 사용하면 JavaScript 및 CSS를 사용하는 플랫폼 간 템플릿 기반 HTML 뷰를 유연하게 빌드할 수 있지만 기본 플랫폼 API에 대한 완전한 액세스 및 C#을 사용하여 빠른 처리를 수행할 수 있습니다.

이 문서에서는 Razor 템플릿 엔진을 사용하여 Xamarin을 사용하여 모바일 플랫폼에서 사용할 수 있는 HTML+JavaScript+CSS 보기를 빌드하는 방법을 설명합니다.

프로그래밍 방식으로 웹 보기 사용

Razor에 대해 알아보기 전에 이 섹션에서는 웹 보기를 사용하여 HTML 콘텐츠를 직접 표시하는 방법, 특히 앱 내에서 생성된 HTML 콘텐츠에 대해 설명합니다.

Xamarin은 iOS 및 Android 모두에서 기본 플랫폼 API에 대한 완전한 액세스를 제공하므로 C#을 사용하여 HTML을 쉽게 만들고 표시할 수 있습니다. 각 플랫폼에 대한 기본 구문은 다음과 같습니다.

iOS

Xamarin.iOS의 UIWebView 컨트롤에 HTML을 표시하면 몇 줄의 코드만 사용됩니다.

var webView = new UIWebView (View.Bounds);
View.AddSubview(webView);
string contentDirectoryPath = Path.Combine (NSBundle.MainBundle.BundlePath, "Content/");
var html = "<html><h1>Hello</h1><p>World</p></html>";
webView.LoadHtmlString(html, NSBundle.MainBundle.BundleUrl);

UIWebView 컨트롤 사용에 대한 자세한 내용은 iOS UIWebView 레시피를 참조하세요.

Android

Xamarin.Android를 사용하여 WebView 컨트롤에 HTML을 표시하는 작업은 몇 줄의 코드에서만 수행됩니다.

// webView is declared in an AXML layout file
var webView = FindViewById<WebView> (Resource.Id.webView);

// enable JavaScript execution in your html view so you can provide "alerts" and other js
webView.SetWebChromeClient(new WebChromeClient());

var html = "<html><h1>Hello</h1><p>World</p></html>";
webView.LoadDataWithBaseURL("file:///android_asset/", html, "text/html", "UTF-8", null);

WebView 컨트롤 사용에 대한 자세한 내용은 Android WebView 레시피를 참조하세요.

기본 디렉터리 지정

두 플랫폼 모두 HTML 페이지의 기본 디렉터리를 지정하는 매개 변수가 있습니다. 이미지 및 CSS 파일과 같은 리소스에 대한 상대 참조를 확인하는 데 사용되는 디바이스 파일 시스템의 위치입니다. 예를 들어 태그는 다음과 같습니다.

<link rel="stylesheet" href="style.css" />
<img src="monkey.jpg" />
<script type="text/javascript" src="jscript.js">

style.css, monkey.jpg 및 jscript.js 파일을 참조하세요. 기본 디렉터리 설정은 이러한 파일이 있는 위치를 웹 보기에 알려 페이지에 로드할 수 있도록 합니다.

iOS

템플릿 출력은 다음 C# 코드를 사용하여 iOS에서 렌더링됩니다.

webView.LoadHtmlString (page, NSBundle.MainBundle.BundleUrl);

기본 디렉터리가 애플리케이션이 설치된 디렉터리를 참조하는 디렉터리로 NSBundle.MainBundle.BundleUrl 지정됩니다. Resources 폴더의 모든 파일은 여기에 표시된 style.css 파일과 같이 이 위치에 복사됩니다.

iPhoneHybrid solution

모든 정적 콘텐츠 파일에 대한 빌드 작업은 BundleResource여야 합니다.

iOS project build action: BundleResource

Android

또한 웹 보기에 html 문자열이 표시될 때 기본 디렉터리를 매개 변수로 전달해야 합니다.

webView.LoadDataWithBaseURL("file:///android_asset/", page, "text/html", "UTF-8", null);

특수 문자열 file:///android_asset/ 앱의 Android Assets 폴더를 참조하며 , 여기에 style.css 파일이 포함되어 있습니다.

AndroidHybrid solution

모든 정적 콘텐츠 파일에 대한 빌드 작업은 AndroidAsset여야 합니다.

Android project build action: AndroidAsset

HTML 및 JavaScript에서 C# 호출

html 페이지가 웹 보기에 로드되면 서버에서 페이지가 로드된 경우와 마찬가지로 링크와 폼을 처리합니다. 즉, 사용자가 링크를 클릭하거나 양식을 제출하면 웹 보기가 지정된 대상으로 이동하려고 시도합니다.

링크가 외부 서버(예: google.com)인 경우 웹 보기는 외부 웹 사이트를 로드하려고 시도합니다(인터넷 연결이 있다고 가정).

<a href="http://google.com/">Google</a>

링크가 상대인 경우 웹 보기는 기본 디렉터리에서 해당 콘텐츠를 로드하려고 시도합니다. 콘텐츠가 디바이스의 앱에 저장되므로 이 작업이 작동하려면 네트워크 연결이 필요하지 않습니다.

<a href="somepage.html">Local content</a>

양식 작업은 동일한 규칙을 따릅니다.

<form method="get" action="http://google.com/"></form>
<form method="get" action="somepage.html"></form>

클라이언트에서 웹 서버를 호스트하지 않습니다. 그러나 오늘날의 반응형 디자인 패턴에서 사용하는 것과 동일한 서버 통신 기술을 사용하여 HTTP GET을 통해 서비스를 호출하고 JavaScript를 내보내거나 웹 보기에서 이미 호스트된 JavaScript를 호출하여 비동기적으로 응답을 처리할 수 있습니다. 이렇게 하면 처리를 위해 HTML의 데이터를 C# 코드로 쉽게 전달한 다음 HTML 페이지에 결과를 다시 표시할 수 있습니다.

iOS와 Android는 앱 코드가 응답할 수 있도록(필요한 경우) 이러한 탐색 이벤트를 가로채는 애플리케이션 코드 메커니즘을 제공합니다. 이 기능은 네이티브 코드가 웹 보기와 상호 작용할 수 있으므로 하이브리드 앱을 빌드하는 데 중요합니다.

iOS

애플리케이션 코드가 탐색 요청(예: 링크 클릭)을 처리할 수 있도록 iOS의 웹 보기에서 ShouldStartLoad 이벤트를 재정의할 수 있습니다. 메서드 매개 변수는 모든 정보를 제공합니다.

bool HandleShouldStartLoad (UIWebView webView, NSUrlRequest request, UIWebViewNavigationType navigationType) {
    // return true if handled in code
    // return false to let the web view follow the link
}

그런 다음, 이벤트 처리기를 할당합니다.

webView.ShouldStartLoad += HandleShouldStartLoad;

Android

Android에서는 WebViewClient를 서브클래스한 다음, 탐색 요청에 응답하는 코드를 구현합니다.

class HybridWebViewClient : WebViewClient {
    public override bool ShouldOverrideUrlLoading (WebView webView, IWebResourceRequest request) {
        // return true if handled in code
        // return false to let the web view follow the link
    }
}

그런 다음, 웹 보기에서 클라이언트를 설정합니다.

webView.SetWebViewClient (new HybridWebViewClient ());

C에서 JavaScript 호출#

새 HTML 페이지를 로드하도록 웹 보기에 알리는 것 외에도 C# 코드는 현재 표시된 페이지 내에서 JavaScript를 실행할 수도 있습니다. 전체 JavaScript 코드 블록은 C# 문자열을 사용하여 만들고 실행하거나 태그를 통해 script 페이지에서 이미 사용할 수 있는 JavaScript에 대한 메서드 호출을 만들 수 있습니다.

Android

실행할 JavaScript 코드를 만든 다음 접두사를 "javascript:"로 접두사로 지정하고 웹 보기에 해당 문자열을 로드하도록 지시합니다.

var js = "alert('test');";
webView.LoadUrl ("javascript:" + js);

iOS

iOS 웹 보기는 JavaScript를 호출하기 위한 메서드를 제공합니다.

var js = "alert('test');";
webView.EvaluateJavascript (js);

요약

이 섹션에서는 다음을 포함하여 Xamarin을 사용하여 하이브리드 애플리케이션을 빌드할 수 있는 Android 및 iOS의 웹 보기 컨트롤 기능을 소개했습니다.

코드에서 생성된 문자열에서 HTML을 로드하는 기능
로컬 파일(CSS, JavaScript, 이미지 또는 기타 HTML 파일)을 참조하는 기능
C# 코드에서 탐색 요청을 가로채는 기능
C# 코드에서 JavaScript를 호출하는 기능입니다.

다음 섹션에서는 하이브리드 앱에서 사용할 HTML을 쉽게 만들 수 있는 Razor를 소개합니다.

Razor란?

Razor는 원래 서버에서 실행되고 웹 브라우저에 제공될 HTML을 생성하기 위해 ASP.NET MVC에서 도입된 템플릿 엔진입니다.

Razor 템플릿 엔진은 C#으로 표준 HTML 구문을 확장하므로 레이아웃을 표현하고 CSS 스타일시트와 JavaScript를 쉽게 통합할 수 있습니다. 템플릿은 모든 사용자 지정 형식일 수 있고 템플릿에서 직접 속성에 액세스할 수 있는 Model 클래스를 참조할 수 있습니다. 기본 장점 중 하나는 HTML과 C# 구문을 쉽게 혼합할 수 있다는 것입니다.

Razor 템플릿은 서버 쪽 사용으로 제한되지 않으며 Xamarin 앱에도 포함될 수 있습니다. 프로그래밍 방식으로 웹 보기를 사용하는 기능과 함께 Razor 템플릿을 사용하면 정교한 플랫폼 간 하이브리드 애플리케이션을 Xamarin으로 빌드할 수 있습니다.

Razor 템플릿 기본 사항

Razor 템플릿 파일의 확장명은 .cshtml 입니다. 새 파일 대화 상자의 텍스트 템플릿 섹션에서 Xamarin 프로젝트에 추가할 수 있습니다.

New File - Razor Template

간단한 Razor 템플릿( RazorView.cshtml)은 아래에 나와 있습니다.

@model string
<html>
    <body>
    <h1>@Model</h1>
    </body>
</html>

일반 HTML 파일과 다음과 같은 차이점이 있습니다.

이 기호는 @ Razor 템플릿에서 특별한 의미를 가지므로 다음 식이 평가할 C#임을 나타냅니다.
@model 지시문은 항상 Razor 템플릿 파일의 첫 번째 줄로 나타납니다.
@model 지시문 뒤에는 Type이 있어야 합니다. 이 예제에서는 간단한 문자열이 템플릿에 전달되지만 사용자 지정 클래스일 수 있습니다.
템플릿 전체에서 참조되는 경우 @Model 템플릿이 생성될 때 템플릿에 전달된 개체에 대한 참조를 제공합니다(이 예제에서는 문자열이 됩니다).
IDE는 템플릿(.cshtml 확장이 있는 파일)에 대한 부분 클래스를 자동으로 생성합니다. 이 코드를 볼 수 있지만 편집하면 안 됩니다. partial 클래스의 이름은 .cshtml 템플릿 파일 이름과 일치하도록 RazorView입니다. 이 이름은 C# 코드에서 템플릿을 참조하는 데 사용됩니다.
@using 추가 네임스페이스를 포함하도록 Razor 템플릿의 맨 위에 문을 포함할 수도 있습니다.

그런 다음, 다음 C# 코드를 사용하여 최종 HTML 출력을 생성할 수 있습니다. 렌더링된 템플릿 출력에 통합될 문자열 "헬로 월드"로 모델을 지정합니다.

var template = new RazorView () { Model = "Hello World" };
var page = template.GenerateString ();

iOS 시뮬레이터 및 Android Emulator의 웹 보기에 표시된 출력은 다음과 같습니다.

Hello World

추가 Razor 구문

이 섹션에서는 사용을 시작하는 데 도움이 되는 몇 가지 기본 Razor 구문을 소개합니다. 이 섹션의 예제는 다음 클래스를 데이터로 채우고 Razor를 사용하여 표시합니다.

public class Monkey {
    public string Name { get; set; }
    public DateTime Birthday { get; set; }
    public List<string> FavoriteFoods { get; set; }
}

모든 예제에서는 다음 데이터 초기화 코드를 사용합니다.

var animal = new Monkey {
    Name = "Rupert",
    Birthday=new DateTime(2011, 04, 01),
    FavoriteFoods = new List<string>
        {"Bananas", "Banana Split", "Banana Smoothie"}
};

모델 속성 표시

모델이 속성이 있는 클래스인 경우 이 예제 템플릿과 같이 Razor 템플릿에서 쉽게 참조됩니다.

@model Monkey
<html>
    <body>
    <h1>@Model.Name</h1>
    <p>Birthday: @(Model.Birthday.ToString("d MMMM yyyy"))</p>
    </body>
</html>

다음 코드를 사용하여 문자열에 렌더링할 수 있습니다.

var template = new RazorView () { Model = animal };
var page = template.GenerateString ();

최종 출력은 iOS 시뮬레이터 및 Android Emulator의 웹 보기에 표시됩니다.

Rupert

C# 문

모델 속성 업데이트 및 이 예제의 Age 계산과 같은 더 복잡한 C#을 템플릿에 포함할 수 있습니다.

@model Monkey
<html>
    <body>
    @{
        Model.Name = "Rupert X. Monkey";
        Model.Birthday = new DateTime(2011,3,1);
    }
    <h1>@Model.Name</h1>
    <p>Birthday: @Model.Birthday.ToString("d MMMM yyyy")</p>
    <p>Age: @(Math.Floor(DateTime.Now.Date.Subtract (Model.Birthday.Date).TotalDays/365)) years old</p>
    </body>
</html>

코드를 를 사용하여 복잡한 한 줄 C# 식(예: 나이 서식 지정)을 작성할 수 있습니다 @().

를 사용하여 여러 C# 문을 작성 @{}할 수 있습니다.

if...else 문

이 템플릿 예제와 같이 코드 분기를 @if 표현할 수 있습니다.

@model Monkey
<html>
    <body>
    <h1>@Model.Name</h1>
    <p>Birthday: @(Model.Birthday.ToString("d MMMM yyyy"))</p>
    <p>Age: @(Math.Floor(DateTime.Now.Date.Subtract (Model.Birthday.Date).TotalDays/365)) years old</p>
    <p>Favorite Foods:</p>
    @if (Model.FavoriteFoods.Count == 0) {
        <p>No favorites</p>
    } else {
        <p>@Model.FavoriteFoods.Count favorites</p>
    }
    </body>
</html>

반복

같은 foreach 루핑 구문을 추가할 수도 있습니다. @ 이 경우 루프 변수 @food 에서 접두사를 사용하여 HTML로 렌더링할 수 있습니다.

@model Monkey
<html>
    <body>
    <h1>@Model.Name</h1>
    <p>Birthday: @Model.Birthday.ToString("d MMMM yyyy")</p>
    <p>Age: @(Math.Floor(DateTime.Now.Date.Subtract (Model.Birthday.Date).TotalDays/365)) years old</p>
    <p>Favorite Foods:</p>
    @if (Model.FavoriteFoods.Count == 0) {
        <p>No favorites</p>
    } else {
        <ul>
            @foreach (var food in @Model.FavoriteFoods) {
                <li>@food</li>
            }
        </ul>
    }
    </body>
</html>

위의 템플릿의 출력은 iOS 시뮬레이터 및 Android Emulator에서 실행되는 것으로 표시됩니다.

Rupert X Monkey

이 섹션에서는 Razor 템플릿을 사용하여 간단한 읽기 전용 보기를 렌더링하는 기본 사항을 설명했습니다. 다음 섹션에서는 HTML 보기와 C#에서 JavaScript 간에 사용자 입력을 수락하고 상호 운용할 수 있는 Razor를 사용하여 보다 완전한 앱을 빌드하는 방법을 설명합니다.

Xamarin에서 Razor 템플릿 사용

이 섹션에서는 Mac용 Visual Studio 솔루션 템플릿을 사용하여 고유한 하이브리드 애플리케이션을 빌드하는 방법을 설명합니다. 파일 > 새 > 솔루션... 창에서 사용할 수 있는 세 가지 템플릿이 있습니다.

Android > 앱 > Android WebView 애플리케이션
iOS > 앱 > WebView 애플리케이션
MVC 프로젝트 ASP.NET

i전화 및 Android 프로젝트에 대한 새 솔루션 창은 다음과 같습니다. 오른쪽의 솔루션 설명은 Razor 템플릿 엔진에 대한 지원을 강조 표시합니다.

Creating iPhone and Android solutions

기존 Xamarin 프로젝트에 .cshtml Razor 템플릿을쉽게 추가할 수 있습니다. 이러한 솔루션 템플릿을 사용할 필요는 없습니다. iOS 프로젝트에서는 Razor를 사용하기 위해 Storyboard가 필요하지 않습니다. UIWebView 컨트롤을 프로그래밍 방식으로 모든 보기에 추가하기만 하면 C# 코드로 Razor 템플릿 전체를 렌더링할 수 있습니다.

i전화 및 Android 프로젝트에 대한 기본 템플릿 솔루션 콘텐츠는 다음과 같습니다.

iPhone and Android templates

템플릿은 데이터 모델 개체를 사용하여 Razor 템플릿을 로드하고, 사용자 입력을 처리하고, JavaScript를 통해 사용자에게 다시 통신할 수 있는 즉시 사용할 수 있는 애플리케이션 인프라를 제공합니다.

솔루션의 중요한 부분은 다음과 같습니다.

style.css 파일과 같은 정적 콘텐츠입니다.
RazorView.cshtml과 같은 Razor .cshtml 템플릿 파일.
Razor 템플릿에서 참조되는 모델 클래스(예: ExampleModel.cs.)
웹 보기를 만들고 Android 및 iOS와 같은 템플릿을 MainActivity 렌더링하는 iPhoneHybridViewController 플랫폼별 클래스입니다.

다음 섹션에서는 프로젝트의 작동 방식을 설명합니다.

정적 콘텐츠

정적 콘텐츠에는 CSS 스타일시트, 이미지, JavaScript 파일 또는 웹 보기에 표시되는 HTML 파일에서 연결하거나 참조할 수 있는 기타 콘텐츠가 포함됩니다.

템플릿 프로젝트에는 하이브리드 앱에 정적 콘텐츠를 포함하는 방법을 보여 주는 최소 스타일시트가 포함되어 있습니다. CSS 스타일시트는 다음과 같이 템플릿에서 참조됩니다.

<link rel="stylesheet" href="style.css" />

JQuery와 같은 프레임워크를 포함하여 필요한 스타일시트 및 JavaScript 파일을 추가할 수 있습니다.

Razor cshtml 템플릿

템플릿에는 HTML/JavaScript와 C# 간에 데이터를 전달하는 데 도움이 되는 미리 작성된 코드가 있는 Razor .cshtml 파일이 포함되어 있습니다. 이렇게 하면 모델에서 읽기 전용 데이터를 표시하는 것이 아니라 HTML에서 사용자 입력을 수락하고 처리 또는 스토리지를 위해 C# 코드에 다시 전달하는 정교한 하이브리드 앱을 빌드할 수 있습니다.

템플릿 렌더링

템플릿에서 호출하면 GenerateString HTML이 웹 보기에 표시할 준비가 됩니다. 템플릿에서 모델을 사용하는 경우 렌더링하기 전에 모델을 제공해야 합니다. 이 다이어그램은 제공된 기본 디렉터리를 사용하여 지정된 파일을 찾기 위해 런타임 시 웹 보기에서 정적 리소스를 확인하는 것이 아니라 렌더링의 작동 방식을 보여 줍니다.

Razor flowchart

템플릿에서 C# 코드 호출

렌더링된 웹 보기에서 C#으로 다시 호출하는 통신은 웹 보기에 대한 URL을 설정한 다음, 웹 보기를 다시 로드하지 않고 네이티브 요청을 처리하기 위해 C#에서 요청을 가로채서 수행됩니다.

RazorView의 단추가 처리되는 방법에 대한 예제를 볼 수 있습니다. 단추에는 다음과 같은 HTML이 있습니다.

<input type="button" name="UpdateLabel" value="Click" onclick="InvokeCSharpWithFormValues(this)" />

JavaScript 함수는 InvokeCSharpWithFormValues HTML 양식에서 모든 값을 읽고 웹 보기에 location.href 대해 설정합니다.

location.href = "hybrid:" + elm.name + "?" + qs;

이렇게 하면 웹 보기를 사용자 지정 스키마가 있는 URL로 이동하려고 시도합니다(예: ). hybrid:

hybrid:UpdateLabel?textbox=SomeValue&UpdateLabel=Click

네이티브 웹 보기가 이 탐색 요청을 처리할 때 이를 가로챌 수 있습니다. iOS에서 이 작업은 UIWebView의 HandleShouldStartLoad 이벤트를 처리하여 수행됩니다. Android에서는 단순히 양식에 사용된 WebViewClient를 서브클래싱하고 ShouldOverrideUrlLoading을 재정의합니다.

이러한 두 탐색 인터셉터의 내부는 기본적으로 동일합니다.

먼저 웹 보기가 로드하려는 URL을 검사 사용자 지정 스키마()hybrid:로 시작하지 않는 경우 탐색이 정상적으로 수행되도록 허용합니다.

사용자 지정 URL 스키마의 경우 스키마와 "?" 사이의 URL에 있는 모든 항목 는 처리할 메서드 이름입니다(이 경우 "UpdateLabel"). 쿼리 문자열의 모든 항목은 메서드 호출에 대한 매개 변수로 처리됩니다.

var resources = url.Substring(scheme.Length).Split('?');
var method = resources [0];
var parameters = System.Web.HttpUtility.ParseQueryString(resources[1]);

UpdateLabel 이 샘플에서는 텍스트 상자 매개 변수에서 최소한의 문자열 조작을 수행하고(문자열에 "C#님 앞에" 추가) 웹 보기로 다시 호출합니다.

URL을 처리한 후 웹 보기에서 사용자 지정 URL 탐색을 완료하지 않도록 메서드가 탐색을 중단합니다.

C에서 템플릿 조작#

C#에서 렌더링된 HTML 웹 보기에 대한 통신은 웹 보기에서 JavaScript를 호출하여 수행됩니다. iOS에서 이 작업은 UIWebView를 호출 EvaluateJavascript 하여 수행됩니다.

webView.EvaluateJavascript (js);

Android에서는 URL 체계를 사용하여 JavaScript를 URL로 로드하여 웹 보기에서 JavaScript를 "javascript:" 호출할 수 있습니다.

webView.LoadUrl ("javascript:" + js);

앱을 진정한 하이브리드로 만들기

이러한 템플릿은 각 플랫폼에서 네이티브 컨트롤을 사용하지 않습니다. 전체 화면은 단일 웹 보기로 채워집니다.

HTML은 프로토타입 작성에 적합할 수 있으며 서식 있는 텍스트 및 반응형 레이아웃과 같이 웹이 가장 적합한 항목을 표시할 수 있습니다. 그러나 모든 작업이 HTML 및 JavaScript에 적합한 것은 아닙니다. 예를 들어 긴 데이터 목록을 스크롤하면 네이티브 UI 컨트롤(예: iOS의 UITableView 또는 Android의 ListView)을 사용하는 것이 더 좋습니다.

템플릿의 웹 보기는 플랫폼별 컨트롤로 쉽게 보강할 수 있습니다. Mac에서 Xcode를 사용하여 MainStoryboard.storyboard를 편집하거나 Android의 Resources/layout/Main.axml을 편집하기만 하면 됩니다.

RazorTodo 샘플

RazorTodo 리포지토리에는 완전히 HTML 기반 앱과 HTML을 네이티브 컨트롤과 결합하는 앱 간의 차이점을 보여 주는 두 가지 개별 솔루션이 포함되어 있습니다.

RazorTodo - Razor 템플릿을 사용하는 완전히 HTML 기반 앱입니다.
RazorNativeTodo - iOS 및 Android용 네이티브 목록 보기 컨트롤을 사용하지만 HTML 및 Razor를 사용하여 편집 화면을 표시합니다.

이러한 Xamarin 앱은 iOS와 Android 모두에서 실행되며 PCL(이식 가능한 클래스 라이브러리)을 활용하여 데이터베이스 및 모델 클래스와 같은 공통 코드를 공유합니다. Razor .cshtml 템플릿을 PCL에 포함할 수도 있으므로 플랫폼 간에 쉽게 공유할 수 있습니다.

두 샘플 앱 모두 네이티브 플랫폼의 Twitter 공유 및 텍스트 음성 변환 API를 통합하여 Xamarin을 사용하는 하이브리드 애플리케이션이 HTML Razor 템플릿 기반 보기의 모든 기본 기능에 계속 액세스할 수 있음을 보여 줍니다.

RazorTodo 앱은 목록 및 편집 보기에 HTML Razor 템플릿을 사용합니다. 즉, 공유 이식 가능한 클래스 라이브러리(데이터베이스 및 .cshtml Razor 템플릿 포함)에서 거의 완전히 앱을 빌드할 수 있습니다. 아래 스크린샷은 iOS 및 Android 앱을 보여줍니다.

RazorTodo

RazorNativeTodo 앱은 편집 보기에 HTML Razor 템플릿을 사용하지만 각 플랫폼에서 네이티브 스크롤 목록을 구현합니다. 이렇게 하면 다음을 비롯한 다양한 이점이 제공됩니다.

성능 - 네이티브 스크롤 컨트롤은 매우 긴 데이터 목록을 사용하더라도 빠르고 매끄러운 스크롤을 보장하기 위해 가상화를 사용합니다.
네이티브 환경 - iOS 및 Android의 빠른 스크롤 인덱스 지원과 같은 플랫폼별 UI 요소를 쉽게 사용할 수 있습니다.

Xamarin을 사용하여 하이브리드 앱을 빌드할 때의 주요 이점은 완전한 HTML 기반 사용자 인터페이스(예: 첫 번째 샘플)로 시작한 다음 필요한 경우 플랫폼별 기능을 추가할 수 있다는 것입니다(두 번째 샘플에서 볼 수 있듯이). iOS 및 Android의 네이티브 목록 화면과 HTML Razor 편집 화면은 아래에 나와 있습니다.

RazorNativeTodo

요약

이 문서에서는 하이브리드 애플리케이션 빌드를 용이하게 하는 iOS 및 Android에서 사용할 수 있는 웹 보기 컨트롤의 기능을 설명했습니다.

그런 다음, Razor 템플릿 엔진과 을 사용하여 Xamarin 앱에서 HTML을 쉽게 생성하는 데 사용할 수 있는 구문에 대해 설명했습니다.cshtml Razor 템플릿 파일. 또한 Xamarin을 사용하여 하이브리드 애플리케이션 빌드를 빠르게 시작할 수 있는 Mac용 Visual Studio 솔루션 템플릿에 대해 설명했습니다.

마지막으로 웹 보기를 네이티브 사용자 인터페이스 및 API와 결합하는 방법을 보여 주는 RazorTodo 샘플을 도입했습니다.

Razor 템플릿을 사용하여 HTML 보기 빌드

프로그래밍 방식으로 웹 보기 사용

iOS

Android

기본 디렉터리 지정

iOS

Android

HTML 및 JavaScript에서 C# 호출

iOS

Android

C에서 JavaScript 호출#

Android

iOS

요약

Razor란?

Razor 템플릿 기본 사항

추가 Razor 구문

모델 속성 표시

C# 문

if...else 문

반복

Xamarin에서 Razor 템플릿 사용

정적 콘텐츠

Razor cshtml 템플릿

템플릿 렌더링

템플릿에서 C# 코드 호출

C에서 템플릿 조작#

앱을 진정한 하이브리드로 만들기

RazorTodo 샘플

요약

관련 링크

추가 리소스