本示例是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. 原来ES7~12分别增加了这些属性呀

    ES6也称为ES2015,于2015年发布,此后每年都有新增一些属性,分别命名为ES7~12,发布的年份分别对应2016年到2021年 ES7 includes方法 数组中新增了includes方法, ...

  2. Pytorch语法——torch.autograd.grad

    The torch.autograd.grad function is a part of PyTorch's automatic differentiation package and is use ...

  3. 2023-08-30：用go语言编写。两个魔法卷轴问题。 给定一个数组arr，其中可能有正、负、0， 一个魔法卷轴可以把arr中连续的一段全变成0，你希望数组整体的累加和尽可能大。 你有两个魔法卷轴，

    2023-08-30:用go语言编写.两个魔法卷轴问题. 给定一个数组arr,其中可能有正.负.0, 一个魔法卷轴可以把arr中连续的一段全变成0,你希望数组整体的累加和尽可能大. 你有两个魔法卷轴, ...

  4. vue3 甘特图（一）：选择与初始化甘特图

    vue3 甘特图(一) 1.功能使用背景: 甘特图是一种项目管理工具,以图形直观的方式显示项目的时间轴和任务计划,为了可扩展和定制相关任务的开发,故此选择dhtmlx-gantt 2.vue3 初始化 ...

  5. springboot打包与依赖包分离

    前言: springboot项目部署时,需要本地打包成一个jar放到服务器进行部署(使用jenkins自动打包部署同理),部署包里包含了其它所有依赖包,整个包会比较大,小则几M,大则几十上百. 正文: ...

  6. mysql锁初识

    MySQL锁的粒度分为:行级锁.表级锁.页级锁. 一.行级锁(INNODB引擎) 行级锁是Mysql中锁定粒度最细的一种锁,表示只针对当前操作的行进行加锁. 行级锁能大大减少数据库操作的冲突.其加锁粒 ...

  7. springBoot使用注解Aop实现日志模块

    我们在日常业务操作中需要记录很多日志,可以在我们需要的方法中对日志进行保存操作,但是对业务代码入侵性大.使用切面针对控制类进行处理灵活度不高,因此我们可以使用自定义注解来针对方法进行日志记录 1.注解 ...

  8. C++指针和地址偏移在HotSpot VM中的应用

    在前面我们介绍过new运算符,这个操作实际上上包含了如下3个步骤: 调用operator new的标准库函数.此函数会分配一块内存空间以便函存储相应类型的实例. 调用相应类的构造函数 返回一个指向该对 ...

  9. BS系统的登录鉴权流程演变

    1 基础知识 用户登录是使用指定用户名和密码登录到系统,以对用户的私密数据进行访问和操作.在一个有登录鉴权的BS系统中,通常用户访问数据时,后端拦截请求,对用户进行鉴权,以验证用户身份和权限.用户名. ...

  10. Python面向对象——反射（hasattr、getattr、setattr、delattr）、内置方法(__str__和__del__)、元类（介绍，创建类的流程，exec，自定义元类）、属性查找

    文章目录 反射 内置方法 __str__方法 __del__函数 元类 元类介绍 class关键字创建类的流程分析 补充:exec的用法 自定义元类控制类StanfordTeacher的创建 自定义元 ...