Создание HTML-представления с помощью шаблонов RazorBuilding HTML views using Razor Templates

В мире разработки мобильных приложений термина «гибридное приложение» обычно ссылается на приложение, которое представляет некоторые или все его экранов в виде HTML-страниц в средство просмотра размещенного веб-элемент управления.In the mobile development world the term “hybrid app” typically refers to an application that presents some (or all) of its screens as HTML pages inside a hosted web viewer control.

Существуют некоторые среды разработки, позволяющие созданию мобильного приложения полностью в HTML и Javascript, однако эти приложения могут испытывать проблемы с производительностью, при попытке выполнить сложную обработку или эффекты пользовательского интерфейса и являются также ограничивали на платформу функции, они могут получать доступ.There are some development environments that let you build your mobile app entirely in HTML and Javascript, however those apps can suffer from performance problems when trying to accomplish complex processing or UI effects and are also limited in the platform features they can access.

Xamarin предлагает лучшее из обоих областей, особенно в том случае, при использовании подсистему шаблонов Razor HTML.Xamarin offers the best of both worlds, especially when utilizing the Razor HTML templating engine. С помощью Xamarin вы можете создавать кросс платформенных шаблонного HTML-представления, которые используют Javascript и CSS, но также имеют полный доступ к интерфейсам API базовой платформы и быстрой обработки, с помощью C#.With Xamarin you have the flexibility to build cross-platform templated HTML views that use Javascript and CSS, but also have complete access to the underlying platform APIs and fast processing using C#.

В этом документе описываются способы использования представления HTML + Javascript + CSS, которые могут использоваться на мобильных платформах с помощью Xamarin создавать модуль создания шаблонов Razor.This document explains how to use the Razor templating engine build HTML+Javascript+CSS views that can be used across mobile platforms using Xamarin.

С помощью веб-представления программными средствамиUsing Web Views Programmatically

Прежде чем мы изучаем Razor в этом разделе рассказывается об использовании веб-представления для отображения HTML-содержимое непосредственно — в частности HTML-содержимое, которое создается в приложении.Before we learn about Razor this section covers how to use web views to display HTML content directly – specifically HTML content that is generated within an app.

Xamarin предоставляет полный доступ к интерфейсам API базовой платформы для iOS и Android, вы сможете быстро создать и отобразить HTML с помощью C#.Xamarin provides complete access to the underlying platform APIs on both iOS and Android, so it is easy to create and display HTML using C#. Ниже приведен базовый синтаксис для каждой платформы.The basic syntax for each platform is shown below.

iOSiOS

Отображение HTML в элементе управления UIWebView в Xamarin.iOS также принимает несколько строк кода:Displaying HTML in a UIWebView control in Xamarin.iOS also takes just a few lines of code:

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

См. в разделе iOS UIWebView рецепты, Дополнительные сведения об использовании UIWebView элемента управления.See the iOS UIWebView recipes for more details on using the UIWebView control.

AndroidAndroid

Отображение HTML в элементе управления WebView, с помощью Xamarin.Android выполняется в несколько строк кода:Displaying HTML in a WebView control using Xamarin.Android is accomplished in just a few lines of code:

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

См. в разделе Android WebView рецепты, Дополнительные сведения об использовании элемента управления WebView.See the Android WebView recipes for more details on using the WebView control.

Определение базового каталогаSpecifying the Base Directory

На обеих платформах имеется параметр, который указывает базовый каталог для HTML-страницы.On both platforms there is a parameter that specifies the base directory for the HTML page. Это расположение в файловой системе устройства, который используется для разрешения относительных ссылок на ресурсы, такие как изображения и файлы CSS.This is the location on the device’s file system that is used to resolve relative references to resources like images and CSS files. Например теги, такие какFor example, tags like

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

ссылки на эти файлы: style.css, monkey.jpg и jscript.js.refer to these files: style.css, monkey.jpg and jscript.js. Параметр базовый каталог указывает веб-представление, в которых эти файлы расположены, их можно загрузить на странице.The base directory setting tells the web view where these files are located so they can be loaded into the page.

