Как построить Single Page Application на ASP.NET?

Пытаюсь найти информацию в интернете, как строить одностраничные приложения на ASP.NET. А конкретно, какую технологию использовать: ASP.NET MVC или ASP.NET Web API?

Как я понимаю, в первом случаем есть два варианта:
  • использовать Razor как основной "фреймворк" и шаблонизатор (без использования сторонних JavaScript-фреймоворков) - рендерить нужный кусок страницы на сервере и отдавать клиенту по запросу готовый html (минус подхода в том, что это занимает дольше времени из-за объема передаваемых данных, и сама страница рендерится на сервере, а не на клиенте, как принято в SPA)
  • либо возвращать только json с нужными данными, а саму страницу строить каким-нибудь Knockout или Angular (зачем тогда нужны будут Views (.cshtml-страницы) и Razor)
В случае использования ASP.NET Web API:
  • сервер просто будет отдавать нужный json с данными, а дальше моя клиентская часть может принимать их и отрисовывать страницу

В этом случае, как я понимаю, будет два обособленных приложения: проект Web API и клиент написанный на чем угодно. Но это теперь ведь нарушает идеологию Web API. Сколько мне таких запросов нужно будет объявить, чтобы заставить это приложение работать. Мне кажется неправильным строить всю работу веб-приложения через такие вызовы. API - оно и на то API, чтобы давать тебе ограниченный функционал.

Помогите сделать выбор и вообще объяснить, как грамотнее построить SPA на ASP.NET. Сам склоняюсь к тому, чтобы использовать возможности Razor - делать запрос через JavaScript к нужному URL, получать готовый кусок HTML и подставлять его в нужно место на страницу.
  • Вопрос задан
  • 4784 просмотра
Решения вопроса 1
@Beltoev
Живу в своё удовольствие
В принципе, вы описали два способа построения рендеринга SPA: рендеринг на сервере и на клиенте.

У первого подхода минус в большом объеме передаваемых данных, но плюс в простой отрисовке без нагрузки на клиенте (просто заменяем часть дерева DOM той, что пришла с сервера). У второго подхода плюс в меньшем объеме передаваемых данных, но минус в большей манипуляции с деревом DOM, что может сказаться на отзывчивости страницы. Но, например, React и Angular на данный момент работают с так называемым "теневым" или "виртуальным" деревом DOM, когда дерево строится в памяти и просто заменяется, так что второй минус, в принципе, уже и не минус, если использовать эти инструменты.

Ещё есть изоморфный подход к построению SPA: при первом запросе страница рендерится на сервере и отдаётся клиенту, после чего в фоне подгружаются скрипты и дальше все отрисовывается на клиенте, сервер отдаёт только JSON.

Для ASP.NET Core есть готовые шаблоны проектов. Достаточно всего пары команд для создания, например, проекта на основе Angular:
dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
cd <project_folder>
dotnet new angular

Подробнее здесь: https://blogs.msdn.microsoft.com/webdev/2017/02/14...
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
ilyatrifonov
@ilyatrifonov Автор вопроса
В общем использовать ASP.NET MVC для SPA приложений - так себе идея. Самая идеальная связка (в окружении ASP.NET) - ASP.NET Core Web API + отдельный Angular/React проект, который умеет собираться в папку wwwroot Web API проекта для продакшена. Конкретно такой вариант реализации обсуждался вот здесь. Вкратце: создаете Web API проект (где держите запросы, которые будут отдавать или записывать нужные данные) и создаете Angular/React/ЛюбойДругойФреймворк проект, который полностью отвечает за веб-интерфейс; настраиваете прокси для запросов (чтобы дергать API методы с отдельного проекта во время разработки); учите ваш сборщик собирать проект в папку wwwroot; профит:). В итоге имеем два проекта, которые во время разработки общаются с двух разных портов, а в продакшене один проект, который открывает страничку index.html со всей логикой из wwwroot.
Ответ написан
Комментировать
swanrnd
@swanrnd
Издатель HTML5 игр
У нас так:
1) получаем страницу html
2) она грузит JS скрипты
3) они обращаются к ashx - которые возвращают json
4) из json мы генерируем код HTML, на клиенте.

Как вариант генерировать код HTML на сервере.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы