Bagikan melalui

Membangun tampilan HTML menggunakan Templat Razor

Di dunia pengembangan seluler, istilah "aplikasi hibrid" biasanya mengacu pada aplikasi yang menyajikan beberapa (atau semua) layarnya sebagai halaman HTML di dalam kontrol penampil web yang dihosting.

Ada beberapa lingkungan pengembangan yang memungkinkan Anda membangun aplikasi seluler sepenuhnya di HTML dan JavaScript, namun aplikasi tersebut dapat mengalami masalah performa saat mencoba mencapai efek pemrosesan atau UI yang kompleks dan juga terbatas dalam fitur platform yang dapat mereka akses.

Xamarin menawarkan yang terbaik dari kedua dunia, terutama ketika menggunakan mesin templat HTML Razor. Dengan Xamarin, Anda memiliki fleksibilitas untuk membangun tampilan HTML templat lintas platform yang menggunakan JavaScript dan CSS, tetapi juga memiliki akses lengkap ke API platform yang mendasar dan pemrosesan cepat menggunakan C#.

Dokumen ini menjelaskan cara menggunakan mesin templat Razor untuk membangun tampilan HTML+JavaScript+CSS yang dapat digunakan di seluruh platform seluler menggunakan Xamarin.

Menggunakan Tampilan Web Secara Terprogram

Sebelum kita mempelajari tentang Razor bagian ini mencakup cara menggunakan tampilan web untuk menampilkan konten HTML secara langsung - khususnya konten HTML yang dihasilkan dalam aplikasi.

Xamarin menyediakan akses lengkap ke API platform yang mendasar di iOS dan Android, sehingga mudah untuk membuat dan menampilkan HTML menggunakan C#. Sintaks dasar untuk setiap platform ditunjukkan di bawah ini.

iOS

Menampilkan HTML dalam kontrol UIWebView di Xamarin.iOS juga hanya mengambil beberapa baris kode:

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

Lihat resep iOS UIWebView untuk detail selengkapnya tentang menggunakan kontrol UIWebView.

Android

Menampilkan HTML dalam kontrol WebView menggunakan Xamarin.Android dicapai hanya dalam beberapa baris kode:

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

Lihat resep Android WebView untuk detail selengkapnya tentang menggunakan kontrol WebView.

Menentukan Direktori Dasar

Pada kedua platform ada parameter yang menentukan direktori dasar untuk halaman HTML. Ini adalah lokasi pada sistem file perangkat yang digunakan untuk menyelesaikan referensi relatif ke sumber daya seperti gambar dan file CSS. Misalnya, tag seperti

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

lihat file-file ini: style.css, monkey.jpg, dan jscript.js. Pengaturan direktori dasar memberi tahu tampilan web tempat file-file ini berada sehingga dapat dimuat ke dalam halaman.

iOS

Output templat dirender di iOS dengan kode C# berikut:

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

Direktori dasar ditentukan sebagai NSBundle.MainBundle.BundleUrl yang mengacu pada direktori tempat aplikasi diinstal. Semua file dalam folder Sumber Daya disalin ke lokasi ini, seperti file style.css yang diperlihatkan di sini:

iPhoneHybrid solution

Tindakan Build untuk semua file konten statis harus BundleResource:

iOS project build action: BundleResource

Android

Android juga memerlukan direktori dasar untuk diteruskan sebagai parameter saat string html ditampilkan dalam tampilan web.

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

String khusus file:///android_asset/ mengacu pada folder Aset Android di aplikasi Anda, yang ditampilkan di sini yang berisi file style.css .

AndroidHybrid solution

Tindakan Build untuk semua file konten statis harus AndroidAsset.

Android project build action: AndroidAsset

Memanggil C# dari HTML dan JavaScript

Ketika halaman html dimuat ke dalam tampilan web, halaman tersebut memperlakukan tautan dan formulir seperti yang terjadi jika halaman dimuat dari server. Ini berarti bahwa jika pengguna mengklik tautan atau mengirimkan formulir tampilan web akan mencoba menavigasi ke target yang ditentukan.

Jika tautan ke server eksternal (seperti google.com) maka tampilan web akan mencoba memuat situs web eksternal (dengan asumsi ada koneksi internet).

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

Jika tautan relatif maka tampilan web akan mencoba memuat konten tersebut dari direktori dasar. Jelas tidak ada koneksi jaringan yang diperlukan agar ini berfungsi, karena konten disimpan di aplikasi di perangkat.

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

