![\"Portable](\"\/wp-content\/uploads\/sites\/44\/2019\/04\/PortableCongress.png\")
<\/p>\n
Our starter-compatible<\/a> Portable Razor Starter Kit<\/a> shows how to use the portable razor framework to build a hybrid application<\/a> with Xamarin Studio. Using the Razor templating engine, it shows how to build a common core in C#, connected to a JQuery Mobile<\/a> UI.<\/p>\n If HTML, JavaScript, C# and Native APIs can get along, maybe Congress can too.<\/p>\n The sample kit includes the Portable Congress application, which is a data-driven mobile application that provides easy access to members of the United States Congress. Portable Congress is implemented in a core PCL project named “Portable Congress” – clever! Here you will find the cross-platform views, controllers and web service code. Additionally, platform projects are provided to bootstrap the native portions of the application on both Android and iOS.<\/p>\n Screens are added in Portable Congress by adding a new Preprocessed Razor Template<\/strong> (.cshtml) file in the Portable Congress Views<\/strong> folder. <\/p>\n This is the Razor template where you create your view. For example, the following code shows the template for the politician list screen:<\/p>\n A view presents data from a model, which is implemented in C#. In the above example, the view presents a List<Politician><\/strong> where Politician<\/strong> is a class implemented in C#. <\/p>\n To call into C#, the view can leverage the ASP.NET MVC<\/a> methods we’ve brought to Portable Razor, such as @Url.Action<\/strong> and @Html.ActionLink<\/strong>. For example, the following code uses @Url.Action<\/strong> to call the ShowPoliticianView<\/strong> method:<\/p>\n ShowPoliticianView<\/strong> is implemented in the controller to query and present the data in the view generated by Razor:<\/p>\n With Portable Razor<\/a><\/strong> and Portable Congress<\/a><\/strong>, you now have a great starting point for building hybrid applications with Xamarin. To learn more on how to create hybrid apps with Razor templates from scratch, be sure to read our getting started with Razor templates post<\/a>.<\/p>\n![\"Portable](\"\/wp-content\/uploads\/sites\/44\/2019\/04\/PortableCongressSolution-1024x598.png\")
<\/a><\/p>\nWorking with Portable Congress<\/h2>\n
![\"New](\"\/wp-content\/uploads\/sites\/44\/2019\/04\/NewRazorTemplate.png\")
<\/p>\n\n@inherits PortableRazor.ViewBase\n@model System.Collections.Generic.List<Politician>\n\n<html>\n<head>\n <link rel="stylesheet" href="jquery.mobile-1.4.0.min.css" \/>\n <script src="jquery-1.10.2.min.js"><\/script>\n <script src="jquery.mobile-1.4.0.min.js"><\/script>\n <script src="jquery.lazyloadxt.js"><\/script>\n<\/head>\n<body>\n<div data-role="header" style="overflow:hidden;" data-position="fixed">\n <h1>Congress<\/h1>\n<\/div>\n\n<ul data-role="listview" data-inset="true" data-filter-placeholder="Search Congress..." data-filter="true">\n @foreach(var p in Model) {\n <li>\n <a href="@Url.Action("ShowPoliticianView", new {id = p.Id })">\n <img src="loader.gif" data-src="@Url.Content(p.ImageName)"\/>\n <h2>@Html.Label(String.Format("{0} {1}", p.FirstName, p.LastName))<\/h2>\n <p>@Html.Label(String.Format("{0} {1}", p.Party, p.State))<\/p>\n <\/a>\n <\/li>\n }\n<\/ul>\n<div data-role="footer" data-id="foo1" data-position="fixed">\n <div data-role="navbar">\n <ul>\n <li><a href="@Url.Action("ShowPoliticianList")">Politicians<\/a><\/li>\n <li><a href="@Url.Action("ShowFavoriteBills")">Bills<\/a><\/li>\n <\/ul>\n <\/div>\n<\/div>\n<\/body>\n<\/html>\n<\/pre>\n\n<a href="@Url.Action("ShowPoliticianView", new {id = p.Id })">\n<\/pre>\n\npublic Politician ShowPoliticianView(int id) {\n var politician = dataAccess.LoadPolitician (id);\n\n var template = new PoliticianView { Model = politician };\n var page = template.GenerateString ();\n\n webView.LoadHtmlString (page);\n return politician;\n}\n<\/pre>\n