Sharper HTML Hybrid Apps with Razor

Craig Dunn

April 1st, 20140 2

It may seem like there are only two choices when it comes to developing mobile apps: Either build apps against the native user interface, with native performance and deep platform integration, or use HTML5 to render a write-once, run-anywhere UI rendered in the limited mobile browser “sandbox”. What you might not have known is that any native application can support hybrid functionality by simply including a webview, and Xamarin has many features that make it a superior solution for hybrid app development including the Razor templating engine.

Xamarin Studio gives you the power of the Razor templating engine and C# to easily combine data with HTML, Javascript and CSS without the hassle of manually building HTML strings in code. When you combine Razor HTML templates with iOS and Android web browser controls it enables you to build super-charged hybrid mobile applications in Xamarin. The Razor engine allows you to create and share dynamic HTML layouts across platforms, while Xamarin’s native APIs gives you complete access to the underlying functionality on both iOS and Android.

Here’s an example Razor cshtml template from the RazorTodo sample. It combines the power of CSS styling, the ease of HTML layout, and the functionality of the underlying platforms to enable text-to-speech and social-media integration.

@using HybridRazorTodo
@model List<TodoItem>
<html>
    <head><link rel="stylesheet" href="style.css" /></head>
<body>
<h1>HybridRazorTodo <a href="hybrid:AddTask?"><img src="plus.png" /></a></h1>
    <a href="hybrid:SpeakAll?">Speak Undone</a>
    <a href="hybrid:TweetAll?">Tweet Undone</a></pre>
<ul>
    @foreach (var todo in @Model) {
	<li><a href="hybrid:ViewTask?todoid=@todo.ID">@todo.Name</a>
        @if (@todo.Done) {
            <img alt="" src="check.png" />
        }</li>
    }
</ul>
</body></html>

Razor templates run on the device, easily incorporating local data from SQLite or web services. A few lines of code is all it takes to render a template with its model data and display in a web view, and just a few lines more to process the user input and save it to a database or cloud service.

User interaction can be processed with Javascript (validation rules, for example) or C# (for persistence, native API calls, etc), or a combination of both. When writing code to handle user input, it feels just like writing web form processing.

You can incorporate Javascript frameworks like JQuery and JQuery Mobile, as well as CSS files, images, videos and sounds stored in the app (or downloaded from the web). Most importantly, the full power of the underlying platform SDK is available, so you can also easily incorporate iOS or Android features like Twitter integration or text-to-speech:

http://xamarin.wistia.com/medias/dcualkek0r?embedType=iframe&videoWidth=640

See our Building Hybrid apps with Xamarin documentation to get started building Razor Hybrid applications. Simply use Xamarin Studio to create a new WebView Application for iOS or Android, or add a WebView to any existing iOS or Android layout, and use Add New…Preprocessed Razor Template to incorporate Razor-powered web views into your Xamarin apps. For a slightly more complex sample of a data-driven Razor hybrid app, check out our RazorTodo app.

Discuss this blog post in the Xamarin Forums