Tindakan formulir mengikuti aturan yang sama.

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

Anda tidak akan menghosting server web di klien; namun, Anda dapat menggunakan teknik komunikasi server yang sama yang digunakan dalam pola desain responsif saat ini untuk memanggil layanan melalui HTTP GET, dan menangani respons secara asinkron dengan memancarkan JavaScript (atau memanggil JavaScript yang sudah dihosting dalam tampilan web). Ini memungkinkan Anda untuk dengan mudah meneruskan data dari HTML kembali ke kode C# untuk diproses lalu menampilkan hasilnya kembali di halaman HTML.

iOS dan Android menyediakan mekanisme untuk kode aplikasi untuk mencegat peristiwa navigasi ini sehingga kode aplikasi dapat merespons (jika diperlukan). Fitur ini sangat penting untuk membangun aplikasi hibrid karena memungkinkan kode asli berinteraksi dengan tampilan web.

iOS

Peristiwa ShouldStartLoad pada tampilan web di iOS dapat ditimpa untuk memungkinkan kode aplikasi menangani permintaan navigasi (seperti klik tautan). Parameter metode menyediakan semua informasi

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

lalu tetapkan penanganan aktivitas:

webView.ShouldStartLoad += HandleShouldStartLoad;

Android

Di Android cukup subkelas WebViewClient lalu terapkan kode untuk merespons permintaan navigasi.

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

lalu atur klien pada tampilan web:

webView.SetWebViewClient (new HybridWebViewClient ());

Memanggil JavaScript dari C#

Selain memberi tahu tampilan web untuk memuat halaman HTML baru, kode C# juga dapat menjalankan JavaScript dalam halaman yang saat ini ditampilkan. Seluruh blok kode JavaScript dapat dibuat menggunakan string C# dan dijalankan, atau Anda dapat membuat panggilan metode ke JavaScript yang sudah tersedia di halaman melalui script tag.

Android

Buat kode JavaScript yang akan dijalankan lalu awali dengan "javascript:" dan instruksikan tampilan web untuk memuat string tersebut:

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

iOS

Tampilan web iOS menyediakan metode khusus untuk memanggil JavaScript:

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

Ringkasan

Bagian ini telah memperkenalkan fitur kontrol tampilan web pada Android dan iOS yang memungkinkan kami membangun aplikasi hibrid dengan Xamarin, termasuk:

  • Kemampuan untuk memuat HTML dari string yang dihasilkan dalam kode,
  • Kemampuan untuk mereferensikan file lokal (CSS, JavaScript, Gambar, atau file HTML lainnya),
  • Kemampuan untuk mencegat permintaan navigasi dalam kode C#,
  • Kemampuan untuk memanggil JavaScript dari kode C#.

Bagian berikutnya memperkenalkan Razor, yang memudahkan pembuatan HTML untuk digunakan di aplikasi hibrid.

Apa itu Razor?

Razor adalah mesin templat yang diperkenalkan dengan ASP.NET MVC, awalnya untuk berjalan di server dan menghasilkan HTML untuk dilayani ke browser web.

Mesin templat Razor memperluas sintaks HTML standar dengan C# sehingga Anda dapat mengekspresikan tata letak dan menggabungkan lembar gaya CSS dan JavaScript dengan mudah. Templat dapat mereferensikan kelas Model, yang dapat berupa jenis kustom apa pun dan yang propertinya dapat diakses langsung dari templat. Salah satu keuntungan utamanya adalah kemampuan untuk mencampur sintaks HTML dan C# dengan mudah.

Templat razor tidak terbatas pada penggunaan sisi server, templat juga dapat disertakan dalam aplikasi Xamarin. Menggunakan templat Razor bersama dengan kemampuan untuk bekerja dengan tampilan web secara terprogram memungkinkan aplikasi hibrid lintas platform yang canggih untuk dibangun dengan Xamarin.

Dasar-Dasar Templat Razor

File templat Razor memiliki ekstensi file .cshtml . Mereka dapat ditambahkan ke proyek Xamarin dari bagian Templat Teks dalam dialog File Baru:

New File - Razor Template

Templat Razor sederhana ( RazorView.cshtml) ditunjukkan di bawah ini.

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

