本示例是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. Hybird 技术讨论：热更新原理解析

    原生应用 VS 混合应用 大家对于原生应用和混合应用已经非常熟悉了,这里就不再进行详细的介绍,用通俗易懂的话解释下他们的一些特点.   1.原生应用 在 Android.iOS 等移动平台上利用提供的 ...

  2. 无界AI绘画基础教程，和Midjourney以及Stable Diffusion哪个更好用？

    本教程收集于:AIGC从入门到精通教程汇总 简单的总结 Midjourney,Stable Diffusion,无界AI的区别? Midjourney,收费,上手容易,做出来高精度的图需要自己掌握好咒 ...

  3. 【SQL】所谓的连表查询

    连表查询 外连接 外连接分为两种,左(外)连接和右(外)连接 基本语法如下: SELECT 字段列表 FROM 表1 LEFT JOIN 表2 ON 条件; 这是左连接,因此以表1中的 [字段列表] ...

  4. 《CTFshow-Web入门》05. Web 41~50

    @ 目录 web41 题解 原理 web42 题解 原理 web43 题解 原理 web44 题解 原理 web45 题解 原理 web46 题解 原理 web47 题解 web48 题解 web49 ...

  5. CodeForces 1367E Necklace Assembly

    题意 给定一个字符串\(s\),长度为\(n\),一根项链为一个环,定义一根项链为\(k-beautiful\),则该项链顺时针转\(k\)下后与原项链相等,给出\(k\),请构造一根最长的\(k-b ...

  6. VisionPro学习笔记（3）——BeadInspectTool

    如果需要了解其他图像处理的文章,请移步小编的GitHub地址 传送门:请点击我 如果点击有误:https://github.com/LeBron-Jian/ComputerVisionPractice ...

  7. MutationObserver监听dom元素结构及属性变化

    工作中埋码需求,当某些动态插入的元素出现时触发埋码事件,因此需要对插入元素的父节点进行监听,子节点发生变化时触发相应埋码逻辑. 方法一 监听页面结构及子元素变化: (function () { //事 ...

  8. Solution Set -「ABC 196」

    「ABC 196A」Difference Max Link. 略. #include<cstdio> long long a,b,c,d; int main(){ scanf(" ...

  9. WPF中以MVVM方式，实现RTSP视频播放

    前言视频播放在上位机开发中经常会遇到,基本上是两种常见的解决方案 1.采用厂家提供的sdk和前端控件进行展示,常见的海康/大华都提供了相关sdk及文档 2.开启相机onvif协议,捅过rtsp视频流进 ...

  10. golang Context应用举例

    Context本质 golang标准库里Context实际上是一个接口(即一种编程规范. 一种约定). type Context interface { Deadline() (deadline ti ...