Я дошел до сути этого сейчас. После всех проб и ошибок, описанных в моем вопросе, решение оказалось на удивление небольшим количеством кода.
Пример с серверной блейзором и MVC в разных проектах в одном решении
Ответ ниже предполагает, что у вас есть работающий серверный проект Blazor в вашем решении и вы пытаетесь использовать компоненты из этого проекта в отдельном проекте MVC в этом же решении. Я сделал это в VS2019, используя Core 3 Preview 5.
См. Внизу страницы или ссылку на пример MVC и Blazor в том же проекте.
Изменения в файле .csproj проекта MVC
Вам просто нужно добавить ссылку на ваш блазорский проект:
<ProjectReference Include="..\MyClient.Web.Blazor\MyClient.Web.Blazor.csproj" />
Изменения в файле Views \ Shared \ _Layout.cshtml проекта MVC
Добавить ссылку на скрипт Blazor JS
<script src="_framework/blazor.server.js"></script>
(на самом деле его нет в вашей локальной файловой системе, Blazor автоматически сортирует его к тому времени, когда приложение попадает в браузер)
Изменения в Startup.cs
проекта MVC
Вот где настоящая работа сделана
В методе ConfigureServices добавьте:
services.AddServerSideBlazor();
Затем я переключил свою конфигурацию на конфигурацию Core 3 нового стиля (поэтому больше не использовал метод AddMvc):
services.AddControllersWithViews()
.AddNewtonsoftJson(options =>
{
options.SerializerSettings.ContractResolver = new DefaultContractResolver();
});
services.AddRazorPages();
И затем изменение, которое, наконец, заставило меня работать, состояло в том, чтобы переключиться на маршрутизацию конечной точки Core 3 в методе Configure(IApplicationBuilder app, IWebHostEnvironment env):
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
endpoints.MapRazorPages();
endpoints.MapBlazorHub();
});
//app.UseMvc(routes =>
//{
// routes.MapRoute(
// name: "MyArea",
// template: "{area:exists}/{controller=Home}/{action=Index}/{id?}");
// routes.MapRoute(
// name: "default",
// template: "{controller=Home}/{action=Index}/{id?}");
//});
Закомментированный код показывает маршрутизацию старого стиля, которую я использовал. Я думаю, что из-за отсутствия endpoints.MapBlazorHub(); моя проблема с нажатием кнопки
Изменения в проекте Blazor
Никаких изменений в проекте Blazor не потребовалось, чтобы это заработало.
Как поместить компонент Blazor на страницу MVC
После того, как вы выполнили все вышеперечисленное, все, что нужно для отображения компонента на странице MVC, - это добавление
@(await Html.RenderComponentAsync<YourComponent>())
Это должно работать как на странице MVC, так и на странице Razor.
Известная проблема маршрутизации в Core 3 Preview 5
Выше были внесены изменения, чтобы все заработало. Существует известная проблема с Core 5 , когда после перехода на страницу MVC или Razor с компонентом Blazor маршрутизация больше не будет работать до тех пор, пока страница не будет обновлена - URL-адреса изменятся в браузере. адресная строка, но навигации не будет.
Сейчас я работаю в Preview 6 и могу подтвердить, что проблема с маршрутизацией теперь исправлена в Preview 6 и далее.
Пример с серверным блейзором и MVC в одном проекте
У Криса Сэйнти есть пример серверных компонентов Blazor, добавленных в существующий проект MVC здесь: Использование компонентов Blazor в существующем приложении MVC ( источник здесь )