iOSiOS

Выходные данные шаблона и отображается в iOS на следующий код C#:The template output is rendered in iOS with the following C# code:

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

Базовый каталог указывается как NSBundle.MainBundle.BundleUrl которой ссылается на каталог, установленный в приложение.The base directory is specified as NSBundle.MainBundle.BundleUrl which refers to the directory that the application is installed in. Все файлы в ресурсы папки копируются в это расположение, например style.css файл, показанный здесь:All the files in the Resources folder are copied to this location, such as the style.css file shown here:

решение iPhoneHybrid

Действие сборки для всех статических файлов содержимого должен быть BundleResource:The Build Action for all static content files should be BundleResource:

действие построения для проекта iOS: BundleResource

AndroidAndroid

Для Android также требуется базовый каталог нельзя передать как параметр при отображении строк html в веб-представление.Android also requires a base directory to be passed as a parameter when html strings are displayed in a web view.

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

Специальной строки file:///android_asset/ ссылается на папку ресурсов Android в приложении, показанный здесь содержащий style.css файл.The special string file:///android_asset/ refers to the Android Assets folder in your app, shown here containing the style.css file.

Решение AndroidHybrid

Действие сборки для всех статических файлов содержимого должен быть AndroidAsset.The Build Action for all static content files should be AndroidAsset.

Действие построения для проекта Android: AndroidAsset

Вызов C# из HTML и JavascriptCalling C# from HTML and Javascript

При загрузке страницы html в веб-представление, обрабатывает ссылки и forms как это происходит, если страница была загружена с сервера.When an html page is loaded into a web view, it treats the links and forms as it would if the page was loaded from a server. Это означает, что если пользователь щелкает ссылку или отправке формы веб-представление будет пытаться перейти в указанный целевой объект.This means that if the user clicks a link or submits a form the web view will attempt to navigate to the specified target.

Если ссылка на внешний сервер (например google.com) веб-представлении попытается загрузить внешний веб-сайт (при условии, что имеется подключение к Интернету).If the link is to an external server (such as google.com) then the web view will attempt to load the external website (assuming there is an internet connection).

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

Если ссылка является относительным веб-представлении попытается загрузить это содержимое из базового каталога.If the link is relative then the web view will attempt to load that content from the base directory. Очевидно, что нет сетевого подключения требуется, чтобы это работало, как содержимое хранится в приложение на устройстве.Obviously no network connection is required for this to work, as the content is stored in the app on the device.

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

Действия формы выполните то же правило.Form actions follow the same rule.

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

Вы не собираетесь размещать веб-сервера на клиенте; Тем не менее можно использовать те же способы связи сервера, используемых в современных шаблонов гибкий Дизайн для вызова службы через HTTP GET и обрабатывать ответы асинхронно путем введения Javascript (или вызывающий Javascript уже размещена на веб-представление).You’re not going to host a web server on the client; however, you can use the same server communication techniques employed in today’s responsive design patterns to call services over HTTP GET, and handle responses asynchronously by emitting Javascript (or calling Javascript already hosted in the web view). Это позволяет легко передавать данные из HTML-код обратно в код C# для обработки, а затем отображать результаты обратно на HTML-страницы.This enables you to easily pass data from the HTML back into C# code for processing then display the results back on the HTML page.

IOS и Android предоставляют механизм для кода приложения перехватывать эти события навигации, таким образом, код приложения может отвечать (при необходимости).Both iOS and Android provide a mechanism for application code to intercept these navigation events so that app code can respond (if required). Эта функция крайне важно для построения гибридные приложения, так как она позволяет взаимодействовать с веб-представлении машинного кода.This feature is crucial to building hybrid apps because it lets native code interact with the web view.

iOSiOS

Чтобы кода приложения для обработки запроса перехода (например, щелчок ссылки) можно переопределить событие ShouldStartLoad на веб-представление в iOS.The ShouldStartLoad event on the web view in iOS can be overridden to allow application code to handle a navigation request (such as a link click). Предоставьте все сведения, параметры методаThe method parameters supply all the information

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

