BlazorMVC 2.1.1

Blazor MVC

将 C# MVC 功能添加到任何 Blazor 应用程序

Blazor MVC 是一个 C# 项目，它使开发者能够在 Blazor 应用程序中使用 MVC 框架。有此框架经验的开发者可以拥有熟悉的结构，并快速迁移到 Blazor。

功能

• 与 .NET 3、.NET 5 和 .NET 6 兼容
• 与 Blazor 服务器应用程序和 Blazor WebAssembly 两种应用程序兼容
• 实现 Blazor MVC 的示例项目
• 通过扩展预构建类为您的每个视图创建控制器和模型

安装

本节可适用于 Blazor 网页服务器或 WebAssembly 应用程序。阅读本节后，请导航到所需的项目类型，查看不同的实现方式。

注意：您可以在以下地址找到针对每个 .NET 版本和每种类型 Blazor 项目（Blazor 服务器 或 Blazor WebAssembly）的工作示例

• 将 BlazorMVC 添加到项目的第一步是从 (https://github.com/jeffreypalermo/blazormvc) 下载 BlazorMvc 项目。

• 接下来，使用 Blazor 框架创建一个 新项目 或打开一个 现有项目

• 使用文件资源管理器导航到所需解决方案的根目录，并将下载的项目中的项目文件夹 BlazorMvc 复制到所需解决方案的根目录

注意：您可以在下载的 BlazorMvc 解决方案中添加新的项目。

• 接下来，在 Visual Studio 中打开项目

• 在解决方案上右击，将鼠标悬停在“添加”上，然后选择“现有项目....

  • 导航到当前项目的文件夹，并选择复制的 BlazorMvc 项目的 .csproj 文件

• 一旦 BlazorMvc 已添加到解决方案中，下次将该项目作为构建依赖项添加到您希望的项目中。

  • 在 Blazor 项目上右击，将鼠标悬停在“构建依赖项”上，然后选择“项目依赖项”

    • 选择 BlazorMvc 并点击确定

• 然后您需要通过在 Visual Studios 中双击您的项目来编辑项目文件。

• 在新打开的 .csproj 文件中，将以下代码复制粘贴到 <Project> 标签内。

 
    <ItemGroup> 
        <ProjectReference Include="..\BlazorMvc\BlazorMvc.csproj" /> 
    </ItemGroup>  

以上是开始在您的 Blazor 应用中使用 BlazorMvc 所需的步骤。以下是为不同类型的应用程序运行所需的对应步骤。

注意：要在组件中使用 BlazorMvc，请确保您 using Palermo.BlazorMvc;

Blazor WebAssembly 应用程序

对于 Blazor WebAssembly 应用程序，您需要编辑几个文件，以允许 BlazorMvc 库适当实现

• Program.cs

using Microsoft.Extensions.Logging.Abstractions; 
using Palermo.BlazorMvc; 
  
var builder = WebAssemblyHostBuilder.CreateDefault(args); 
builder.Services.AddScoped<IUiBus>(provider => new MvcBus(NullLogger<MvcBus>.Instance)); 

// AppController is the class that we are creating next. You can use any naming convention. You will need to add the using statement to gain access to this class within this file 
builder.RootComponents.Add<AppController>("#app"); 

• AppController.cs - 创建一个新类

using Microsoft.AspNetCore.Components.Rendering; 
using Palermo.BlazorMvc; 

// Change namespace to match yours 
namespace Sample.WebAssemblyNet6 
{ 
    // AppView is the default app view. If you created a new Blazor application this class will be names App. We renamed it to AppView 
    public class AppController : ControllerComponentBase<AppView> 
    { 
        protected override void BuildRenderTree(RenderTreeBuilder builder) 
        { 
            base.BuildRenderTree(builder); 
        } 
    } 
} 

• AppView.razor- 这是重命名的 App.razor 文件

@inherits Palermo.BlazorMvc.ViewComponentBase 

<Router AppAssembly="@typeof(Program).Assembly"> 
    <Found Context="routeData"> 
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayoutController)"> 
        </RouteView> 
    </Found> 
    <NotFound> 
        <LayoutView Layout="@typeof(MainLayoutController)"> 
            <p>Sorry, there's nothing at this address.</p> 
        </LayoutView> 
    </NotFound> 
</Router> 

Blazor 服务器应用程序

• Program.cs

using Microsoft.Extensions.Logging.Abstractions; 
using Palermo.BlazorMvc; 

var builder = WebApplication.CreateBuilder(args); 
builder.Services.AddScoped<IUiBus>(provider => new MvcBus(NullLogger<MvcBus>.Instance)); 

// Add services to the container. 
builder.Services.AddRazorPages(); 
builder.Services.AddServerSideBlazor(); 
builder.Services.AddScoped<AppController>(); 
builder.Services.AddScoped<WeatherForecastService>(); 

• AppController.cs - 创建一个新类

using Microsoft.AspNetCore.Components.Rendering; 
using Palermo.BlazorMvc; 

// Change namespace to match yours 
namespace Sample.BlazorServerNet6 
{ 
    // AppView is the default app view. If you created a new Blazor application this class will be names App. We renamed it to AppView 
    public class AppController : ControllerComponentBase<AppView> 
    { 
        protected override void BuildRenderTree(RenderTreeBuilder builder) 
        { 
            base.BuildRenderTree(builder); 
        } 
    } 
} 

• AppView.razor- 这是重命名的 App.razor 文件

@inherits Palermo.BlazorMvc.ViewComponentBase 

<Router AppAssembly="@typeof(Program).Assembly"> 
    <Found Context="routeData"> 
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayoutController)"> 
        </RouteView> 
    </Found> 
    <NotFound> 
        <LayoutView Layout="@typeof(MainLayoutController)"> 
            <p>Sorry, there's nothing at this address.</p> 
        </LayoutView> 
    </NotFound> 
</Router> 

• _Host.cshtml

<component type="typeof(AppController)" render-mode="ServerPrerendered" />