Perhatikan perbedaan berikut dari file HTML biasa:

  • Simbol @ memiliki arti khusus dalam templat Razor - menunjukkan bahwa ekspresi berikut adalah C# yang akan dievaluasi.
  • @model direktif selalu muncul sebagai baris pertama file templat Razor.
  • Arahan @model harus diikuti oleh Jenis. Dalam contoh ini, string sederhana sedang diteruskan ke templat, tetapi ini bisa menjadi kelas kustom apa pun.
  • Ketika @Model direferensikan di seluruh templat, itu menyediakan referensi ke objek yang diteruskan ke templat ketika dihasilkan (dalam contoh ini akan menjadi string).
  • IDE akan secara otomatis menghasilkan kelas parsial untuk templat (file dengan ekstensi .cshtml ). Anda dapat melihat kode ini tetapi tidak boleh diedit. RazorView.cshtml Kelas parsial diberi nama RazorView agar sesuai dengan nama file templat .cshtml. Nama inilah yang digunakan untuk merujuk ke templat dalam kode C#.
  • @using pernyataan juga dapat disertakan di bagian atas templat Razor untuk menyertakan namespace tambahan.

Output HTML akhir kemudian dapat dihasilkan dengan kode C# berikut. Perhatikan bahwa kita menentukan Model menjadi string "Halo Dunia" yang akan dimasukkan ke dalam output templat yang dirender.

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

Berikut adalah output yang ditampilkan dalam tampilan web di Simulator iOS dan Android Emulator:

Hello World

Sintaks Razor Lainnya

Di bagian ini kita akan memperkenalkan beberapa sintaks Razor dasar untuk membantu Anda mulai menggunakannya. Contoh di bagian ini mengisi kelas berikut dengan data dan menampilkannya menggunakan Razor:

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

Semua contoh menggunakan kode inisialisasi data berikut

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

Menampilkan Properti Model

Ketika model adalah kelas dengan properti, model tersebut mudah direferensikan dalam templat Razor seperti yang ditunjukkan dalam contoh templat ini:

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

Ini dapat dirender ke string menggunakan kode berikut:

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

Output akhir ditampilkan di sini dalam tampilan web di Simulator iOS dan Android Emulator:

Rupert

Pernyataan C#

C# yang lebih kompleks dapat disertakan dalam templat, seperti pembaruan properti Model dan perhitungan Usia dalam contoh ini:

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

Anda dapat menulis ekspresi C# baris tunggal yang kompleks (seperti memformat usia) dengan mengelilingi kode dengan @().

Beberapa pernyataan C# dapat ditulis dengan mengelilinginya dengan @{}.

Pernyataan If-else

Cabang kode dapat diekspresikan dengan @if seperti yang ditunjukkan dalam contoh templat ini.

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

Perulangan

Konstruksi perulangan seperti foreach juga dapat ditambahkan. @ Awalan dapat digunakan pada variabel perulangan ( @food dalam hal ini) untuk merendernya dalam 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>

Output templat di atas ditampilkan berjalan di Simulator iOS dan Android Emulator:

Rupert X Monkey

Bagian ini telah membahas dasar-dasar penggunaan templat Razor untuk merender tampilan baca-saja sederhana. Bagian berikutnya menjelaskan cara membuat aplikasi yang lebih lengkap menggunakan Razor yang dapat menerima input pengguna dan mengoperasikan antara JavaScript dalam tampilan HTML dan C#.

Menggunakan Templat Razor dengan Xamarin

Bagian ini menjelaskan cara menggunakan build aplikasi hibrid Anda sendiri menggunakan templat solusi di Visual Studio untuk Mac. Ada tiga templat yang tersedia dari jendela Solusi Baru > File>... :

  • Aplikasi > Android > Android WebView
  • Aplikasi WebView Aplikasi > iOS >
  • Proyek MVC ASP.NET

Jendela Solusi Baru terlihat seperti ini untuk proyek i Telepon dan Android - deskripsi solusi di bagian kanan menyoroti dukungan untuk mesin templat Razor.

Creating iPhone and Android solutions

Perhatikan bahwa Anda dapat dengan mudah menambahkan templat .cshtml Razor ke proyek Xamarin yang ada, tidak perlu menggunakan templat solusi ini. Proyek iOS juga tidak memerlukan Storyboard untuk menggunakan Razor; cukup tambahkan kontrol UIWebView ke tampilan apa pun secara terprogram dan Anda dapat merender seluruh templat Razor dalam kode C#.