а затем назначьте обработчик событий:and then assign the event handler:

webView.ShouldStartLoad += HandleShouldStartLoad;

AndroidAndroid

В Android просто подкласс WebViewClient и затем реализуйте код для ответа на запрос навигации.On Android simply subclass WebViewClient and then implement code to respond to the navigation request.

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

а затем установите клиент на веб-представление:and then set the client on the web view:

webView.SetWebViewClient (new HybridWebViewClient ());

Вызов Javascript из C#Calling Javascript from C#

А также о том, веб-представление для загрузки новой HTML-страницы, код C# также можно запустить Javascript в пределах текущей отображаемой страницы.In addition to telling a web view to load a new HTML page, C# code can also run Javascript within the currently displayed page. Всего блоки кода Javascript может быть создан с помощью C# строк и выполнена, или вы можете создать вызовы методов в Javascript, которые уже доступны на странице с помощью script теги.Entire Javascript code blocks can be created using C# strings and executed, or you can craft method calls to Javascript already available on the page via script tags.

AndroidAndroid

Создание кода Javascript для выполнения и затем префикса «javascript:» и дает указание веб-представление, чтобы загрузить эту строку:Create the Javascript code to be executed and then prefix it with “javascript:” and instruct the web view to load that string:

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

iOSiOS

веб-представления iOS предоставляют метод специально для вызова Javascript:iOS web views provide a method specifically to call Javascript:

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

СводкаSummary

В этом разделе были представлены функции веб-элементов управления представления на Android и iOS, которые позволяют создавать гибридные приложения с помощью Xamarin, включая:This section has introduced the features of the web view controls on both Android and iOS that let us build hybrid applications with Xamarin, including:

  • Возможность загрузки HTML из строк, создаваемые в коде,The ability to load HTML from strings generated in code,
  • Возможность ссылаться на локальные файлы (CSS, Javascript, изображения или другие HTML-файлы),The ability to reference local files (CSS, Javascript, Images or other HTML files),
  • Возможность перехватывать запросы навигации в коде C#The ability to intercept navigation requests in C# code,
  • Возможность вызова Javascript из кода C#.The ability to call Javascript from C# code.

В следующем разделе описывается Razor, что упрощает создание HTML-код для использования в гибридных приложениях.The next section introduces Razor, which makes it easy to create the HTML to use in hybrid apps.

Что такое RazorWhat is Razor?

Razor — это механизм шаблонов, которая впервые появилась в ASP.NET MVC, первоначально для запуска на сервере и создают HTML-код предоставляется в веб-браузеры.Razor is a templating engine that was introduced with ASP.NET MVC, originally to run on the server and generate HTML to be served to web browsers.

Механизм шаблонов Razor расширяет стандартный синтаксис HTML с помощью C#, что можно представлять размещение и легко встраивать таблицы стилей CSS и Javascript.The Razor templating engine extends standard HTML syntax with C# so that you can express the layout and incorporate CSS stylesheets and Javascript easily. Шаблон может ссылаться на класс модели, который может быть любого пользовательского типа и свойства которого может осуществляться непосредственно из шаблона.The template can reference a Model class, which can be any custom type and whose properties can be accessed directly from the template. Один из его преимуществ является возможность легко смешивать синтаксис HTML и C#.One of its main advantages is the ability to mix HTML and C# syntax easily.

Шаблоны Razor не только для использования на сервере, также могут быть включены в приложениях Xamarin.Razor templates are not limited to server-side use, they can also be included in Xamarin apps. Razor наряду с возможностью для работы с веб-представления программными средствами с помощью шаблонов сложных гибридных кроссплатформенных приложений, созданным с использованием Xamarin.Using Razor templates along with the ability to work with web views programmatically enables sophisticated cross-platform hybrid applications to be built with Xamarin.

Основы шаблон RazorRazor Template Basics

