You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
PolyglotNotebooksStudy/Docs/多语言笔记.3.2.交互式 Blazor.ipynb

142 lines
2.5 KiB
Plaintext

{
"cells": [
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"# 使用 Blazor 进行交互式展示"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"在笔记本中使用Blazor原生的没找到介绍和使用方法。但找到一大侠开发的扩展库-[BlazorInteractive](https://github.com/plbonneville/BlazorInteractive),使用前只要引入此nuget包即可。"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"## 添加 Nuget 包"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"dotnet_interactive": {
"language": "csharp"
},
"polyglot_notebook": {
"kernelName": "csharp"
}
},
"outputs": [],
"source": [
"// 可以先添加包源\n",
"#i \"nuget:https://api.nuget.org/v3/index.json\"\n",
"\n",
"#r \"nuget: BlazorInteractive\""
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"## 添加引用"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"dotnet_interactive": {
"language": "csharp"
},
"polyglot_notebook": {
"kernelName": "csharp"
}
},
"outputs": [],
"source": [
"#!blazor"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"## 示例"
]
},
{
"cell_type": "code",
"execution_count": 4,
"metadata": {
"dotnet_interactive": {
"language": "razor"
},
"polyglot_notebook": {
"kernelName": "razor"
}
},
"outputs": [
{
"data": {
"text/html": [
"<div id=\"blazorExtension9bf40ae7a29443869fb07f65d1118479\"><h1>Hello Blazor</h1></div>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"#!blazor\n",
"<h1>Hello @name</h1>\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
}