Razor templates, views and angular.js

Question

TL; DR

Каковы наилучшие практики при использовании просмотров .NET Razor и AngularJS?

Контекст

Мы разрабатываем общедоступный веб-сайт (не интранет), используя mvc4 с бритвой, и мы не были очень хорошо знакомы с клиентским скриптом, поэтому мы начали с того, что мы знали: JQuery. Но теперь все усложняется, и мы хотели бы переключиться на AngularJS.

В части .NET мы используем шаблоны Razor и UIHintAttribute (плюс некоторые пользовательские) для рендеринга правильного html-элемента управления. Мы также добавляем пользовательские атрибуты html, чтобы предоставить дополнительную информацию части jQuery (например, title для всплывающей подсказки ....)

Итак, мы уже используем декларативный способ настройки поведения пользовательского интерфейса, поэтому AngularJS кажется хорошим вариантом ,

Вопросы

Поскольку мы уже модели определены на стороне сервера, а с AngularJS также использует модель, не будет заставлять нас дублировать код?

Как мы имеем дело с функцией привязки данных, так как мы уже делаем некоторую привязывающую сторону сервера (в представлениях). Должны ли мы сделать полностью асинхронное приложение, заставляя AJAX звонить из AngularJS для загрузки данных или мы можем смешать оба?

Что-нибудь еще, о чем мы должны знать при попытке использовать обе эти технологии?

Я провел некоторое исследование в Google, но я не могу найти подробные способы смешивания просмотров и шаблонов Razor с помощью AngularJS ... Возможно, это просто нехорошо делать?

Answer 1

Мы рассматривали эту проблему в течение нескольких месяцев при работе с MVC плюс еще одна инфраструктура JavaScript (нокаут). В конечном счете, если вы собираетесь использовать клиентскую среду MV * для визуализации вашего пользовательского интерфейса, вы обнаружите, что в большинстве случаев Ritch Ritch будет лучшим выбором.

Большинство основных фреймворков MV * JavaScript, включая AngularJS, предполагают, что вы будете поддерживать состояние пользовательского интерфейса и визуализировать свой пользовательский интерфейс на основе моделей JavaScript или моделей. Попытка смешивания в рендеринге на стороне сервера просто не будет работать очень хорошо.

Это не означает, что для MVC не нужно использовать, когда речь идет о разработке углового приложения. Вы все еще можете воспользоваться некоторыми замечательными функциями, такими как ASP.NET Bundling and Minification. И иногда очень хорошо встраивать JSON прямо в страницу с использованием вида Razor или частичного, а не для создания дополнительного вызова AJAX.

Что касается моделей, вы можете взглянуть на Breeze.js. Это библиотека JavaScript для доступа к данным, которая отлично подходит для ASP.NET на стороне сервера для обмена метаданными модели.

Answer 2

Мы написали собственный механизм привязки данных, который синхронизирует модель angular.js с моделью вида на стороне сервера. Модель javascript генерируется из сериализации JSON модели на стороне сервера, чтобы избежать дублирования кода, о котором вы говорили.

Мы используем SignalR для обновления модели представления клиента с сервера.

Изменения на стороне сервера свойств модели представления C# отправляются клиенту в виде пакета, содержащего путь к свойству, например. Персоны [42] .Address.City и само значение, например. Нью-Йорк. Модель представления наследует базовый класс, который заботится о генерации пути собственности, поэтому фактическая модель представления выглядит довольно чистой, и мы можем сосредоточиться на бизнес-логике.

Изменения на стороне клиента свойств модели просмотра javascript отправляются на сервер таким же образом. Чтобы поймать события изменений, мы инкапсулируем все поля исходной модели javascript в свойствах get/set, когда сеттер отправляет пакет обновления на сервер.

Аналогичным способом можно вызвать методы на стороне сервера. Все объекты в модели просмотра имеют функцию invokeMethod, которая может быть использована следующим образом: Продукты [42] .Manufacturer.invokeMethod ('SendEmail', 'mailsubject', 'mailbody'). Это отправит пакет на сервер, содержащий путь метода Продукты [42] .Manufacturer.SendEmail и аргументы в виде массива ['mailsubject', 'mailbody'].

В заключение, вид html (вид) привязывается к модели представления на стороне сервера, где другие системы, такие как обычные виды Razor, могут работать на одних и тех же объектах.

Исходный код можно найти здесь: SharpAngie.