Файлы шаблонов Razor имеют .cshtml расширение файла.Razor template files have a .cshtml file extension. Могут быть добавлены к проекту Xamarin из раздела текстовых шаблонов в новый файл диалоговое окно:They can be added to a Xamarin project from the Text Templating section in the New File dialog:

Новый файл - шаблон Razor

Простой шаблон Razor ( RazorView.cshtml) показан ниже.A simple Razor template ( RazorView.cshtml) is shown below.

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

Обратите внимание, что следующие отличия от регулярных HTML-файл:Notice the following differences from a regular HTML file:

  • @ Символ имеет особое значение в шаблоны Razor — он указывает, что следующее выражение C# для оценки.The @ symbol has special meaning in Razor templates – it indicates that the following expression is C# to be evaluated.
  • @model Директива всегда отображается в первой строке файла шаблона Razor.@model directive always appears as the first line of a Razor template file.
  • @model Должен располагаться после директивы с типом.The @model directive should be followed by a Type. В этом примере простая строка передается в шаблон, но это может быть любой пользовательский класс.In this example a simple string is being passed to the template, but this could be any custom class.
  • Когда @Model указывается в шаблоне, он предоставляет ссылку на объект, передаваемый в шаблоне, при его создании (в данном примере, он будет строка).When @Model is referenced throughout the template, it provides a reference to the object passed to the template when it is generated (in this example it will be a string).
  • Интегрированная среда разработки автоматически создает разделяемый класс для шаблонов (файлы с .cshtml расширения).The IDE will automatically generate partial class for templates (files with the .cshtml extension). Этот код можно просматривать, но его не следует изменять.You can view this code but it should not be edited. RazorView.cshtml разделяемый класс называется RazorView должно соответствовать имени файла шаблона .cshtml.RazorView.cshtml The partial class is named RazorView to match the .cshtml template file name. Это данному имени, которое используется для ссылки на шаблон в коде C#.It is this name that is used to refer to the template in C# code.
  • @using операторы также могут быть включены в верхней части шаблона Razor для включения дополнительных пространств имен.@using statements can also be included at the top of a Razor template to include additional namespaces.

После этого можно сгенерировать окончательные выходные данные HTML следующим кодом C#.The final HTML output can then be generated with the following C# code. Обратите внимание на то, что мы указываем модели в виде строки «Hello World» которого будут включены в выходные данные шаблона, готовый для просмотра.Note that we specify the Model to be a string “Hello World” which will be incorporated into the rendered template output.

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

Ниже приведен результат, показанный на веб-представление на iOS Simulator и эмулятор Android.Here is the output shown in a web view on the iOS Simulator and Android Emulator:

Hello World

Дополнительные сведения о синтаксисе RazorMore Razor Syntax

В этом разделе, которую мы собираемся представить определенный базовый синтаксис Razor, чтобы помочь вам приступить к работе с помощью его.In this section we’re going to introduce some basic Razor syntax to help you get started using it. Примеры в этом разделе заполнить следующий класс данных и отобразить его с помощью Razor:The examples in this section populate the following class with data and display it using Razor:

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

Все примеры используют следующий код инициализации данныхAll examples use the following data initialization code

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

Отображение свойств моделиDisplaying Model Properties

Если модель является классом со свойствами, они легко указаны в шаблоне Razor как показано в этом примере шаблона:When the model is a class with properties, they are easily referenced in the Razor template as shown in this example template:

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

Это можно отобразить в строку, используя следующий код:This can be rendered to a string using the following code:

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

Ниже приведен окончательный результат в веб-представление на iOS Simulator и эмулятор Android.The final output is shown here in a web view on the iOS Simulator and Android Emulator:

Rupert

Операторы в C#C# statements

Более сложные C# могут быть включены в шаблоне, например обновления свойств модели и вычисления возраста в этом примере:More complex C# can be included in the template, such as the Model property updates and the Age calculation in this example:

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

Можно написать сложные однострочный выражения C# (например, форматирование возраст), заключив код в @().You can write complex single-line C# expressions (like formatting the age) by surrounding the code with @().