Konten solusi templat default untuk proyek i Telepon dan Android ditunjukkan di bawah ini:

iPhone and Android templates

Templat memberi Anda infrastruktur aplikasi siap pakai untuk memuat templat Razor dengan objek model data, memproses input pengguna, dan berkomunikasi kembali kepada pengguna melalui JavaScript.

Bagian penting dari solusi ini adalah:

  • Konten statis seperti file style.css .
  • File templat Razor .cshtml seperti RazorView.cshtml .
  • Kelas model yang direferensikan dalam templat Razor seperti ExampleModel.cs .
  • Kelas khusus platform yang membuat tampilan web dan merender templat, seperti MainActivity di Android dan iPhoneHybridViewController di iOS.

Bagian berikut menjelaskan cara kerja proyek.

Konten Statis

Konten statis mencakup lembar gaya CSS, gambar, file JavaScript, atau konten lain yang dapat ditautkan dari atau direferensikan oleh file HTML yang ditampilkan dalam tampilan web.

Proyek templat menyertakan lembar gaya minimal untuk menunjukkan cara menyertakan konten statis di aplikasi hibrid Anda. Lembar gaya CSS direferensikan dalam templat seperti ini:

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

Anda dapat menambahkan file stylesheet dan JavaScript apa pun yang Anda butuhkan, termasuk kerangka kerja seperti JQuery.

Templat Razor cshtml

Templat ini mencakup file Razor .cshtml yang memiliki kode pra-tulis untuk membantu mengomunikasikan data antara HTML/JavaScript dan C#. Ini akan memungkinkan Anda membangun aplikasi hibrid canggih yang tidak hanya menampilkan data baca-saja dari Model, tetapi juga menerima input pengguna dalam HTML dan meneruskannya kembali ke kode C# untuk pemrosesan atau penyimpanan.

Merender templat

Memanggil GenerateString pada templat akan merender HTML siap untuk ditampilkan dalam tampilan web. Jika templat menggunakan model, templat harus disediakan sebelum penyajian. Diagram ini menggambarkan cara kerja penyajian - bukan berarti sumber daya statis diselesaikan oleh tampilan web saat runtime, menggunakan direktori dasar yang disediakan untuk menemukan file yang ditentukan.

Razor flowchart

Memanggil kode C# dari templat

Komunikasi dari tampilan web yang dirender memanggil kembali ke C# dilakukan dengan mengatur URL untuk tampilan web, lalu mencegat permintaan di C# untuk menangani permintaan asli tanpa memuat ulang tampilan web.

Contohnya dapat dilihat dalam bagaimana tombol RazorView ditangani. Tombol ini memiliki HTML berikut:

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

Fungsi InvokeCSharpWithFormValues JavaScript membaca semua nilai dari Formulir HTML dan mengatur location.href untuk tampilan web:

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

Upaya ini untuk menavigasi tampilan web ke URL dengan skema kustom (misalnya. hybrid:)

hybrid:UpdateLabel?textbox=SomeValue&UpdateLabel=Click

Ketika tampilan web asli memproses permintaan navigasi ini, kami memiliki kesempatan untuk mencegatnya. Di iOS, ini dilakukan dengan menangani peristiwa HandleShouldStartLoad UIWebView. Di Android, kami hanya subkelas WebViewClient yang digunakan dalam formulir, dan mengambil alih ShouldOverrideUrlLoading.

Internal kedua pencegat navigasi ini pada dasarnya sama.

Pertama, periksa URL yang coba dimuat tampilan web, dan jika tidak dimulai dengan skema kustom (hybrid:), izinkan navigasi terjadi seperti biasa.

Untuk skema URL kustom, semua yang ada di URL antara skema dan "?" adalah nama metode yang akan ditangani (dalam hal ini, "UpdateLabel"). Semua yang ada dalam string kueri akan diperlakukan sebagai parameter untuk panggilan metode:

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

UpdateLabel dalam sampel ini melakukan manipulasi string dalam jumlah minimal pada parameter kotak teks (prepending "C# mengatakan" ke string), dan kemudian memanggil kembali ke tampilan web.

Setelah menangani URL, metode membatalkan navigasi sehingga tampilan web tidak mencoba menyelesaikan navigasi ke URL kustom.

Memanipulasi templat dari C#

