Home

Awesome

PortableRazorStarterKit

The Portable Congress application is a Portable Razor Starter Kit that shows how to use Portable Razor to build a hybrid application with Xamarin, and works with Xamarin Starter Edition. Using JQuery Mobile for the front end, it shows how to build a common core in C#, connected to the front-end through the Razor tempting engine.

The majority of the code in Portable Congress is implemented in a core PortableCongress library. Here you will find the cross-platform views, controllers and web service. Additionally, platform projects are provided to bootstrap the application on both Android and iOS.

Views with Razor Templates

Screens are added in Portable Congress by adding a new Preprocessed Razor Template (.cshtml) file in the Portable Congress Views folder.

This is the razor template where you create your view. For example, the following shows the template for the politician list screen:

@inherits PortableRazor.ViewBase
@model System.Collections.Generic.List<Politician>

<html>
<head>
	<link rel="stylesheet" href="jquery.mobile-1.4.0.min.css" />
	<script src="jquery-1.10.2.min.js"></script>
	<script src="jquery.mobile-1.4.0.min.js"></script>
	<script src="jquery.lazyloadxt.js"></script>
</head>
<body>
	<div data-role="header" style="overflow:hidden;" data-position="fixed">
    	<h1>Congress</h1>
    </div>

	<ul data-role="listview" data-inset="true" data-filter-placeholder="Search Congress..." data-filter="true">
		@foreach(var p in Model) {
			<li>
				<a href="@Url.Action("ShowPoliticianView", new {id = p.Id })">
					<img src="loader.gif" data-src="@Url.Content(p.ImageName)"/>
    				<h2>@Html.Label(String.Format("{0} {1}", p.FirstName, p.LastName))</h2>
    				<p>@Html.Label(String.Format("{0} {1}", p.Party, p.State))</p>
				</a>
			</li>
		}
	</ul>
	<div data-role="footer" data-id="foo1" data-position="fixed">
		<div data-role="navbar">
			<ul>
				<li><a href="@Url.Action("ShowPoliticianList")">Politicians</a></li>
				<li><a href="@Url.Action("ShowFavoriteBills")">Bills</a></li>
			</ul>
		</div>
	</div>
</body>
</html>

Using C# Models

A view presents data from a model, which is implemented in C#. In the above example, the view presents a List<Politician> where Politician is a class implemented in C#.

To call into C#, the view can leverage the ASP.NET MVC methods we've brought to PortableRazor, such as @Url.Action and @Html.ActionLink. For example, the following code uses @Url.Action to call the ShowPoliticianView method:

<a href="@Url.Action("ShowPoliticianView", new {id = p.Id })">

Using C# Controllers

ShowPoliticianView is implemented in the controller, to query a local data base in this caee and present the data in the view generated by Razor:

public Politician ShowPoliticianView(int id) {
	var politician = dataAccess.LoadPolitician (id);

	var template = new PoliticianView { Model = politician };
	var page = template.GenerateString ();

	webView.LoadHtmlString (page);
	return politician;
}

Using with Xamarin Studio on Windows

If you are running with Xamarin Studio on Windows, you'll need to install portable library tools:

http://visualstudiogallery.msdn.microsoft.com/b0e0b5e9-e138-410b-ad10-00cb3caf4981/

Then in the command prompt run:

PortableLibraryTools.exe /buildmachine

Note: Xamarin Studio on Windows does not support iOS development.