company_banner

Начало работы с серверными приложениями Blazor в Visual Studio for Mac

Автор оригинала: Sayed Hashimi
  • Перевод
В Visual Studio 2019 for Mac v8.4 мы добавили поддержку разработки серверных приложений Blazor. В этой статье я покажу вам, как начать создавать новые серверные приложения Blazor с помощью Visual Studio for Mac. Blazor позволяет создавать интерактивные веб-интерфейсы с использованием C# вместо JavaScript. Приложения Blazor состоят из повторно используемых компонентов веб-интерфейса, реализованных с использованием C#, HTML и CSS. Код клиента и сервера написан на C#, что позволяет вам делиться кодом и библиотеками.



Создание нового проекта Blazor


При первом запуске Visual Studio for Mac вы увидите следующее диалоговое окно:

image

Для создания нового серверного приложения Blazor нажмите «New» либо воспользуйтесь меню «File», выбрав «New Solution», как показано ниже.

image

Как только вы это сделаете, откроется диалоговое окно New Project. Чтобы создать серверное приложение Blazor, перейдите в раздел .NET Core -> App, а затем выберите Blazor Server App:

image

После нажатия «Next» будет предложено выбрать версию .NET Core. Вы можете выбрать версию по умолчанию, .NET Core 3.1 на момент публикации, или изменить ее на другую. Для приложений Blazor требуется .NET Core версии 3.0 или новее. После того, как вы нажмете «Next», вы перейдете на следующую страницу мастера настройки, где сможете дать имя своему новому проекту. Я назвал этот новый проект HelloBlazor.

image

Теперь, когда мы настроили наш новый проект, мы можем завершить создание, нажав «Create» (или же вернуться назад). После создания проекта он будет открыт в IDE. Я открыл файл Index.razor в редакторе Visual Studio for Mac, который вы можете увидеть на скриншоте ниже.

image

Теперь, когда проект создан, первое, что мы должны сделать, это запустить приложение, чтобы убедиться, что все работает, как положено. Вы можете запустить новое приложение Blazor с помощью Run > Start Debugging or Run > Start without Debugging.

image

В этом случае давайте перейдем к «Start without Debugging», потому что он запускается быстрее, чем сеанс отладки, да и в настоящее время мы не собираемся выполнять какую-либо отладку. Для запуска без отладки можно воспользоваться одноименным пунктом меню (как показано на рисунке выше) или сочетанием клавиш ⌥⌘⏎. Когда вы запустите приложение, оно будет открыто в браузере по умолчанию. Вы можете изменить запущенный браузер, используя селектор браузера на панели инструментов, показанной на следующем рисунке.

image

Давайте запустим это приложение, воспользовавшись горячими клавишами для «Start without Debugging». После того, как будет произведена сборка проекта, приложение будет открыто в браузере.

Теперь, когда наш проект запущен и работает, предлагаю немного повеселиться с его настройками.

В созданном проекте есть страница Counter, которая позволяет нажать кнопку для увеличения счета счетчика. Давайте изменим эту страницу, позволив пользователю указать значение инкремента. Мы можем сделать это, добавив поле ввода на страницу Counter и связав его с новым свойством increment, которое используется для инкремента счета. Взгляните на обновленный код Counter.razor на следующем скриншоте.

image

Если вы хотите скопировать и вставить данный код в свой проект, то ниже приведен фрагмент кода.

@page "/counter"

<h1>Counter</h1>

<input type="number" min="1" step="1" @bind-value="increment" />
<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    public int increment = 1;
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount += increment;
    }
}


На скриншоте кода, представленном выше, строки, отмеченные стрелкой, являются новыми или отредактированными строками кода. Здесь мы добавили новое поле ввода (строка 5) для пользователей, чтобы настроить инкремент, мы добавили свойство increment (строка 11) для хранения значения инкремента и, наконец, мы изменили строку 16, чтобы использовать значение инкремента вместо жестко установленного увеличения на 1.

Чтобы убедиться, что внесенные изменения работают должным образом, мы начнем сеанс отладки. Давайте установим точку останова при увеличении currentCount, строка 16. После установки этой точки останова мы начнем отладку с помощью сочетания клавиш ⌘⏎. Когда достигается точка останова, мы можем проверить, что значение для инкремента берется из поля ввода на странице Counter. На GIF ниже можно увидеть: создание точки останова, отладка приложения и проверка значения на приращение при достижении точки останова.

image

Если все идет хорошо, значит значение инкремента было взято из поля ввода на странице Counter, и приложение работает правильно. Теперь, когда мы показали, как вы можете создавать, редактировать и отлаживать серверное приложение Blazor, пришло время завершить эту статью.

В заключение


