网站关键词多少个,网站文章怎么做分享qq,深圳哪家公司做网站好,广州信息流推广公司排名本示例是AntDesign Blazor的入门示例#xff0c;在学习的同时分享出来#xff0c;以供新手参考。
示例代码仓库#xff1a;https://gitee.com/known/AntDesignDemo
1. 开发环境
VS2022 17.8.2.NET8AntDesign 0.16.2
2. 学习目标
创建新项目安装AntDesign组件包及使用方…本示例是AntDesign Blazor的入门示例在学习的同时分享出来以供新手参考。
示例代码仓库https://gitee.com/known/AntDesignDemo
1. 开发环境
VS2022 17.8.2.NET8AntDesign 0.16.2
2. 学习目标
创建新项目安装AntDesign组件包及使用方法添加按钮测试组件
3. 演练步骤 打开VS2022新建Blazor Web App命名AntDesignDemo 双击AntDesignDemo工程文件添加AntDesign或者使用nuget工具搜索安装
Project SdkMicrosoft.NET.Sdk.WebPropertyGroupTargetFrameworknet8.0/TargetFrameworkNullableenable/NullableImplicitUsingsenable/ImplicitUsings/PropertyGroupItemGroup!--这里添加AntDesign--PackageReference IncludeAntDesign Version0.16.2 //ItemGroup
/Project双击Components/App.razor文件添加AntDesign的css和js
!DOCTYPE html
html langen
headmeta charsetutf-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /base href/ /link relstylesheet hrefbootstrap/bootstrap.min.css /!--这里添加AntDesign样式--link relstylesheet href_content/AntDesign/css/ant-design-blazor.css /link relstylesheet hrefapp.css /link relstylesheet hrefAntDesignDemo.styles.css /link relicon typeimage/png hreffavicon.png /HeadOutlet rendermodeInteractiveServer /
/head
bodyRoutes rendermodeInteractiveServer /!--这里添加AntDesign脚本--script src_content/AntDesign/js/ant-design-blazor.js/scriptscript src_framework/blazor.web.js/script
/body
/html双击Components/_Imports.razor文件在最后一行添加命名空间
using System.Net.Http
using System.Net.Http.Json
using Microsoft.AspNetCore.Components.Forms
using Microsoft.AspNetCore.Components.Routing
using Microsoft.AspNetCore.Components.Web
using static Microsoft.AspNetCore.Components.Web.RenderMode
using Microsoft.AspNetCore.Components.Web.Virtualization
using Microsoft.JSInterop
using AntDesignDemo
using AntDesignDemo.Components
//这里添加命名空间
using AntDesign双击Components/Routes.razor文件添加AntContainer
Router AppAssemblytypeof(Program).AssemblyFound ContextrouteDataRouteView RouteDatarouteData DefaultLayouttypeof(Layout.MainLayout) /FocusOnNavigate RouteDatarouteData Selectorh1 //Found
/Router
!--这里添加AntDesign容器不添加Modal、提示等无法弹出--
AntContainer /双击Program.cs文件注册AntDesign
using AntDesignDemo.Components;var builder WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddRazorComponents().AddInteractiveServerComponents();
//这里注册AntDesign
builder.Services.AddAntDesign();var app builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{app.UseExceptionHandler(/Error, createScopeForErrors: true);// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseAntiforgery();
app.MapRazorComponentsApp().AddInteractiveServerRenderMode();
app.Run();最后双击Components/Pages/Home.razor文件添加AntDesign的按钮组件进行测试
page /
*//这里注入MessageService*
inject IMessageService _message;PageTitleHome/PageTitle
h1Hello, world!/h1Welcome to your new app.Button Typeprimary OnClickOnHelloClickHello World!/Buttoncode {//按钮单击方法private void OnHelloClick(){//提示信息_message.Info(Hello AntDesign Blazor!);}
}运行App查看效果如下图 4. 视频
