本示例是AntDesign Blazor的入门示例，在学习的同时分享出来，以供新手参考。

1. 开发环境

  • VS2022 17.8.2
  • .NET8
  • AntDesign 0.16.2

2. 学习目标

  • 创建新项目
  • 安装AntDesign组件包及使用方法
  • 添加按钮测试组件

3. 演练步骤

  1. 打开VS2022，新建Blazor Web App，命名AntDesignDemo

  2. 双击AntDesignDemo工程文件，添加AntDesign，或者使用nuget工具搜索安装

<Project Sdk="Microsoft.NET.Sdk.Web">

    <PropertyGroup>

        <TargetFramework>net8.0</TargetFramework>

        <Nullable>enable</Nullable>

        <ImplicitUsings>enable</ImplicitUsings>

    </PropertyGroup>

    <ItemGroup>

        <!--这里添加AntDesign-->

        <PackageReference Include="AntDesign" Version="0.16.2" />

    </ItemGroup>

</Project>
  1. 双击Components/App.razor文件，添加AntDesign的css和js
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <base href="/" />

    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />

    <!--这里添加AntDesign样式-->

    <link rel="stylesheet" href="_content/AntDesign/css/ant-design-blazor.css" />

    <link rel="stylesheet" href="app.css" />

    <link rel="stylesheet" href="AntDesignDemo.styles.css" />

    <link rel="icon" type="image/png" href="favicon.png" />

    <HeadOutlet @rendermode="@InteractiveServer" />

</head>

<body>

    <Routes @rendermode="@InteractiveServer" />

    <!--这里添加AntDesign脚本-->

    <script src="_content/AntDesign/js/ant-design-blazor.js"></script>

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

</body>

</html>
  1. 双击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
  1. 双击Components/Routes.razor文件，添加AntContainer
<Router AppAssembly="@typeof(Program).Assembly">

    <Found Context="routeData">

        <RouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.MainLayout)" />

        <FocusOnNavigate RouteData="@routeData" Selector="h1" />

    </Found>

</Router>

<!--这里添加AntDesign容器，不添加Modal、提示等无法弹出-->

<AntContainer />
  1. 双击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.MapRazorComponents<App>()

   .AddInteractiveServerRenderMode();

app.Run();
  1. 最后双击Components/Pages/Home.razor文件，添加AntDesign的按钮组件进行测试
@page "/"

@*//这里注入MessageService*@

@inject IMessageService _message;

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<Button Type="primary" OnClick="OnHelloClick">Hello World!</Button>

@code {

    //按钮单击方法

    private void OnHelloClick()

    {

        //提示信息

        _message.Info("Hello AntDesign Blazor!");

    }

}
  1. 运行App查看效果，如下图