В этой статье мы разобрались, как создать новое серверное приложение Blazor и работать с ним в Visual Studio for Mac. Если у вас еще нет Visual Studio for Mac, то загрузите его, чтобы начать работу. Если вы являетесь пользователем Visual Studio for Mac, обновите Visual Studio for Mac до версии 8.4 или более поздней, чтобы получить поддержку серверных приложений Blazor. Помимо разработки серверных приложений Blazor вы также можете публиковать их в Azure App Services.

Если у вас возникли какие-либо проблемы во время работы в Visual Studio for Mac, пожалуйста, сообщите нам о них, воспользовавшись функцией Report a Problem, чтобы мы могли исправить их и, тем самым, улучшить продукт. Прежде чем я закончу, вот несколько дополнительных ресурсов для вас.

Дополнительные ресурсы


Чтобы узнать больше об изменениях в Visual Studio 2019 for Mac v8.4, ознакомьтесь с данной статьей.

Присоединяйтесь к нам 24 февраля на нашем предстоящем мероприятии Visual Studio for Mac: Refresh() для участия в сессиях глубокого погружения в разработку .NET с использованием Visual Studio for Mac, включая полный сеанс по разработке приложений Blazor.

Для получения дополнительной информации о Blazor хорошей отправной точкой является Introduction to ASP.NET Core Blazor.

Еще одним хорошим руководством по созданию серверного приложения Blazor в Visual Studio for Mac является документация Create Blazor web apps.

И обязательно подпишитесь на нас в Twitter (@VisualStudioMac). Ваши отзывы и мысли важны для нас. Кроме того, вы можете обратиться в Visual Studio Developer Community, чтобы решать ваши проблемы, предлагать функции, задавать вопросы и находить ответы. Помните: мы используем ваши отзывы для дальнейшего улучшения Visual Studio 2019 for Mac, поэтому еще раз благодарим вас от имени всей нашей команды.
Microsoft
Microsoft — мировой лидер в области ПО и ИТ-услуг

Похожие публикации

Комментарии 8

    +2
    То что на Blazor можно инкрементить переменную это понятно, есть ли какие приемущества над яваскрипт? 3Д? Можно ли юнити проект запустить? или хотябы WPF(аля silverlight)?
      0
      Ваш вопрос немного некорректно поставлен, Blazor не язык программирования и сравнивать его с JS нельзя.
      Но если сравнить к примеру, JS фреймворк и Blazor, то пока плюсы по большей части только в том, что можно использовать другой язык программирования со всеми его плюсами и минусами. К примеру, C# в данном случае дает строгую типизацию и свои плюсы в IDE.
      На данный момент в Blazor много чего нет, что есть в других фреймворках и к чему уже все привыкли.

      По поводу Unity и WPF посмотрите проект uno platform
        0
        Вот, уже интересней, platform.uno/code-samples
        Может и разовьётся как замена Silverlight, Flash
      +1
      Прочитал по диагонале, но всё же, почему «серверное приложение» если оно запускается на клиенте?
        –1
        он рендерит DOM на сервере и отдает готовый клиенту. есть еще wasm, он работает уже чисто на клиенте
          0
          При использовании модели размещения Blazor Server приложение выполняется на сервере из приложения ASP.NET Core. Обновление элементов пользовательского интерфейса, обработка событий и вызовы JavaScript обрабатываются через подключение SignalR.


          docs.microsoft.com/ru-ru/aspnet/core/blazor/hosting-models?view=aspnetcore-3.1">

          А если простым языком, то весь DOM строится и изменяется на сервере, а на клиент приходят только изменения в виде готового DOM дерева. Клиент и сервер держат соединение посредством SignalR (websocket или что поддерживается). К примеру при клике на кнопку, это событие уходит на сервер, там содержится копия DOM в которой и выполняются все действия, а далее происходит отправка изменений на клиент.
          0
          На работе пользусь VS на win10, дома — на macos. Различия в функционле просто небо и земля. На видноус есть в раза 2-3 больше функционала (начиная с добавления новых элеметнов в проект и заканчивая существующими плагинами). В маке большинство таких вещей приходится делать при помощи CLI (например ML.NET). За последний год видно, что пытаются развивать macos, но все равно писать в .net на мак все еще не так приятно как на вин.
          Насчет блейзора, то по моему это все еще бетта + нельзя использовать блейзор в старых проектах asp net core (если это не так поправьте, потому что пытался это сделать пару месяцев назад и ничего не получилось). А в целом идея очень даже не плохая: один язык на бэк + фронт.
            0
            В коментариях под одним из постов, мне пояснили, что VS под MacOS — это xamarin studio на самом деле. Отсюда и ростут ноги всех различий.

          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

          Самое читаемое