asp.net MVC结合Blazor开发学习

最新推荐文章于 2025-04-28 16:12:46 发布

落叶飞花_

最新推荐文章于 2025-04-28 16:12:46 发布

阅读量705

点赞数

分类专栏： Blazor 文章标签：前端

本文链接：https://blog.csdn.net/mingjing941018/article/details/127614922

版权

Blazor 专栏收录该内容

3 篇文章

订阅专栏

博客介绍了在.NET 6中集成Blazor框架的步骤，包括建立MVC项目，在项目启动文件Program.cs中添加Blazor框架，新建_Imports.razor文件，在界面引入blazor.js和组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1建立MVC项目（.net 6）;

2 在项目启动文件Program.cs中添加Blazor框架；

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews();
builder.Services.AddServerSideBlazor();   //Blazor相关服务

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
  app.UseExceptionHandler("/Home/Error");
}
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapBlazorHub();  //映射Blazor路由
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

3 新建_Imports.razor文件，内容如下：

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop

4 在界面中引入blazor.js

<script src="_framework/blazor.server.js"></script>

5 在界面中引入组件

@using BlazorMVC.Views.Home    //组件位置
@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <component type="typeof(Test)" render-mode="ServerPrerendered" />  
    @*组件使用方式*@
</div>