在本文中，将探讨如何在Blazor应用程序中集成开源音乐符号库Manufaktura.Controls。Blazor是一个使用C#进行Web开发的框架，允许开发者在浏览器中运行.NET代码。Manufaktura.Controls是一个用于音乐符号渲染的库，可以生成音乐符号的HTML表示。将从Blazor 0.4版本升级到0.5版本，并解决在升级过程中遇到的问题。
Blazor 0.5.1版本在几天前发布，决定写一篇新文章来介绍如何解决第一部分中描述的问题。升级项目的过程在中有描述。更新后的Blazor库可以在Nuget上找到。更新后，可能需要手动编辑项目文件，将Microsoft.AspNetCore.Blazor.Cli的版本号从0.4更改为0.5.1：
<DotNetCliToolReference Include="Microsoft.AspNetCore.Blazor.Cli" Version="0.5.1" />
将Blazor注入HTML的方式略有变化：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<title>BlazorApp1</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="css/site.css" rel="stylesheet">
</head>
<body>
<app>
Loading...
</app>
<script src="_framework/blazor.webassembly.js"></script>
</body>
</html>
启动类也有一些变化：
public class Program
{
public static void Main(string[] args)
{
CreateHostBuilder(args).Build().Run();
}
public static IWebAssemblyHostBuilder CreateHostBuilder(string[] args) =>
BlazorWebAssemblyHost.CreateDefaultBuilder()
.UseBlazorStartup<Startup>();
}
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
}
public void Configure(IBlazorApplicationBuilder app)
{
app.AddComponent<App>("app");
}
}
应用这些更改后，第一部分中创建的项目应该可以无问题地运行。
Blazor 0.5允许程序员在Razor视图中插入原始HTML：
@((MarkupString)RenderScore())
在第一部分中，创建了一个RawHtml组件，现在不再需要了，所以可以从项目中移除它以及对HtmlAgilityPack的依赖。现在，NoteViewer组件看起来像这样：
@using Manufaktura.Controls.Model
@using Manufaktura.Controls.Rendering.Implementations
@((MarkupString)RenderScore())
@functions {
[Parameter] Score Score { get; set; }
[Parameter] HtmlScoreRendererSettings Settings { get; set; }
private int canvasIdCount = 0;
public string RenderScore()
{
IScore2HtmlBuilder builder;
if (Settings.RenderSurface == HtmlScoreRendererSettings.HtmlRenderSurface.Canvas)
builder = new Score2HtmlCanvasBuilder(Score, string.Format("scoreCanvas{0}", canvasIdCount), Settings);
else if (Settings.RenderSurface == HtmlScoreRendererSettings.HtmlRenderSurface.Svg)
builder = new Score2HtmlSvgBuilder(Score, string.Format("scoreCanvas{0}", canvasIdCount), Settings);
else
throw new NotImplementedException("Unsupported rendering engine.");
string html = builder.Build();
canvasIdCount++;
return html;
}
}
首先值得注意的是，更新SVG现在可以正常工作。当点击“添加音符”按钮时，音符会没有问题地添加到五线谱中。在Firefox浏览器中，几乎是瞬间添加的，但在Chrome等其他浏览器中，大约有1秒的明显延迟。这是因为所有的DOM操作都是通过invoke完成的，与JavaScript DOM操作相比速度较慢（参见）。希望在未来的版本中性能会有所提高。
Uncaught (in promise) Error: System.NullReferenceException: Object reference not set to an instance of an object.