Komunikasi ke tampilan web HTML yang dirender dari C# dilakukan dengan memanggil JavaScript di tampilan web. Di iOS, ini dilakukan dengan memanggil EvaluateJavascript di UIWebView:

webView.EvaluateJavascript (js);

Di Android, JavaScript dapat dipanggil dalam tampilan web dengan memuat JavaScript sebagai URL menggunakan "javascript:" skema URL:

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

Membuat aplikasi benar-benar hibrid

Templat ini tidak menggunakan kontrol asli pada setiap platform - seluruh layar diisi dengan satu tampilan web.

HTML bisa bagus untuk membuat prototipe, dan menampilkan jenis hal-hal yang terbaik di web seperti teks kaya dan tata letak responsif. Namun tidak semua tugas cocok untuk HTML dan JavaScript - menggulir daftar panjang data, misalnya, berperforma lebih baik menggunakan kontrol UI asli (seperti UITableView di iOS atau ListView di Android).

Tampilan web dalam templat dapat dengan mudah ditambah dengan kontrol khusus platform - cukup edit MainStoryboard.storyboard menggunakan Xcode di Mac atau Resources/layout/Main.axml di Android.

Sampel RazorTodo

Repositori RazorTodo berisi dua solusi terpisah untuk menunjukkan perbedaan antara aplikasi yang sepenuhnya berbasis HTML dan aplikasi yang menggabungkan HTML dengan kontrol asli:

  • RazorTodo - Aplikasi yang sepenuhnya berbasis HTML menggunakan templat Razor.
  • RazorNativeTodo - Menggunakan kontrol tampilan daftar asli untuk iOS dan Android tetapi menampilkan layar edit dengan HTML dan Razor.

Aplikasi Xamarin ini berjalan di iOS dan Android, menggunakan Pustaka Kelas Portabel (PCL) untuk berbagi kode umum seperti database dan kelas model. Templat Razor .cshtml juga dapat disertakan dalam PCL sehingga mudah dibagikan di seluruh platform.

Kedua aplikasi sampel menggabungkan berbagi Twitter dan API teks ke ucapan dari platform asli, menunjukkan bahwa aplikasi hibrid dengan Xamarin masih memiliki akses ke semua fungsionalitas yang mendasar dari tampilan berbasis templat HTML Razor.

Aplikasi RazorTodo menggunakan templat HTML Razor untuk daftar dan mengedit tampilan. Ini berarti kita dapat membangun aplikasi hampir sepenuhnya di Pustaka Kelas Portabel bersama (termasuk database dan templat .cshtml Razor). Cuplikan layar di bawah ini menunjukkan aplikasi iOS dan Android.

RazorTodo

Aplikasi RazorNativeTodo menggunakan templat HTML Razor untuk tampilan edit, tetapi mengimplementasikan daftar gulir asli di setiap platform. Ini memberikan sejumlah manfaat termasuk:

  • Performa - kontrol gulir asli menggunakan virtualisasi untuk memastikan pengguliran cepat dan lancar bahkan dengan daftar data yang sangat panjang.
  • Pengalaman asli - elemen UI khusus platform diaktifkan dengan mudah, seperti dukungan indeks gulir cepat di iOS dan Android.

Manfaat utama membangun aplikasi hibrid dengan Xamarin adalah Anda dapat memulai dengan antarmuka pengguna yang sepenuhnya digerakkan HTML (seperti sampel pertama) dan kemudian menambahkan fungsionalitas khusus platform saat diperlukan (seperti yang ditunjukkan sampel kedua). Layar daftar asli dan layar edit HTML Razor di iOS dan Android ditunjukkan di bawah ini.

RazorNativeTodo

Ringkasan

Artikel ini telah menjelaskan fitur kontrol tampilan web yang tersedia di iOS dan Android yang memfasilitasi pembuatan aplikasi hibrid.

Kemudian membahas mesin templat Razor dan sintaks yang dapat digunakan untuk menghasilkan HTML dengan mudah di aplikasi Xamarin menggunakan .file templat cshtml Razor. Ini juga menjelaskan templat solusi Visual Studio untuk Mac yang memungkinkan Anda dengan cepat mulai membangun aplikasi hibrid dengan Xamarin.

Akhirnya memperkenalkan sampel RazorTodo yang menunjukkan cara menggabungkan tampilan web dengan antarmuka pengguna asli dan API.