前言
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组件
创建ASP.NET Core MVC项目，如果想要在已有的项目上使用AntDesign，需要确保Target Framework是netcoreapp3.1，然后在Nuget中搜索并安装AntDesign 0.1.0版本。
修改Startup.cs
在ConfigureServices方法中添加
// add for balzor
services.AddServerSideBlazor();
// add for AntDesign
services.AddAntDesign();
在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-->
<link href="/_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet">
<base href="/" />
在script区域添加
<!--add for blazor-->
<script src="~/_framework/blazor.server.js"></script>
这里我们需要利用一个中间层，否则直接在View里添加组件会有很多限制，不太方便
创建一个razor文件./Components/HelloWorld.razor
@using AntDesign
<Button type="primary" OnClick="(e)=>OnClick(e)">@_content</Button>
@code{
private string _content = "Primay";
private void OnClick(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
{
_content += "*";
}
}
最后在View中添加刚刚新建的中间组件
修改./Views/Home/Index.cshtml，添加代码
<component type="typeof(HelloWorld)" render-mode="ServerPrerendered" />
Build & Run
这时候主页应该会出现一个ant-design风格的button，点击后button的内容会变为Priamary*，每点击一次就多一个*，效果如下
小结
一般来说，在MVC项目中，先将界面需要使用的组件组合在一起，然后整体包装在一个中间组件（HelloWolrd.razor）中，最后在调用的View中展示中间组件。可以理解为组件库为我们提供了各种各样的零件，中间层将这些零件（以及原生HTML标签）组合成一个产品，最后在View中展示产品。
创建一个播放器组件
首先我们创建好需要用到的JavaScript脚本
Nuget安装Microsoft.TypeScript.MSBuild
创建文件main.ts
interface Window {
SoBrian: any;
}
function Play(element, flag) {
var dom = document.querySelector(element);
if (flag) {
dom.play();
}
else {
dom.pause();
}
}
function GetMusicTime(element) {
var dom = document.querySelector(element);
let obj = {
currentTime: dom.currentTime,
duration: dom.duration
}
let json = JSON.stringify(obj);
return json
}
function SetMusicTime(element, time) {
var dom = document.querySelector(element);
dom.currentTime = time;
}
window.Music = {
print: Print,
play: Play,
getMusicTime: GetMusicTime,
setMusicTime: SetMusicTime
}
创建文件tsconfig.json
{
"compileOnSave": true,
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": false,
"target": "es2015",
"outDir": "wwwroot/js"
},
"files": [ "main.ts" ],
"exclude": [
"node_modules",
"wwwroot"
]
}
创建文件夹./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
@namespace SoBrian.MVC.Components
@inherits AntDesign.AntDomComponentBase <audio id="audio" preload="auto" src="@_currentSrc"></audio>
<div>
<AntDesign.Row Justify="center" Align="middle">
<AntDesign.Col Span="4">
<p>@System.IO.Path.GetFileNameWithoutExtension(_currentSrc)</p>
</AntDesign.Col>
<AntDesign.Col Span="4">
<AntDesign.Space>
<AntDesign.SpaceItem>
<AntDesign.Button Type="primary" Shape="circle" Icon="left" OnClick="OnLast" />
</AntDesign.SpaceItem>
<AntDesign.SpaceItem>
<AntDesign.Button Type="primary" Shape="circle" Icon="@PlayPauseIcon" Size="large" OnClick="OnPlayPause" />
</AntDesign.SpaceItem>
<AntDesign.SpaceItem>
<AntDesign.Button Type="primary" Shape="circle" Icon="right" OnClick="OnNext" />
</AntDesign.SpaceItem>
</AntDesign.Space>
</AntDesign.Col>
<AntDesign.Col Span="9">
<AntDesign.Slider Value="@_currentTimeSlide" OnAfterChange="OnSliderChange" />
</AntDesign.Col>
<AntDesign.Col Span="3">
<p>@($"{_currentTime.ToString("mm\\:ss")} / {_duration.ToString("mm\\:ss")}")</p>
</AntDesign.Col>
</AntDesign.Row>
</div>
创建./Components/MusicPlayer.razor.cs
public partial class MusicPlayer : AntDomComponentBase
{
private bool _isPlaying = false;
private bool _canPlayFlag = false;
private string _currentSrc;
private List<string> _musicList = new List<string>
{
"music/周杰伦 - 兰亭序.mp3",
"music/周杰伦 - 告白气球.mp3",
"music/周杰伦 - 听妈妈的话.mp3",
"music/周杰伦 - 园游会.mp3",
"music/周杰伦 - 夜曲.mp3",
"music/周杰伦 - 夜的第七章.mp3",
"music/周杰伦 - 搁浅.mp3"
};
private Timer _timer;
private double _currentTimeSlide = ;
private TimeSpan _currentTime = new TimeSpan();
private TimeSpan _duration = new TimeSpan();
private string PlayPauseIcon { get => _isPlaying ? "pause" : "caret-right"; }
private Action _afterCanPlay;
[Inject]
private DomEventService DomEventService { get; set; } protected override void OnInitialized()
{
base.OnInitialized(); _currentSrc = _musicList[];
_afterCanPlay = async () =>
{
// do not use _isPlaying, this delegate will be triggered when user clicked play button
if (_canPlayFlag)
{
try
{
await JsInvokeAsync("Music.play", "#audio", true);
_canPlayFlag = false;
}
catch (Exception ex)
{
}
}
};
} protected override Task OnFirstAfterRenderAsync()
{
// cannot listen to dom events in OnInitialized while render-mode is ServerPrerendered
DomEventService.AddEventListener<JsonElement>("#audio", "timeupdate", OnTimeUpdate);
DomEventService.AddEventListener<JsonElement>("#audio", "canplay", OnCanPlay);
DomEventService.AddEventListener<JsonElement>("#audio", "play", OnPlay);
DomEventService.AddEventListener<JsonElement>("#audio", "pause", OnPause);
DomEventService.AddEventListener<JsonElement>("#audio", "ended", OnEnd);
return base.OnFirstAfterRenderAsync();
} #region Audio EventHandlers private async void OnPlayPause(MouseEventArgs args)
{
try
{
await JsInvokeAsync("Music.play", "#audio", !_isPlaying);
}
catch (Exception ex)
{
}
} private async void OnCanPlay(JsonElement jsonElement)
{
try
{
string json = await JsInvokeAsync<string>("Music.getMusicTime", "#audio");
jsonElement = JsonDocument.Parse(json).RootElement;
_duration = TimeSpan.FromSeconds(jsonElement.GetProperty("duration").GetDouble()); _afterCanPlay();
}
catch (Exception)
{
}
} private void OnPlay(JsonElement jsonElement)
{
_isPlaying = true;
} private async void OnLast(MouseEventArgs args)
{
_canPlayFlag = true;
int index = _musicList.IndexOf(_currentSrc);
index = index == ? _musicList.Count - : index - ;
_currentSrc = _musicList[index];
} private async void OnNext(MouseEventArgs args)
{
_canPlayFlag = true;
int index = _musicList.IndexOf(_currentSrc);
index = index == _musicList.Count - ? : index + ;
_currentSrc = _musicList[index];
} private void OnPause(JsonElement jsonElement)
{
_isPlaying = false;
StateHasChanged();
} private void OnEnd(JsonElement jsonElement)
{
_isPlaying = false;
StateHasChanged(); OnNext(new MouseEventArgs());
} private async void OnTimeUpdate(JsonElement jsonElement)
{
// do not use the timestamp from timeupdate event, which is the total time the audio has been working
// use the currentTime property from audio element
string json = await JsInvokeAsync<string>("Music.getMusicTime", "#audio");
jsonElement = JsonDocument.Parse(json).RootElement;
_currentTime = TimeSpan.FromSeconds(jsonElement.GetProperty("currentTime").GetDouble());
_currentTimeSlide = _currentTime / _duration * ; StateHasChanged();
} #endregion private async void OnSliderChange(OneOf<double, (double, double)> value)
{
_currentTime = value.AsT0 * _duration / ;
_currentTimeSlide = _currentTime / _duration * ;
await JsInvokeAsync("Music.setMusicTime", "#audio", _currentTime.TotalSeconds);
}
}
创建./Controllers/MusicController.cs
public class MusicController : Controller
{
public IActionResult Index(string name)
{
return View();
}
}
创建./Views/Music/Index.cshtml
<component type="typeof(MusicPlayer)" render-mode="Server" />
修改./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://catswhocode.com/html-audio-tag
https://www.w3schools.com/TAGS/tag_audio.asp
https://github.com/ant-design-blazor/ant-design-blazor