AntDesignBlazor示例——新建项目的更多相关文章

  1. angular开发环境搭建及新建项目

    最近一个星期准备学习一下angular前端框架,因为之前在学习abp框架的时候,都要求前端要掌握angular,所以不得不回来恶补一下了,学习的过程有时间的话会记录在这里,方便以后复习. 闲言少叙,下 ...

  2. EgretPaper学习笔记一 （安装环境，新建项目）

    参考: 官方Egret3D教程 白鹭引擎5.3.0正式发布,支持3D游戏开发 一 下载安装EgretPaper Egret3D 编辑器的开发代号为“Paper”,于2018年9月份开始小规模内测,并在 ...

  3. Quick-Cocos2d-x 新建项目

    开发工具准备就绪以后,下面我们就可以开始创建我们的项目了. 首先启动 Quick 下的 player3,在这儿的示例标签下你可以看到很多Quick自带的示例,对于初学者来说,看看这些示例的使用方法会对 ...

  4. idea新建项目打包 ，运行jar，并放入maven仓库

    1.新建项目(转自:http://www.cnblogs.com/wql025/p/5215570.html) 创建一个新Maven项目 new 一个project 不选择任何Maven模板 起个Gr ...

  5. 2.1.新建项目及项目目录和预览uni项目

    目录结构 一个uni-app工程,默认包含如下目录及文件 static目录 使用注意 编译到任意平台时,static 目录下除不满足条件编译的文件,会直接复制到最终的打包目录,不会打包编译.非 sta ...

  6. 每次新建项目出现appcompat_v7 解决方法

    ADT升级版本后每次新建项目出现appcompat_v7 , 解决方案如下 问题生成:

  7. MVC3 新建项目

    一.安装工具 二.新建项目 step1:新建MVC3项目 打开新建项目窗口,在“已安装的模板”列表中选择“Web”,在右侧应用程序模板列表中选择“ASP.NET MVC3 Web应用程序”,修改项目名 ...

  8. vue新建项目

    一直都被如何用vue.js新建一个项目的问题困扰着,经过好久的实践,终于搞清楚如何用vue新建项目了: 1.官网对于vue-cli介绍: Vue.js provides an official CLI ...

  9. VS2012新建项目出错：未找到与约束ContractName Microsoft.VisualStudio.Text.ITextDocumentFactoryService

    刚刚重新做的系统,第一次打开vs2012新建项目时出现错误提示 通过查找解决办法发现方法有两种: 1:卸载两个windows更新补丁(KB2833957和KB2840642) 2:安装一个window ...

  10. MyEclipse/Eclipse新建项目并且部署到服务器（tomcat）下

    1新建项目:file/new/web project/项目名/ok 2部署到tomcat下:tomcat右单机>>add/remove/选择项目/添加/完成(tomcat下有新建的项目) ...

随机推荐

  1. redis数据持久化之RDB和AOF

    前言 redis虽然是内存缓存程序,但是可以将内存中的数据保存到硬盘上,从而实现数据保存.目前有两种redis数据持久化方式,分别是RDB和AOF. RDB模式 RDB之简介 RDB(redis da ...

  2. Linux服务器的性能监控与分析

    通过vmstat分析性能  如上图所示,我们在命令vmstat后面添加了两个参数,1表示间隔一秒获取一次,10表示总共获取10次 我们一列一列数据来看: r:代表目前实际运行的指令队列,很高表示CPU ...

  3. 为什么NoSQL不支持事务

    为什么NoSQL不支持事务 1. 背景 看书<Neo4j权威指南>的时候,发现个问题:日常的NoSQL都不支持事务(ACID). 2. 问题 事务对数据的存储过程是有利的,既然事情是有利的 ...

  4. virtualbox克隆虚拟机

    1.选择要克隆的虚拟机 2.设置克隆机的名称和存放位置 3.选择克隆类型 4.克隆结果

  5. 数据可视化【原创】vue+arcgis+threejs 实现海量建筑物房屋渲染，性能优化

    本文适合对vue,arcgis4.x,threejs,ES6较熟悉的人群食用. 先报备一下版本号 "vue": "^2.6.11" "@arcgis/ ...

  6. (2023.7.15)软件加密与解密-番外1-PWN2REVERSE[XDbg]

    /提示:如果你看到了这行文字,那说明您的预览器不支持内嵌 CSS 代码,请使用 VSCode 阅读本 Markdown 文件/ 每天一个技术点 (2023.7.15)软件加密与解密-番外1-PWN2R ...

  7. jdk17下netty导致堆内存疯涨原因排查

    背景: 介绍 天网风控灵玑系统是基于内存计算实现的高吞吐低延迟在线计算服务,提供滑动或滚动窗口内的count.distinctCout.max.min.avg.sum.std及区间分布类的在线统计计算 ...

  8. Vue3中的几个坑，你都见过吗？

    Vue3 目前已经趋于稳定,不少代码库都已经开始使用它,很多项目未来也必然要迁移至Vue3.本文记录我在使用Vue3时遇到的一些问题,希望能为其他开发者提供帮助. 1. 使用reactive封装基础数 ...

  9. LogicFlow 是一款流程图编辑框架

    简体中文 | English LogicFlow 是一款流程图编辑框架,提供了一系列流程图交互.编辑所必需的功能和简单灵活的节点自定义.插件等拓展机制,方便我们快速在业务系统内满足类流程图的需求. 特 ...

  10. [ABC310D] Peaceful Teams 题解

    Peaceful Teams 题目大意 将 \(n\) 个人分成 \(T\) 组,要求每组不能包含敌对的人,问有多少种分法. 思路分析 注意到 \(n,T\) 均很小,考虑爆搜. 注意到直接枚举会枚举 ...