В Visual Studio 2019 for Mac v8.4 мы добавили поддержку разработки серверных приложений Blazor. В этой статье я покажу вам, как начать создавать новые серверные приложения Blazor с помощью Visual Studio for Mac. Blazor позволяет создавать интерактивные веб-интерфейсы с использованием C# вместо JavaScript. Приложения Blazor состоят из повторно используемых компонентов веб-интерфейса, реализованных с использованием C#, HTML и CSS. Код клиента и сервера написан на C#, что позволяет вам делиться кодом и библиотеками.
![](https://habrastorage.org/r/w780q1/webt/it/v1/lx/itv1lx0attgqlbkwgih9p8w3xle.jpeg)
При первом запуске Visual Studio for Mac вы увидите следующее диалоговое окно:
![image](https://habrastorage.org/r/w1560/webt/2o/3e/j8/2o3ej8dpbttag8qag5pw7jz8aco.png)
Для создания нового серверного приложения Blazor нажмите «New» либо воспользуйтесь меню «File», выбрав «New Solution», как показано ниже.
![image](https://habrastorage.org/r/w1560/webt/dd/8w/x8/dd8wx8dj651m_xdjcnjtsoxjtzo.png)
Как только вы это сделаете, откроется диалоговое окно New Project. Чтобы создать серверное приложение Blazor, перейдите в раздел .NET Core -> App, а затем выберите Blazor Server App:
![image](https://habrastorage.org/r/w1560/webt/hz/r9/bg/hzr9bggp1npfyl9uulclww-oqkg.png)
После нажатия «Next» будет предложено выбрать версию .NET Core. Вы можете выбрать версию по умолчанию, .NET Core 3.1 на момент публикации, или изменить ее на другую. Для приложений Blazor требуется .NET Core версии 3.0 или новее. После того, как вы нажмете «Next», вы перейдете на следующую страницу мастера настройки, где сможете дать имя своему новому проекту. Я назвал этот новый проект HelloBlazor.
![image](https://habrastorage.org/r/w1560/webt/v3/mt/ej/v3mtejw8ixafmgbl7h48j9dziv4.png)
Теперь, когда мы настроили наш новый проект, мы можем завершить создание, нажав «Create» (или же вернуться назад). После создания проекта он будет открыт в IDE. Я открыл файл Index.razor в редакторе Visual Studio for Mac, который вы можете увидеть на скриншоте ниже.
![image](https://habrastorage.org/r/w1560/webt/jr/k6/ft/jrk6ftuebcwxogiy2mmlm_46bks.png)
Теперь, когда проект создан, первое, что мы должны сделать, это запустить приложение, чтобы убедиться, что все работает, как положено. Вы можете запустить новое приложение Blazor с помощью Run > Start Debugging or Run > Start without Debugging.
![image](https://habrastorage.org/r/w1560/webt/ax/2f/cs/ax2fcsefjarx3fbbgvtududblgu.png)
В этом случае давайте перейдем к «Start without Debugging», потому что он запускается быстрее, чем сеанс отладки, да и в настоящее время мы не собираемся выполнять какую-либо отладку. Для запуска без отладки можно воспользоваться одноименным пунктом меню (как показано на рисунке выше) или сочетанием клавиш ⌥⌘⏎. Когда вы запустите приложение, оно будет открыто в браузере по умолчанию. Вы можете изменить запущенный браузер, используя селектор браузера на панели инструментов, показанной на следующем рисунке.
![image](https://habrastorage.org/r/w1560/webt/fh/ki/of/fhkioferh6pzlqozrtwig7bu33c.png)
Давайте запустим это приложение, воспользовавшись горячими клавишами для «Start without Debugging». После того, как будет произведена сборка проекта, приложение будет открыто в браузере.
Теперь, когда наш проект запущен и работает, предлагаю немного повеселиться с его настройками.
В созданном проекте есть страница Counter, которая позволяет нажать кнопку для увеличения счета счетчика. Давайте изменим эту страницу, позволив пользователю указать значение инкремента. Мы можем сделать это, добавив поле ввода на страницу Counter и связав его с новым свойством increment, которое используется для инкремента счета. Взгляните на обновленный код Counter.razor на следующем скриншоте.
![image](https://habrastorage.org/r/w1560/webt/km/dr/eb/kmdreb5twkokpmcsmbcekauxfy0.png)
Если вы хотите скопировать и вставить данный код в свой проект, то ниже приведен фрагмент кода.
На скриншоте кода, представленном выше, строки, отмеченные стрелкой, являются новыми или отредактированными строками кода. Здесь мы добавили новое поле ввода (строка 5) для пользователей, чтобы настроить инкремент, мы добавили свойство increment (строка 11) для хранения значения инкремента и, наконец, мы изменили строку 16, чтобы использовать значение инкремента вместо жестко установленного увеличения на 1.
Чтобы убедиться, что внесенные изменения работают должным образом, мы начнем сеанс отладки. Давайте установим точку останова при увеличении currentCount, строка 16. После установки этой точки останова мы начнем отладку с помощью сочетания клавиш ⌘⏎. Когда достигается точка останова, мы можем проверить, что значение для инкремента берется из поля ввода на странице Counter. На GIF ниже можно увидеть: создание точки останова, отладка приложения и проверка значения на приращение при достижении точки останова.
![image](https://habrastorage.org/webt/xz/gg/vv/xzggvv03lwkqz7snnbhfgj4atrq.gif)
Если все идет хорошо, значит значение инкремента было взято из поля ввода на странице 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, поэтому еще раз благодарим вас от имени всей нашей команды.
![](https://habrastorage.org/webt/it/v1/lx/itv1lx0attgqlbkwgih9p8w3xle.jpeg)
Создание нового проекта Blazor
При первом запуске Visual Studio for Mac вы увидите следующее диалоговое окно:
![image](https://habrastorage.org/webt/2o/3e/j8/2o3ej8dpbttag8qag5pw7jz8aco.png)
Для создания нового серверного приложения Blazor нажмите «New» либо воспользуйтесь меню «File», выбрав «New Solution», как показано ниже.
![image](https://habrastorage.org/webt/dd/8w/x8/dd8wx8dj651m_xdjcnjtsoxjtzo.png)
Как только вы это сделаете, откроется диалоговое окно New Project. Чтобы создать серверное приложение Blazor, перейдите в раздел .NET Core -> App, а затем выберите Blazor Server App:
![image](https://habrastorage.org/webt/hz/r9/bg/hzr9bggp1npfyl9uulclww-oqkg.png)
После нажатия «Next» будет предложено выбрать версию .NET Core. Вы можете выбрать версию по умолчанию, .NET Core 3.1 на момент публикации, или изменить ее на другую. Для приложений Blazor требуется .NET Core версии 3.0 или новее. После того, как вы нажмете «Next», вы перейдете на следующую страницу мастера настройки, где сможете дать имя своему новому проекту. Я назвал этот новый проект HelloBlazor.
![image](https://habrastorage.org/webt/v3/mt/ej/v3mtejw8ixafmgbl7h48j9dziv4.png)
Теперь, когда мы настроили наш новый проект, мы можем завершить создание, нажав «Create» (или же вернуться назад). После создания проекта он будет открыт в IDE. Я открыл файл Index.razor в редакторе Visual Studio for Mac, который вы можете увидеть на скриншоте ниже.
![image](https://habrastorage.org/webt/jr/k6/ft/jrk6ftuebcwxogiy2mmlm_46bks.png)
Теперь, когда проект создан, первое, что мы должны сделать, это запустить приложение, чтобы убедиться, что все работает, как положено. Вы можете запустить новое приложение Blazor с помощью Run > Start Debugging or Run > Start without Debugging.
![image](https://habrastorage.org/webt/ax/2f/cs/ax2fcsefjarx3fbbgvtududblgu.png)
В этом случае давайте перейдем к «Start without Debugging», потому что он запускается быстрее, чем сеанс отладки, да и в настоящее время мы не собираемся выполнять какую-либо отладку. Для запуска без отладки можно воспользоваться одноименным пунктом меню (как показано на рисунке выше) или сочетанием клавиш ⌥⌘⏎. Когда вы запустите приложение, оно будет открыто в браузере по умолчанию. Вы можете изменить запущенный браузер, используя селектор браузера на панели инструментов, показанной на следующем рисунке.
![image](https://habrastorage.org/webt/fh/ki/of/fhkioferh6pzlqozrtwig7bu33c.png)
Давайте запустим это приложение, воспользовавшись горячими клавишами для «Start without Debugging». После того, как будет произведена сборка проекта, приложение будет открыто в браузере.
Теперь, когда наш проект запущен и работает, предлагаю немного повеселиться с его настройками.
В созданном проекте есть страница Counter, которая позволяет нажать кнопку для увеличения счета счетчика. Давайте изменим эту страницу, позволив пользователю указать значение инкремента. Мы можем сделать это, добавив поле ввода на страницу Counter и связав его с новым свойством increment, которое используется для инкремента счета. Взгляните на обновленный код Counter.razor на следующем скриншоте.
![image](https://habrastorage.org/webt/km/dr/eb/kmdreb5twkokpmcsmbcekauxfy0.png)
Если вы хотите скопировать и вставить данный код в свой проект, то ниже приведен фрагмент кода.
@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](https://habrastorage.org/webt/xz/gg/vv/xzggvv03lwkqz7snnbhfgj4atrq.gif)
Если все идет хорошо, значит значение инкремента было взято из поля ввода на странице 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, поэтому еще раз благодарим вас от имени всей нашей команды.