本示例是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. Node.js安装中出现的问题及其解决方案

    Node.js安装与配置流程,请参考 1.npm -v测试时出现警告 更好的选择是安装一个更完善的版本 问题出现的原因 node更新后是最新版 但是npm的版本没有相应的更新存在版本滞后导致问题出现 ...

  2. 【技术积累】Linux中的命令行【理论篇】【五】

    arpd命令 命令介绍 arpd命令是Linux系统中的一个网络工具,用于管理和操作ARP(地址解析协议)缓存.ARP协议用于将IP地址映射到MAC地址,以便在局域网中进行通信. 命令说明 arpd命 ...

  3. 配置MySQL主从复制（一主一从）

    前言 MySQL主从复制简介 MySQL主从复制的目的是实现数据库冗余备份,将master数据库的数据定时同步到slave库中,一旦master数据库宕机,可以将Web应用数据库配置快速切换到slav ...

  4. Sealos 国内集群正式上线，可一键运行 LLama2 中文版大模型！

    2023 年 7 月 19 日,MetaAI 宣布开源旗下的 LLama2 大模型,Meta 首席科学家.图灵奖得主 Yann LeCun 在推特上表示 Meta 此举可能将改变大模型行业的竞争格局. ...

  5. ATtiny88初体验（一）：点灯

    ATtiny88初体验(一):点灯 最近逛淘宝时,发现一块ATtiny88核心板(MH-ET LIVE Tiny88)用完红包后只剩4块钱了,果断下单,准备好好把玩一番. MH-ET LIVE Tin ...

  6. 3.你不知道的go语言控制语句

    目录 本篇前瞻 Leetcode习题9 题目描述 题目分析 代码编写 知识点归纳 控制结构 顺序结构(Sequence) 声明和赋值 算术运算符 位运算符 逻辑运算 分支结构 if 语句 switch ...

  7. Vue【原创】下划线动态效果按钮，一般按钮模式，开关切换模式

    效果图: 1.icon-button 一般按钮模式: 1 <template> 2 <div class="icon-button" :style="{ ...

  8. 浅谈Mysql读写分离的坑以及应对的方案

    一.主从架构 为什么我们要进行读写分离?个人觉得还是业务发展到一定的规模,驱动技术架构的改革,读写分离可以减轻单台服务器的压力,将读请求和写请求分流到不同的服务器,分摊单台服务的负载,提高可用性,提高 ...

  9. 基于ASP.NET ZERO，开发SaaS版供应链管理系统

    前言 在园子吸收营养10多年,一直没有贡献,目前园子危机时刻,除了捐款+会员,也鼓起勇气,发篇文助力一下. 2018年下半年,公司决定开发一款SaaS版行业供应链管理系统,经过选型,确定采用ABP(A ...

  10. 谷粒商城微服务分布式高级篇：linux下使用docker安装ElasticSearch

    [root@localhost ~]# docker pull elasticsearch:7.8.0 安装elasticsearch:7.8.0[root@localhost ~]# docker ...