本示例是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. 原来TypeScript中的接口和泛型这么好理解

    "接口"和"泛型"是 TypeScript 相比于 JavaScript 新增的内容,都用于定义数据类型 前面两篇文章总结了TypeScript中的 类型注解. ...

  2. docker网络 bridge 与overlay 模式

    转载请注明出处: 1.bridge网络模式 工作原理:  在Bridge模式中,Docker通过创建一个虚拟网络桥接器(bridge)将容器连接到主机上的物理网络接口.每个容器都会被分配一个IP地址, ...

  3. AWD-PWN流量监控与抄流量反打

    RE手 在AWD中比较做牢,队伍里也没pwn手,在awd出现pwn靶机比较坐牢.之前都不知道pwn靶机可以抄流量反打. 参考pwn_waf:https://github.com/i0gan/pwn_w ...

  4. 一文读懂LockSupport

    阅读本文前,需要储备的知识点如下,点击链接直接跳转. java线程详解 Java不能操作内存?Unsafe了解一下 LockSupport介绍 搞java开发的基本都知道J.U.C并发包(即java. ...

  5. 《代码整洁之道 Clean Code》学习笔记 Part 1

    前段时间在看<架构整洁之道>,里面提到了:构建一个好的软件系统,应该从写整洁代码做起.毕竟,如果建筑使用的砖头质量不佳,再好的架构也无法造就高质量的建筑.趁热打铁,翻出<代码整洁之道 ...

  6. Row Major

    Smiling & Weeping ----昨天, 别人在我身旁大声说出你的名字, 这对于我, 像从敞开的窗口扔进了一朵玫瑰花. 思路:不客气地说,这是一道令人费解的题目,要求构造一个字符串, ...

  7. 🖖少年，该升级 Vue3 了！

    你好,我是 Kagol. 前言 根据 Vue 官网文档的说明,Vue2 的终止支持时间是 2023 年 12 月 31 日,这意味着从明年开始: Vue2 将不再更新和升级新版本,不再增加新特性,不再 ...

  8. 【ChatGPT-应用篇】基于chatGPT覆盖测试过程的初步探索

    1.前言 22年底ChatGPT就已风靡行业内外,简单来说,它是基于自然语言生成式 AI 模型,打造的一款聊天机器人.是 OpenAI 于 11 月 30 日推出的最新作品,供公众免费测试.他可以根据 ...

  9. DHorse v1.4.0 发布，基于 k8s 的发布平台

    版本说明 新增特性 提供Fabric8客户端操作k8s(预览)的功能,可以通过指定-Dkubernetes-client=fabric8参数开启: Vue.React应用增加Pnpm.Yarn的构建方 ...

  10. ​python爬虫——爬虫伪装和反“反爬”

    前言爬虫伪装和反"反爬"是在爬虫领域中非常重要的话题.伪装可以让你的爬虫看起来更像普通的浏览器或者应用程序,从而减少被服务器封禁的风险:反"反爬"则是应对服务器 ...