介绍 这是关于实现开源音乐符号库Manufaktura的系列文章的第二部分。在Blazor控制。关于Blazor 0.4的第一部分可以在这里找到。篇关于Manufaktura。控件库可以在这里找到。 几天前，Blazor发布了一个新的0.5.1版本，所以我决定写一篇新文章，介绍如何解决第1部分中描述的问题。 将项目从Blazor 0.4升级到0.5 本文描述了项目从Blazor 0.4升级到0.5的过程。 更新的Blazor图书馆可以在Nuget上找到。更新后，你可能不得不手动编辑你的项目文件，并改变微软。aspnetcore . blazor的版本号。Cli从0.4。0.5.1: 隐藏,复制Code
<DotNetCliToolReferenceInclude="Microsoft.AspNetCore.Blazor.Cli"Version="0.5.1"/>
在HTML中注入Blazor的方式略有改变: 隐藏,复制Code
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"/> <metaname="viewport"content="width=device-width"> <title>BlazorApp1</title> <basehref="/"/> <linkhref="css/bootstrap/bootstrap.min.css"rel="stylesheet"/> <linkhref="css/site.css"rel="stylesheet"/> </head> <body> <app>Loading...</app> <scriptsrc="_framework/blazor.webassembly.js"></script> </body> </html>
启动类也有一些变化: 隐藏,复制Code
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"); } }
应用这些更改之后，在第1部分中创建的项目应该可以正常运行。 NoteViewer组件中的更改 Blazor 0.5使程序员可以在Razor视图中插入原始HTML: 隐藏,复制Code
@((MarkupString)RenderScore())
在第1部分中，我创建了一个不再需要的RawHtml组件，因此我们可以将其从项目中删除，并删除对HtmlAgilityPack的依赖。现在，NoteViewer组件看起来像这样: 隐藏,收缩,复制Code
@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更新现在可以正常工作。当您单击添加注释按钮时，注释将毫无问题地添加到staff中。在Firefox浏览器上，它几乎是立即添加的，然而在其他浏览器，如Chrome，有一个显著的延迟约1秒。这是因为目前所有的DOM操作都是通过调用来完成的，所以它比JavaScript DOM操作要慢(参见Stackoverflow上的这个问题)。我希望在未来的版本中性能会得到改善。 在第一部分中，我提到了在Rebeam方法中抛出的一个异常。现在这个方法抛出了一个不同的错误: 隐藏,复制Code
Uncaught (in promise) Error: System.NullReferenceException: Object reference not set to an instance of an object. at System.Linq.Expressions.Interpreter.LightLambda.MakeRunDelegateCtor (:59341/System.Type delegateType) <0x212c460 + 0x00294> in <d4b4182dc3854440a5ca922d80e29ea1>:0 at System.Linq.Expressions.Interpreter.LightLambda.GetRunDelegateCtor (:59341/System.Type delegateType) <0x212bde0 + 0x00048> in <d4b4182dc3854440a5ca922d80e29ea1>:0 at System.Linq.Expressions.Interpreter.LightLambda.MakeDelegate (:59341/System.Type delegateType) <0x212bc50 + 0x0000e> in <d4b4182dc3854440a5ca922d80e29ea1>:0 at System.Linq.Expressions.Interpreter.LightDelegateCreator.CreateDelegate (:59341/System.Runtime.CompilerServices.IStrongBox[] closure) <0x212b3a8 + 0x00028> in <d4b4182dc3854440a5ca922d80e29ea1>:0 at :59341/System.Linq.Expressions.Interpreter.LightDelegateCreator.CreateDelegate () <0x212b238 + 0x0000a> in <d4b4182dc3854440a5ca922d80e29ea1>:0 at System.Linq.Expressions.LambdaExpression.Compile (:59341/System.Boolean preferInterpretation) <0x2103b20 + 0x0001c> in <d4b4182dc3854440a5ca922d80e29ea1>:0 at :59341/System.Linq.Expressions.LambdaExpression.Compile () <0x2103908 + 0x0000a> in <d4b4182dc3854440a5ca922d80e29ea1>:0 at Manufaktura.Controls.Extensions.StaffBuilder+<>c.<Rebeam>b__13_1 (:59341/System.Reflection.TypeInfo t) [0x00000] in C:DevelopmentmanufakturalibrariesManufaktura.ControlsExtensionsStaffBuilder.cs:229
关于Manufaktura实施的进一步进展，我会通知你。当发布新版本时，Blazor中的控件。 本文转载于：http://www.diyabc.com/frontweb/news17314.html