Несколько инструкций C# возможна, если заключить их с @{}.Multiple C# statements can be written by surrounding them with @{}.

If-else-операторыIf-else statements

Может быть выражен ветвей кода @if так, как показано в следующем примере шаблон.Code branches can be expressed with @if as shown in this template example.

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

ЦиклыLoops

Циклические конструкции, такие как foreach также могут быть добавлены.Looping constructs like foreach can also be added. @ Префикс может использоваться в переменной цикла ( @food в данном случае) для отображения его в формате HTML.The @ prefix can be used on the loop variable ( @food in this case) to render it in 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>

Показан результат выше шаблона, работающих под управлением iOS Simulator и эмулятор Android:The output of the above template is shown running on the iOS Simulator and Android Emulator:

Rupert X Monkey

В этом разделе подробно рассматривается основы использования шаблонов Razor для отображения простого представления только для чтения.This section has covered the basics of using Razor templates to render simple read-only views. В следующем разделе показано, как создавать более полные приложения, с помощью Razor, которые могут принимать входные данные пользователя и возможности взаимодействия между Javascript в представлении HTML и C#.The next section explains how to build more complete apps using Razor that can accept user-input and interoperate between Javascript in the HTML view and C#.

С помощью шаблонов Razor с помощью XamarinUsing Razor Templates with Xamarin

В этом разделе описываются способы использования построения гибридного приложения с помощью шаблонов решений в Visual Studio для Mac.This section explains how to use build your own hybrid application using the solution templates in Visual Studio for Mac. Существует три шаблона из файл > Создать > решения... окно:There are three templates available from the File > New > Solution... window:

  • Android > приложение > приложение Android WebViewAndroid > App > Android WebView Application
  • iOS > приложение > приложение веб-представленияiOS > App > WebView Application
  • Проект ASP.NET MVCASP.NET MVC Project

Новое решение окно выглядит для iPhone и Android проектов — описание решения в правой части выделяет поддержка подсистему шаблонов Razor.The New Solution window looks like this for iPhone and Android projects - the solution description on the right highlights support for the Razor templating engine.

Создание iPhone и Android решений

Обратите внимание, что можно легко добавить .cshtml шаблон Razor для любой существующий проект Xamarin, нет необходимости использовать эти шаблоны решений.Note that you can easily add a .cshtml Razor template to any existing Xamarin project, it is not necessary to use these solution templates. проекты iOS не требуют раскадровки, чтобы использовать Razor либо; просто добавьте элемент управления UIWebView для любого представления программным образом и может отображать шаблоны Razor целиком в коде C#.iOS projects do not require a Storyboard to use Razor either; simply add a UIWebView control to any view programmatically and you can render Razor templates entire in C# code.

Ниже приведены решения содержимое шаблона по умолчанию для iPhone и Android проектов:The default template solution contents for iPhone and Android projects are shown below:

iPhone и Android шаблонов

Шаблоны предоставляют инфраструктуры все готово к использованию приложения для загрузки шаблона Razor с помощью объекта модели данных, обработки пользовательского ввода и обратной связи с пользователем с помощью Javascript.The templates give you ready-to-go application infrastructure to load a Razor template with a data model object, process user input and communicate back to the user via Javascript.

Ниже приведены важные части решения.The important parts of the solution are:

  • Статическое содержимое, например style.css файл.Static content such as the style.css file.
  • Файлы шаблонов .cshtml Razor, такие как RazorView.cshtml .Razor .cshtml template files like RazorView.cshtml .
  • Классы, которые упоминаются в шаблоны Razor, таких как модели ExampleModel.cs .Model classes that are referenced in the Razor templates such as ExampleModel.cs .
  • Специфические для платформы класса, который создает веб-представление и отрисовывает шаблон, такие как MainActivity в Android и iPhoneHybridViewController в iOS.The platform-specific class that creates the web view and renders the template, such as the MainActivity on Android and the iPhoneHybridViewController on iOS.

