[Xamarin Blog] Sharper HTML Hybrid Apps with Razor RRS feed

  • Question

  • User14 posted

    Just posted: Sharper HTML Hybrid Apps with Razor on the Xamarin Blog.

    Read the full article to learn how to create new Hybrid HTML mobile applications using Xamarin and the Razor templating engine (or add Razor cshtml templates to your existing Xamarin apps).

    Use this thread to discuss or ask questions.

    Monday, March 31, 2014 9:15 PM

All replies

  • User8070 posted

    I am currently a similar code pattern, only using XSL in stead of the razor engine to generate the HTML based on model objects - it works extremely well, but lacks the C# coding possibilities of the razor engine, so I'm keen to know if I can use the razor engine in Visual Studio or only in Xamarin Studio?

    Tuesday, April 1, 2014 8:25 PM
  • User12403 posted

    @CraigDunn?, how well would something like this integrate with Windows Phone? I did some experiment with the hybrid approach and used JSON serializer to provide a bridge between JS and C#.

    With some partial methods and compiler flags I was able to create a PCL compatible interface for IWebHybrid that works for iOS, Android and WP8. The callback string still needs to be deserialized back into object but calling JS functions you would just pass in the C# object.

    using System;
    namespace SimplyMobile.Web
        public interface IWebHybrid : IDisposable
            void InjectJavaScript(string script);
            void RegisterCallback(string name, Action<string> action);
            bool RemoveCallback(string name);
            void CallJsFunction(string function, params object[] parameters);
    Wednesday, April 2, 2014 12:11 AM
  • User14 posted

    @Miros we're working to get the Visual Studio support on-par with Xamarin Studio. Currently the File>New>Solution templates are not available via our Visual Studio plug-in.

    @SKall working on including a Windows Phone app in the sample at a later date. We haven't gone as deep as your proposal though, the File>New>Solution templates include a simple Javascript function that helps to pass data back-and-forth using key-value pairs (ie. the standard HTML FORM parameter string and HttpUtility.ParseQueryString).

    Wednesday, April 2, 2014 12:44 AM
  • User45855 posted

    This looks like great functionality but why would one want to do it? To maximise presentation code re-use at the cost of performance?

    Wednesday, April 2, 2014 2:12 AM
  • User14 posted

    @LauriePaulin I'm sure there are many different scenarios where this approach makes sense; a couple OTTOMH:

    • Prototyping - esp if you have existing HTML/JS/CSS developers. You could really quickly get your app navigation and basic functionality up-and-running using this approach (across platforms). It could also be a way of transitioning/training your web developers into mobile app developers.

    • Content & Code Re-use - maybe you already have a website (or even better a mobile-optimized website) that you want to grow/expand into an app. This approach lets you bring in existing HTML & other resources, re-using them to get your app up-and-running quickly and more cheaply than having to re-build everything as native views. All your Javascript validation logic (for example) could be re-used easily. If your web back-end is ASP.NET MVC, you can even re-use your Razor templates!

    • Styled Text - both iOS and Android native APIs are only just starting to support sophisticated styled text rendering (in a way that's quick and easy to code). If part of your app requires sophisticated text rendering with fonts, colors, styles, etc (especially for downloaded content) then maybe this approach will give you better results for now.

    • Forms - there is a certain class of enterprise app (probably not meant for consumers) that involves form-filling, often driven by back-end databases with customizable fields, flexible validation rules and back-to-server data saving. While we don't really think that you should be doing lots of interaction in HTML, we certainly acknowledge that many developers will appreciate the simplicity of using HTML to create cross-platform forms quickly (meeting their BYOD requirements).

    • App Upgrades - maybe you built an existing app using just HTML and Javascript (with some other toolsest), and have decided to upgrade to a platform that provides native performance and access to underlying APIs. This approach lets you bring your existing app assets to Xamarin, while also providing a clear path to upgrade your app to be faster and use native UI controls in future.

    That's just a few I can think of. Xamarin's goal is to expose the power of each underlying platform to our developers (hence our complete coverage of the native iOS and Android APIs in C#) but also to bring the power of .NET to these platforms... making the Razor templating engine available is just another example of how we can bring .NET technologies to the mobile space and give developers even more options and flexibility when building their apps.

    It's also important to remember that in all of these scenarios, building parts of your app using HTML and Javascript doesn't mean you're locked into that forever. The beauty of doing it with Xamarin is that you can always access the complete underlying native APIs and also gradually migrate views and code to native performance and UI controls if/when required.

    Wednesday, April 2, 2014 4:19 AM
  • User45855 posted

    Hey, thanks for the fabulous response, it was very comprehensive.

    Being able to do native and hybrid in the one tool is certainly very compelling and I look forward to using both in future projects.


    Wednesday, April 2, 2014 4:29 AM
  • User12403 posted

    I have had to justify Xamarin vs hybrid multiple times and one of the things is exactly what Craig said that with Xamarin I can do the same things one can do with Hybrid, but without being limited to hybrid. Of course one could use the hybrid approach by creating partial views but then the rest of the code would have to be native ObjC or Java.

    While I do like Razor it of course is more suitable to create static pages with a C# (View)Model. For interactive pages you will need JavaScript (something like Knockout.js). That was the goal of my proof-of-concept implementation. On one side I had a CanvasJS chart rendering library, on the other side I had native iOS controls, and in the middle was the C# bridge. Change a value in a slider on an iPad and the chart values on the HTML container would reflect the change.

    Wednesday, April 2, 2014 1:27 PM
  • User20672 posted

    I am able to build and run the RazorTodo sample on our mini Mac initially. However as soon as I change some HTML, the compilation halts with: The type or namespace "HybridRazorTodo' could not be found.... Reverting my changes does not help. Compilation will not succeed again. I dont understand what I'm doing wrong. It seems that some library that is initially present, is gone after recomplilation.I don't see which one. Can someone help?

    Monday, April 14, 2014 12:18 PM
  • User14 posted

    Hi @RobertHendriksen? - sorry about that! I just checked the code and discovered the namespace in the cshtml file should actually be RazorTodo. I've pushed the fix to github.

    Monday, April 14, 2014 3:15 PM
  • User31690 posted

    Thanks @CraigDunn. We can get it running now. I do see one strange thing which is probably caused by some version incompatilbility. When I recompile the razor example, the generated code for TodoList.WriteTo needs to modified in order to compile correctly:

    Generated: System.Net.WebUtility.HtmlEncode (value.ToString (), writer);

    Modified writer.Write(System.Net.WebUtility.HtmlEncode (value.ToString ());

    How can we fix this? Thanks in advance

    Wednesday, April 16, 2014 9:09 AM
  • User35126 posted

    Hi @CraigDunn?,

    How did you add System.Web to the Android version? I can't seem to add this to the references.


    Friday, May 9, 2014 8:53 AM
  • User10 posted

    Hi @oVan?
    On iOS and Android, System.Web is provided by the System.Web.Services assembly.

    Hope that helps

    Monday, May 12, 2014 2:01 AM
  • User10 posted

    @WilPeters? Are you running the latest version of Xamarin Studio? We filed some bugs to fix this when it was being generated for some of the elements, but I haven't seen it happen in a while. If you see it in the latest stable release of Xamarin Studio, it should be fixed if you switch to the beta channel (Xamarin Studio -> Check for updates).

    Monday, May 12, 2014 2:17 AM
  • User30795 posted

    Is this solution compatible with starter edition?

    Wednesday, May 14, 2014 3:48 PM
  • User14 posted

    @AnurajParameswaran? Sadly that version isn't Starter-compatible because I used the SQLite NuGet package to keep the data-access simple.

    To help out, I've created a Starter-compatible version which uses ADO instead.

    Razor templates are definitely available in Starter projects!

    Wednesday, May 14, 2014 5:16 PM
  • User32518 posted

    Hi Craig,

    Is there an HTML.Raw() function that can be used to output unescaped HTML?

    I'm running my string through a markdown parser and passing that to the razor templates but it generates escaped html.

    I see the code-behind generated uses a WriteLiteral function, is there anyway to use that in the .cshtml file directly?


    Saturday, June 28, 2014 5:58 AM
  • User14 posted

    Have you got an example? Does this not work

    WriteLiteral("some output");


    Wednesday, October 29, 2014 11:00 PM
  • User96134 posted

    WriteLiteral("some output"); works fine to me! tks a lot.

    Saturday, February 7, 2015 6:40 PM
  • User6349 posted

    Wow. Well, that is certainly one way of rendering content, LOL!

    Saturday, February 7, 2015 10:50 PM
  • User182763 posted

    Hello, guys! I have one question to you, how can I generate a new .cshtml class in runtime? I want to get a new templates from server and I have a problem with the Razor, because I must create the all templates before the compilation of my app. I wanted to use for this RazorEngine library https://github.com/Antaris/RazorEngine and Nustache https://github.com/jdiamond/Nustache .But I can't add them into my project, look at the problem http://forums.xamarin.com/discussion/58192/how-to-add-nustachelib-to-project-ive-got-problem-with-targetframework

    Does anybody can idea how what tot do in my situation?

    Friday, December 25, 2015 7:55 AM
  • User252299 posted

    Hi. Is there any altenative to using @{HTML.RenderPartial("xyz", Model.xyz);} ? I'm trying to use my .cshtml views from my website and convert it to mobile using the portablerazor library but portablerazor library does not support renderpartial.

    Friday, September 2, 2016 7:56 AM