{
 "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
}