В следующем разделе объясняется, как работают проектов.The following section explains how the projects work.

Статическое содержимоеStatic Content

К статическому содержимому относятся таблицы стилей CSS, изображения, файлы Javascript или другое содержимое, которое могут быть связаны с или ссылается файл HTML, отображаемого в веб-представление.Static content includes CSS stylesheets, images, Javascript files or other content that can be linked from or referenced by an HTML file being displayed in a web view.

Проекты шаблонов включают минимальной стилей, чтобы продемонстрировать, как включить статическое содержимое в свое гибридное приложение.The template projects include a minimal style sheet to demonstrate how to include static content in your hybrid app. Таблица стилей CSS указывается в шаблоне следующим образом:The CSS stylesheet is referenced in the template like this:

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

Можно добавить любые таблицы стилей и файлы Javascript, вам нужна, включая такие платформы, как JQuery.You can add whatever stylesheet and Javascript files you need, including frameworks like JQuery.

Cshtml Razor шаблоныRazor cshtml Templates

В шаблоне есть Razor .cshtml файл, который предварительно написал код для обмена данными между HTML/Javascript и C#.The template includes a Razor .cshtml file that has pre-written code to help communicate data between the HTML/Javascript and C#. Это позволит вам построения сложных гибридных приложений, которые не просто отобразить только для чтения данных из модели, но также принимают пользовательский ввод в HTML и передайте его обратно в код C# для обработки или хранения.This will let you build sophisticated hybrid apps that don’t just display read-only data from the Model, but also accept user-input in the HTML and pass it back to C# code for processing or storage.

Подготовка к просмотру шаблонаRendering the template

Вызов GenerateString на шаблоне отображает HTML готового к показу в веб-представление.Calling the GenerateString on a template renders HTML ready for display in a web view. Если в шаблоне используется модель, то он должен быть предоставлен перед отрисовкой.If the template uses a model then it should be supplied prior to rendering. Схема иллюстрирует, как отрисовки работает — не, статические ресурсы разрешаются с веб-представление во время выполнения, используя предоставленный базовый каталог для поиска указанных файлов.This diagram illustrates how rendering works – not that the static resources are resolved by the web view at runtime, using the supplied base directory to find the specified files.

Блок-схема Razor

Вызов кода C# на основе шаблонаCalling C# code from the template

Обмен данными между готовый для просмотра веб-представление обратного вызова для C# выполняется путем настройки URL-адреса для веб-представление, а затем перехват запроса в C# для обработки собственного запроса без повторной загрузки веб-представление.Communication from a rendered web view calling back to C# is done by setting the URL for the web view, and then intercepting the request in C# to handle the native request without reloading the web view.

Пример можно увидеть в как обрабатывается RazorView на кнопку.An example can be seen in how RazorView’s button is handled. Кнопка имеет следующий HTML:The button has the following HTML:

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

InvokeCSharpWithFormValues Функцию Javascript считывает все значения из формы HTML и наборы location.href для веб-представление:The InvokeCSharpWithFormValues Javascript function reads all of the values from the HTML Form and sets the location.href for the web view:

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

Это пытается перейти на веб-представление для URL-адрес с настраиваемой схемой (например)This attempts to navigate the web view to a URL with a custom scheme (eg. hybrid:)hybrid:)

hybrid:UpdateLabel?textbox=SomeValue&UpdateLabel=Click

Когда собственного веб-представлении обрабатывает этот запрос навигации, у нас есть возможность перехватить его.When the native web view processes this navigation request, we have the opportunity to intercept it. В iOS это делается путем обработки события HandleShouldStartLoad UIWebView.In iOS, this is done by handling the UIWebView’s HandleShouldStartLoad event. В Android мы просто подкласс WebViewClient в форме и переопределить ShouldOverrideUrlLoading.In Android, we simply subclass the WebViewClient used in the form, and override ShouldOverrideUrlLoading.

Внутреннее содержимое этих двух перехватчики навигации по существу одинакова.The internals of these two navigation interceptors is essentially the same.

