{ "cells": [ { "attachments": {}, "cell_type": "markdown", "metadata": {}, "source": [ "# 使用 Blazor 进行交互式展示" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "在笔记本中使用Blazor:原生的没找到介绍和使用方法。但找到一大侠开发的扩展库-[BlazorInteractive](https://github.com/plbonneville/BlazorInteractive),使用前只要引入此nuget包即可。\n", "\n", "特别注意:此方法在.net 8中使用,**.net 9+中异常**(.NET 9 移除了执行JS相关的 Microsoft.JSInterop.IJSUnmarshalledRuntime);\n", "\n", "> 目前,没有找到解决方案。已经向BlazorInteractive库提交了问题,但该库已年久失修(停止在.net 8),不知道能不能解决及发布适用.net 9的新版。" ] }, { "attachments": {}, "cell_type": "markdown", "metadata": {}, "source": [ "## 添加 Nuget 包" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "dotnet_interactive": { "language": "csharp" }, "polyglot_notebook": { "kernelName": "csharp" } }, "outputs": [ { "data": { "text/html": [ "
Restore sources
Installed Packages
" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/plain": [ "Loading extensions from `C:\\Users\\ruyu\\.nuget\\packages\\blazorinteractive\\1.2.0\\lib\\net8.0\\BlazorInteractive.dll`" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "
\n", " Compile and render Razor components (.razor) in .NET Interactive Notebooks.\n", "

This extension adds a new kernel that can render Blazor markdown.

\n", "\n", "
\n",
       "        \n",
       "#!blazor\n",
       "

Counter

\n", "\n", "

\n", " Current count: @currentCount\n", "

\n", "\n", "@code {\n", " int currentCount = 0;\n", "}
\n", "
\n", "\n", "

This extension also adds the compiled component as a type to the interactive workspace.

\n", "\n", "

Options:

\n", " \n", "
" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "// [可选的]添加包源(默认也是 https://api.nuget.org/v3/index.json)\n", "#i \"nuget:https://api.nuget.org/v3/index.json\"\n", "\n", "//添加 Nuget包\n", "#r \"nuget: BlazorInteractive\"" ] }, { "attachments": {}, "cell_type": "markdown", "metadata": {}, "source": [ "## 添加引用" ] }, { "cell_type": "code", "execution_count": 2, "metadata": { "dotnet_interactive": { "language": "csharp" }, "polyglot_notebook": { "kernelName": "csharp" } }, "outputs": [], "source": [ "#!blazor" ] }, { "attachments": {}, "cell_type": "markdown", "metadata": {}, "source": [ "## 示例" ] }, { "cell_type": "code", "execution_count": 3, "metadata": { "dotnet_interactive": { "language": "razor" }, "polyglot_notebook": { "kernelName": "razor" } }, "outputs": [ { "ename": "Error", "evalue": "System.AggregateException: One or more errors occurred. (Could not load type 'Microsoft.JSInterop.IJSUnmarshalledRuntime' from assembly 'Microsoft.JSInterop, Version=9.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60'.)\r\n ---> System.TypeLoadException: Could not load type 'Microsoft.JSInterop.IJSUnmarshalledRuntime' from assembly 'Microsoft.JSInterop, Version=9.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60'.\r\n at Bunit.BunitJSInterop..ctor()\r\n at Bunit.TestContext..ctor() in /_/src/bunit.web/TestContext.cs:line 14\r\n at BlazorInteractive.BlazorExtensions.GenerateHtml(Byte[] assemblyBytes, String componentName)\r\n at BlazorInteractive.BlazorExtensions.<>c__DisplayClass0_1`1.<b__1>d.MoveNext()\r\n --- End of inner exception stack trace ---\r\n at System.Threading.Tasks.Task.ThrowIfExceptional(Boolean includeTaskCanceledExceptions)\r\n at System.Threading.Tasks.Task.Wait(Int32 millisecondsTimeout, CancellationToken cancellationToken)\r\n at System.Threading.Tasks.Task.Wait()\r\n at BlazorInteractive.BlazorExtensions.<>c__DisplayClass0_0`1.b__0(BlazorMarkdown markdown, TextWriter writer)\r\n at Microsoft.DotNet.Interactive.Formatting.Formatter.<>c__DisplayClass46_0`1.b__0(Object value, FormatContext context) in D:\\a\\_work\\1\\s\\src\\Microsoft.DotNet.Interactive.Formatting\\Formatter.cs:line 426\r\n at Microsoft.DotNet.Interactive.Formatting.AnonymousTypeFormatter`1.Format(T instance, FormatContext context) in D:\\a\\_work\\1\\s\\src\\Microsoft.DotNet.Interactive.Formatting\\AnonymousTypeFormatter{T}.cs:line 30\r\n at Microsoft.DotNet.Interactive.Formatting.TypeFormatter`1.Microsoft.DotNet.Interactive.Formatting.ITypeFormatter.Format(Object instance, FormatContext context) in D:\\a\\_work\\1\\s\\src\\Microsoft.DotNet.Interactive.Formatting\\TypeFormatter{T}.cs:line 23\r\n at Microsoft.DotNet.Interactive.Formatting.Formatter`1.FormatTo(T obj, FormatContext context, String mimeType) in D:\\a\\_work\\1\\s\\src\\Microsoft.DotNet.Interactive.Formatting\\Formatter{T}.cs:line 79\r\n at Microsoft.DotNet.Interactive.Formatting.Formatter.FormatTo[T](T obj, FormatContext context, String mimeType) in D:\\a\\_work\\1\\s\\src\\Microsoft.DotNet.Interactive.Formatting\\Formatter.cs:line 319\r\n at Microsoft.DotNet.Interactive.Formatting.Formatter.ToDisplayString(Object obj, String mimeType) in D:\\a\\_work\\1\\s\\src\\Microsoft.DotNet.Interactive.Formatting\\Formatter.cs:line 276\r\n at Microsoft.DotNet.Interactive.FormattedValue.<>c__DisplayClass12_0.b__0(String mimeType) in D:\\a\\_work\\1\\s\\src\\Microsoft.DotNet.Interactive\\FormattedValue.cs:line 49\r\n at System.Linq.Enumerable.ArraySelectIterator`2.ToArray()\r\n at Microsoft.DotNet.Interactive.FormattedValue.CreateManyFromObject(Object value, String[] mimeTypes) in D:\\a\\_work\\1\\s\\src\\Microsoft.DotNet.Interactive\\FormattedValue.cs:line 47\r\n at Microsoft.DotNet.Interactive.KernelInvocationContextExtensions.Display(KernelInvocationContext context, Object value, String[] mimeTypes) in D:\\a\\_work\\1\\s\\src\\Microsoft.DotNet.Interactive\\KernelInvocationContextExtensions.cs:line 22\r\n at BlazorInteractive.BlazorKernel.HandleAsync(SubmitCode command, KernelInvocationContext context)\r\n at Microsoft.DotNet.Interactive.Kernel.<>c__DisplayClass87_0`1.b__0(KernelCommand _, KernelInvocationContext context) in D:\\a\\_work\\1\\s\\src\\Microsoft.DotNet.Interactive\\Kernel.cs:line 998\r\n at Microsoft.DotNet.Interactive.Commands.KernelCommand.InvokeAsync(KernelInvocationContext context) in D:\\a\\_work\\1\\s\\src\\Microsoft.DotNet.Interactive\\Commands\\KernelCommand.cs:line 191\r\n at Microsoft.DotNet.Interactive.Kernel.HandleAsync(KernelCommand command, KernelInvocationContext context) in D:\\a\\_work\\1\\s\\src\\Microsoft.DotNet.Interactive\\Kernel.cs:line 365\r\n at Microsoft.DotNet.Interactive.KernelCommandPipeline.b__6_0(KernelCommand command, KernelInvocationContext context, KernelPipelineContinuation _) in D:\\a\\_work\\1\\s\\src\\Microsoft.DotNet.Interactive\\KernelCommandPipeline.cs:line 60\r\n at Microsoft.DotNet.Interactive.KernelCommandPipeline.SendAsync(KernelCommand command, KernelInvocationContext context) in D:\\a\\_work\\1\\s\\src\\Microsoft.DotNet.Interactive\\KernelCommandPipeline.cs:line 41", "output_type": "error", "traceback": [ "System.AggregateException: One or more errors occurred. (Could not load type 'Microsoft.JSInterop.IJSUnmarshalledRuntime' from assembly 'Microsoft.JSInterop, Version=9.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60'.)\r\n", " ---> System.TypeLoadException: Could not load type 'Microsoft.JSInterop.IJSUnmarshalledRuntime' from assembly 'Microsoft.JSInterop, Version=9.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60'.\r\n", " at Bunit.BunitJSInterop..ctor()\r\n", " at Bunit.TestContext..ctor() in /_/src/bunit.web/TestContext.cs:line 14\r\n", " at BlazorInteractive.BlazorExtensions.GenerateHtml(Byte[] assemblyBytes, String componentName)\r\n", " at BlazorInteractive.BlazorExtensions.<>c__DisplayClass0_1`1.<b__1>d.MoveNext()\r\n", " --- End of inner exception stack trace ---\r\n", " at System.Threading.Tasks.Task.ThrowIfExceptional(Boolean includeTaskCanceledExceptions)\r\n", " at System.Threading.Tasks.Task.Wait(Int32 millisecondsTimeout, CancellationToken cancellationToken)\r\n", " at System.Threading.Tasks.Task.Wait()\r\n", " at BlazorInteractive.BlazorExtensions.<>c__DisplayClass0_0`1.b__0(BlazorMarkdown markdown, TextWriter writer)\r\n", " at Microsoft.DotNet.Interactive.Formatting.Formatter.<>c__DisplayClass46_0`1.b__0(Object value, FormatContext context) in D:\\a\\_work\\1\\s\\src\\Microsoft.DotNet.Interactive.Formatting\\Formatter.cs:line 426\r\n", " at Microsoft.DotNet.Interactive.Formatting.AnonymousTypeFormatter`1.Format(T instance, FormatContext context) in D:\\a\\_work\\1\\s\\src\\Microsoft.DotNet.Interactive.Formatting\\AnonymousTypeFormatter{T}.cs:line 30\r\n", " at Microsoft.DotNet.Interactive.Formatting.TypeFormatter`1.Microsoft.DotNet.Interactive.Formatting.ITypeFormatter.Format(Object instance, FormatContext context) in D:\\a\\_work\\1\\s\\src\\Microsoft.DotNet.Interactive.Formatting\\TypeFormatter{T}.cs:line 23\r\n", " at Microsoft.DotNet.Interactive.Formatting.Formatter`1.FormatTo(T obj, FormatContext context, String mimeType) in D:\\a\\_work\\1\\s\\src\\Microsoft.DotNet.Interactive.Formatting\\Formatter{T}.cs:line 79\r\n", " at Microsoft.DotNet.Interactive.Formatting.Formatter.FormatTo[T](T obj, FormatContext context, String mimeType) in D:\\a\\_work\\1\\s\\src\\Microsoft.DotNet.Interactive.Formatting\\Formatter.cs:line 319\r\n", " at Microsoft.DotNet.Interactive.Formatting.Formatter.ToDisplayString(Object obj, String mimeType) in D:\\a\\_work\\1\\s\\src\\Microsoft.DotNet.Interactive.Formatting\\Formatter.cs:line 276\r\n", " at Microsoft.DotNet.Interactive.FormattedValue.<>c__DisplayClass12_0.b__0(String mimeType) in D:\\a\\_work\\1\\s\\src\\Microsoft.DotNet.Interactive\\FormattedValue.cs:line 49\r\n", " at System.Linq.Enumerable.ArraySelectIterator`2.ToArray()\r\n", " at Microsoft.DotNet.Interactive.FormattedValue.CreateManyFromObject(Object value, String[] mimeTypes) in D:\\a\\_work\\1\\s\\src\\Microsoft.DotNet.Interactive\\FormattedValue.cs:line 47\r\n", " at Microsoft.DotNet.Interactive.KernelInvocationContextExtensions.Display(KernelInvocationContext context, Object value, String[] mimeTypes) in D:\\a\\_work\\1\\s\\src\\Microsoft.DotNet.Interactive\\KernelInvocationContextExtensions.cs:line 22\r\n", " at BlazorInteractive.BlazorKernel.HandleAsync(SubmitCode command, KernelInvocationContext context)\r\n", " at Microsoft.DotNet.Interactive.Kernel.<>c__DisplayClass87_0`1.b__0(KernelCommand _, KernelInvocationContext context) in D:\\a\\_work\\1\\s\\src\\Microsoft.DotNet.Interactive\\Kernel.cs:line 998\r\n", " at Microsoft.DotNet.Interactive.Commands.KernelCommand.InvokeAsync(KernelInvocationContext context) in D:\\a\\_work\\1\\s\\src\\Microsoft.DotNet.Interactive\\Commands\\KernelCommand.cs:line 191\r\n", " at Microsoft.DotNet.Interactive.Kernel.HandleAsync(KernelCommand command, KernelInvocationContext context) in D:\\a\\_work\\1\\s\\src\\Microsoft.DotNet.Interactive\\Kernel.cs:line 365\r\n", " at Microsoft.DotNet.Interactive.KernelCommandPipeline.b__6_0(KernelCommand command, KernelInvocationContext context, KernelPipelineContinuation _) in D:\\a\\_work\\1\\s\\src\\Microsoft.DotNet.Interactive\\KernelCommandPipeline.cs:line 60\r\n", " at Microsoft.DotNet.Interactive.KernelCommandPipeline.SendAsync(KernelCommand command, KernelInvocationContext context) in D:\\a\\_work\\1\\s\\src\\Microsoft.DotNet.Interactive\\KernelCommandPipeline.cs:line 41" ] } ], "source": [ "#!blazor\n", "

Hello @name

\n", "\n", "@code {\n", " string name = \"Blazor\";\n", "}" ] } ], "metadata": { "kernelspec": { "display_name": ".NET (C#)", "language": "C#", "name": ".net-csharp" }, "language_info": { "name": "polyglot-notebook" }, "orig_nbformat": 4, "polyglot_notebook": { "kernelInfo": { "defaultKernelName": "csharp", "items": [ { "aliases": [], "name": "blazor" }, { "aliases": [], "name": "csharp" }, { "aliases": [], "name": "razor" } ] } } }, "nbformat": 4, "nbformat_minor": 2 }