前言

Blazor正式版的发布已经有一段时间了，.NET社区的各路高手也创建了一个又一个的Blazor组件库，其中就包括了我和其他小伙伴一起参与的AntDesign组件库，于上周终于发布了第一个版本0.1.0，共计完成了59个常用组件，那么今天就来聊一聊如何在ASP.NET Core MVC项目中使用这些Blazor组件吧

环境搭建

.NET Core SDK 3.0.301

Vistual Studio 2019.16.6.3

调用Blazor组件

创建http://ASP.NET Core MVC项目，如果想要在已有的项目上使用AntDesign，需要确保Target Framework是netcoreapp3.1，然后在Nuget中搜索并安装AntDesign 0.1.0版本。

修改Startup.cs

在ConfigureServices方法中添加

// add for balzor

在Configure方法中添加

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");
    // add for blazor
    endpoints.MapBlazorHub();
});

修改./Views/Shared/_Layout.cshtml

在head区域添加

<!--add for AntDesign-->

在script区域添加

<!--add for blazor-->
<script src="~/_framework/blazor.server.js"></script>

这里我们需要利用一个中间层，否则直接在View里添加组件会有很多限制，不太方便

创建一个razor文件./Components/HelloWorld.razor

@using 

最后在View中添加刚刚新建的中间组件

修改./Views/Home/Index.cshtml，添加代码

<

Build & Run

这时候主页应该会出现一个ant-design风格的button，点击后button的内容会变为Priamary*，每点击一次就多一个*，效果如下

小结

一般来说，在MVC项目中，先将界面需要使用的组件组合在一起，然后整体包装在一个中间组件（HelloWolrd.razor）中，最后在调用的View中展示中间组件。可以理解为组件库为我们提供了各种各样的零件，中间层将这些零件（以及原生HTML标签）组合成一个产品，最后在View中展示产品。

创建一个播放器组件

首先我们创建好需要用到的JavaScript脚本

Nuget安装Microsoft.TypeScript.MSBuild

创建文件main.ts

interface 

创建文件tsconfig.json

{
  

创建文件夹./wwwroot/music/

放入几首你喜欢的音乐，但要注意支持的文件格式

<audio> can be used to play sound files in the following formats:
.mp3: Supported by all modern browsers.
.wav: Not supported by Internet Explorer.
.ogg: Not supported by Internet Explorer and Safari.

创建./Components/MusicPlayer.razor

<

创建./Components/MusicPlayer.razor.cs

public 

创建./Controllers/MusicController.cs

public class MusicController : Controller
{
    public IActionResult Index(string name)
    {
        return View();
    }
}

创建./Views/Music/Index.cshtml

<

修改./Views/Shared/_Layout.cshtml，添加以下代码

<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-controller="Music" asp-action="Index">Music</a>
</li>

Build & Run

点击菜单栏的Music，效果如下

总结

WebAssembly并不是JavaScript的替代品，Blazor当然也不是，在开发Blazor组件的过程中，大部分情况下，仍然要通过TypeScript / JavaScript来与DOM进行交互，比如在这个播放器的案例中，还是需要JavaScript来调用audio的play，pause等方法。但是在View层面使用播放器这个组件时，我们几乎可以不再关心JavaScript的开发。这让前端的开发更类似于开发WPF的XAML界面。事实上，社区里也有这样的项目，致力于提供一种类WPF界面开发的组件库。

同时，也希望大家能多多关注国内小伙伴们共同参与开发的AntDesign，作为最热门的Blazor组件库之一，在今年的MS Build大会上也获得了微软官方的认可。虽然目前组件还有不少BUG和性能问题，但是在社区的努力下，相信它会越来越好，让我们一起为.NET生态添砖加瓦！

社区组件库：

https://github.com/ant-design-blazor/ant-design-blazor

https://github.com/ArgoZhang/BootstrapBlazor

参考：

https://catswhocode.com/html-audio-tag

https://www.w3schools.com/TAGS/tag_audio.asp