Во-первых, проверьте URL-адрес, который веб-представление пытается загрузить, и если он не начинается с настраиваемой схемой (hybrid:), разрешить для перехода в обычном режиме.First, check the URL that web view is attempting to load, and if it doesn’t start with the custom scheme (hybrid:), allow the navigation to occur as normal.

Для нестандартной схемы URL-адрес, все, что в URL-АДРЕСЕ между схему и «?»For the custom URL scheme, everything in the URL between the scheme and the “?” — Это имя метода для обработки (в данном случае «UpdateLabel»).is the method name to be handled (in this case, “UpdateLabel”). Все, что в строке запроса будут рассматриваться как параметры для вызова метода:Everything in the query string will be treated as the parameters to the method call:

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

UpdateLabel в этом образце делает минимальный объем строками в параметре текстовое поле (атрибут AS «C#, что надо» строка), а затем осуществляет обратный вызов веб-представление.UpdateLabel in this sample does a minimal amount of string manipulation on the textbox parameter (prepending “C# says” to the string), and then calls back to the web view.

После обработки URL-адрес, метод прерывает навигации, чтобы веб-представлении не пытается завершить перемещение пользовательский URL-адрес.After handling the URL, the method aborts the navigation so that the web view does not attempt to finish navigating to the custom URL.

Обработка шаблона с помощью C#Manipulating the template from C#

Взаимодействие в готовом для просмотра веб-представление HTML с помощью C# выполняется путем вызова Javascript в веб-представлении.Communication to a rendered HTML web view from C# is done by calling Javascript in the web view. В iOS, это можно сделать, вызвав EvaluateJavascript на UIWebView:On iOS, this is done by calling EvaluateJavascript on the UIWebView:

webView.EvaluateJavascript (js);

В Android, Javascript может вызываться в веб-представлении, загрузив Javascript в качестве URL-адрес с помощью "javascript:" схема URL-адреса:On Android, Javascript can be invoked in the web view by loading the Javascript as a URL using the "javascript:" URL scheme:

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

Приложение по-настоящему гибридныйMaking an app truly hybrid

Эти шаблоны не следует использовать в собственных элементов управления для каждой платформы-весь экран, заполненный одного веб-представление.These templates do not make use of native controls on each platform – the entire screen is filled with a single web view.

HTML может быть удобно для создания прототипов и отображение тех вещей, веб-содержится лучше всего подходит для таких как форматированного текста и гибкий макет.HTML can be great for prototyping, and displaying the kinds of things the web is best at such as rich text and responsive layout. Тем не менее не все задачи подходят для HTML и Javascript — прокрутке длинных списков данных, например, выполняет лучше с помощью собственных элементов управления пользовательского интерфейса, например (UITableView в iOS) или ListView на устройстве Android.However not all tasks are suited to HTML and Javascript – scrolling through long lists of data, for example, performs better using native UI controls (such as UITableView on iOS or ListView on Android).

Веб-представления в шаблоне можно легко дополнить с помощью элементов управления платформы — просто изменить MainStoryboard.storyboard в конструкторе iOS или Resources/layout/Main.axml в Android.The web views in the template can easily be augmented with platform-specific controls – simply edit the MainStoryboard.storyboard in the iOS designer or the Resources/layout/Main.axml on Android.

Пример RazorTodoRazorTodo Sample

RazorTodo репозиторий содержит две отдельные решения для отображения различий между приложения на полностью на основе HTML и приложение, которое объединяет HTML с помощью собственных элементов управления:The RazorTodo repository contains two separate solutions to show the differences between a completely HTML-driven app and an app that combines HTML with native controls:

  • RazorTodo -приложения на основе полностью HTML с помощью шаблонов Razor.RazorTodo - Completely HTML-driven app using Razor templates.
  • RazorNativeTodo — использует собственные элементы управления для iOS и Android, но отображает экран редактирования HTML и Razor.RazorNativeTodo - Uses native list view controls for iOS and Android but displays the edit screen with HTML and Razor.

Эти приложения Xamarin выполняются в iOS и Android, использование переносимых библиотек классов (PCL) для совместного использования общего кода, такие как классы базы данных и модели.These Xamarin apps run on both iOS and Android, utilizing Portable Class Libraries (PCLs) to share common code such as the database and model classes. Razor .cshtml шаблоны также можно включить в PCL, они легко используются на платформах.Razor .cshtml templates can also be included in the PCL so they’re easily shared across platforms.

Оба приложения включить общий доступ к Twitter и преобразования текста в речь API платформу машинного кода, демонстрирующий, что гибридные приложения с помощью Xamarin по-прежнему есть доступ к базовой функции из представлений на основе шаблона HTML Razor.Both sample apps incorporate Twitter sharing and text-to-speech APIs from the native platform, demonstrating that hybrid applications with Xamarin still have access to all the underlying functionality from HTML Razor template-driven views.

RazorTodo приложение использует шаблоны HTML Razor для представления списка и редактирования.The RazorTodo app uses HTML Razor templates for the list and edit views. Это означает, что мы могли выполнить сборку приложения почти полностью в общих переносимой библиотеки классов (включая базу данных и .cshtml шаблоны Razor).This means we can build the app almost completely in a shared Portable Class Library (including the database and .cshtml Razor templates). Ниже снимках экрана, приложения для iOS и Android.The screenshots below show the iOS and Android apps.

RazorTodo

RazorNativeTodo приложение с помощью шаблона HTML Razor для представления изменения, но реализует собственный список прокрутки на каждой платформе.The RazorNativeTodo app uses an HTML Razor template for the edit view, but implements a native scrolling list on each platform. Это обеспечивает ряд преимуществ, в том числе:This provides a number of benefits including:

  • Производительность — собственные элементы управления прокруткой использовать виртуализацию для обеспечения, быстро и легко выполнить прокрутку даже с очень длинных списков данных.Performance - the native scrolling controls use virtualization to ensure fast, smooth scrolling even with very long lists of data.
  • Собственная среда взаимодействия - элементы пользовательского интерфейса платформы становятся легко включить, такие как поддержка индекса Быстрая прокрутка в iOS и Android.Native experience - platform-specific UI elements are easily enabled, such as the fast-scrolling index support in iOS and Android.

Ключевым преимуществом создания гибридных приложений с помощью Xamarin — что можно начать с интерфейсом пользователя, полностью на основе HTML (например, первый пример) и затем добавить функциональные возможности платформы, при необходимости (как показано на второй пример).A key benefit of building hybrid apps with Xamarin is that you can start with a completely HTML-driven user interface (like the first sample) and then add platform-specific functionality when required (as the second sample shows). Собственный список экранов и HTML Razor изменить экраны на обоих устройствах iOS и Android, показаны ниже.The native list screens and HTML Razor edit screens on both iOS and Android are shown below.

RazorNativeTodo

СводкаSummary

В этой статье показано функции веб-представление элементов управления доступны в iOS и Android, которые упрощают создание гибридных приложений.This article has explained the features of the web view controls available on iOS and Android that facilitate building hybrid applications.

Затем это обсуждалось, подсистему шаблонов Razor и синтаксис, который может использоваться в легко создать код HTML в приложениях Xamarin с помощью. cshtml файлов шаблонов Razor.It then discussed the Razor templating engine and the syntax that can be used to generate HTML easily in Xamarin apps using .cshtml Razor template files. Он также описан в Visual Studio для Mac, шаблоны решений, которые помогут вам быстро приступить к созданию гибридные приложения с помощью Xamarin.It also described the Visual Studio for Mac solution templates that let you quickly get started building hybrid applications with Xamarin.

Наконец он появился RazorTodo примеров, в которых описывается объединение веб-представления собственные пользовательские интерфейсы и API-интерфейсы.Finally it introduced the RazorTodo samples which demonstrate how to combine web views with native user interfaces and APIs.