m-lamonaca/dev-notes
1
0
Fork 0
mirror of https://github.com/m-lamonaca/dev-notes.git synced 2025-04-10 12:56:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
dev-notes/languages/dotnet/asp.net/blazor.html

4632 lines
No EOL
124 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="author" content="Marcello Lamonaca">
<link rel="canonical" href="http://m-lamonaca.github.io/dev-notes/languages/dotnet/asp.net/blazor.html">
<link rel="prev" href="razor-syntax.html">
<link rel="next" href="signalr.html">
<link rel="icon" href="../../../assets/images/favicon.png">
<meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.5.34">
<title>Blazor - Dev Notes</title>
<link rel="stylesheet" href="../../../assets/stylesheets/main.35f28582.min.css">
<link rel="stylesheet" href="../../../assets/stylesheets/palette.06af60db.min.css">
<script src="https://unpkg.com/iframe-worker/shim"></script>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<script>__md_scope=new URL("../../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
<meta property="og:type" content="website" >
<meta property="og:title" content="Blazor - Dev Notes" >
<meta property="og:description" content="None" >
<meta property="og:image" content="http://m-lamonaca.github.io/dev-notes/assets/images/social/languages/dotnet/asp.net/blazor.png" >
<meta property="og:image:type" content="image/png" >
<meta property="og:image:width" content="1200" >
<meta property="og:image:height" content="630" >
<meta property="og:url" content="http://m-lamonaca.github.io/dev-notes/languages/dotnet/asp.net/blazor.html" >
<meta name="twitter:card" content="summary_large_image" >
<meta name="twitter:title" content="Blazor - Dev Notes" >
<meta name="twitter:description" content="None" >
<meta name="twitter:image" content="http://m-lamonaca.github.io/dev-notes/assets/images/social/languages/dotnet/asp.net/blazor.png" >
</head>
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="orange" data-md-color-accent="deep-orange">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#blazor" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header md-header--shadow md-header--lifted" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="../../../index.html" title="Dev Notes" class="md-header__button md-logo" aria-label="Dev Notes" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6m80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3l89.3 89.4-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3"/></svg>
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
Dev Notes
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Blazor
</span>
</div>
</div>
</div>
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="orange" data-md-color-accent="deep-orange" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_0">
<label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_1" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4m0 10a6 6 0 0 1-6-6 6 6 0 0 1 6-6 6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg>
</label>
<input class="md-option" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme="slate" data-md-color-primary="orange" data-md-color-accent="deep-orange" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_1">
<label class="md-header__button md-icon" title="Switch to light mode" for="__palette_0" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12s-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6a6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg>
</label>
</form>
<script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
</button>
</nav>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://github.com/m-lamonaca/dev-notes" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81"/></svg>
</div>
<div class="md-source__repository">
GitHub
</div>
</a>
</div>
</nav>
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
<div class="md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item">
<a href="../../../index.html" class="md-tabs__link">
Home
</a>
</li>
<li class="md-tabs__item">
<a href="../../../containers/docker.html" class="md-tabs__link">
Containers
</a>
</li>
<li class="md-tabs__item">
<a href="../../../databases/redis.html" class="md-tabs__link">
Databases
</a>
</li>
<li class="md-tabs__item md-tabs__item--active">
<a href="../../html/html.html" class="md-tabs__link">
Languages
</a>
</li>
<li class="md-tabs__item">
<a href="../../../misc/git.html" class="md-tabs__link">
Misc
</a>
</li>
<li class="md-tabs__item">
<a href="../../../linux/filesystem/file-links.html" class="md-tabs__link">
Linux
</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--lifted" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../../../index.html" title="Dev Notes" class="md-nav__button md-logo" aria-label="Dev Notes" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6m80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3l89.3 89.4-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3"/></svg>
</a>
Dev Notes
</label>
<div class="md-nav__source">
<a href="https://github.com/m-lamonaca/dev-notes" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81"/></svg>
</div>
<div class="md-source__repository">
GitHub
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../index.html" class="md-nav__link">
<span class="md-ellipsis">
Home
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" >
<label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0">
<span class="md-ellipsis">
Containers
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
Containers
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../containers/docker.html" class="md-nav__link">
<span class="md-ellipsis">
Docker
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../containers/kubernetes.html" class="md-nav__link">
<span class="md-ellipsis">
Kubernetes
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" >
<label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="0">
<span class="md-ellipsis">
Databases
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3">
<span class="md-nav__icon md-icon"></span>
Databases
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../databases/redis.html" class="md-nav__link">
<span class="md-ellipsis">
Redis
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../databases/sql.html" class="md-nav__link">
<span class="md-ellipsis">
SQL
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../databases/mongo-db.html" class="md-nav__link">
<span class="md-ellipsis">
MongoDB
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" checked>
<label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="">
<span class="md-ellipsis">
Languages
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
Languages
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../html/html.html" class="md-nav__link">
<span class="md-ellipsis">
HTML
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../markdown.html" class="md-nav__link">
<span class="md-ellipsis">
Markdown
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../css/css.html" class="md-nav__link">
<span class="md-ellipsis">
CSS
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../c/c.html" class="md-nav__link">
<span class="md-ellipsis">
C
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../kotlin/kotlin.html" class="md-nav__link">
<span class="md-ellipsis">
Kotlin
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../swift/swift.html" class="md-nav__link">
<span class="md-ellipsis">
Swift
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_7" >
<label class="md-nav__link" for="__nav_4_7" id="__nav_4_7_label" tabindex="">
<span class="md-ellipsis">
Assembly
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_7_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_7">
<span class="md-nav__icon md-icon"></span>
Assembly
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../assembly/intel.html" class="md-nav__link">
<span class="md-ellipsis">
Intel
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../assembly/riscv.html" class="md-nav__link">
<span class="md-ellipsis">
RISC-V
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_8" >
<label class="md-nav__link" for="__nav_4_8" id="__nav_4_8_label" tabindex="">
<span class="md-ellipsis">
Python
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_8_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_8">
<span class="md-nav__icon md-icon"></span>
Python
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../python/python.html" class="md-nav__link">
<span class="md-ellipsis">
Python
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_8_2" >
<label class="md-nav__link" for="__nav_4_8_2" id="__nav_4_8_2_label" tabindex="0">
<span class="md-ellipsis">
Modules
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_8_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_8_2">
<span class="md-nav__icon md-icon"></span>
Modules
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../python/modules/argparse.html" class="md-nav__link">
<span class="md-ellipsis">
argparse
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../python/modules/collections.html" class="md-nav__link">
<span class="md-ellipsis">
collection
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../python/modules/csv.html" class="md-nav__link">
<span class="md-ellipsis">
csv
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../python/modules/ftplib.html" class="md-nav__link">
<span class="md-ellipsis">
ftplib
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../python/modules/itertools.html" class="md-nav__link">
<span class="md-ellipsis">
itertools
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../python/modules/json.html" class="md-nav__link">
<span class="md-ellipsis">
json
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../python/modules/logging.html" class="md-nav__link">
<span class="md-ellipsis">
logging
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../python/modules/shutil.html" class="md-nav__link">
<span class="md-ellipsis">
shutil
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../python/modules/smtplib.html" class="md-nav__link">
<span class="md-ellipsis">
smtplib
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../python/modules/socket.html" class="md-nav__link">
<span class="md-ellipsis">
socket
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../python/modules/sqlite.html" class="md-nav__link">
<span class="md-ellipsis">
sqlite
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../python/modules/time-datetime.html" class="md-nav__link">
<span class="md-ellipsis">
time & datetime
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../python/modules/unittest.html" class="md-nav__link">
<span class="md-ellipsis">
unittest
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_8_3" >
<label class="md-nav__link" for="__nav_4_8_3" id="__nav_4_8_3_label" tabindex="0">
<span class="md-ellipsis">
Libraries
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_8_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_8_3">
<span class="md-nav__icon md-icon"></span>
Libraries
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../python/libs/tkinter.html" class="md-nav__link">
<span class="md-ellipsis">
TKinter
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../python/libs/numpy.html" class="md-nav__link">
<span class="md-ellipsis">
Numpy
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../python/libs/pandas.html" class="md-nav__link">
<span class="md-ellipsis">
Pandas
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../python/libs/seaborn.html" class="md-nav__link">
<span class="md-ellipsis">
Seaborn
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../python/libs/requests.html" class="md-nav__link">
<span class="md-ellipsis">
Requests
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../python/libs/beautiful-soup.html" class="md-nav__link">
<span class="md-ellipsis">
Beatiful Soup
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_9" checked>
<label class="md-nav__link" for="__nav_4_9" id="__nav_4_9_label" tabindex="">
<span class="md-ellipsis">
.NET
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_9_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_4_9">
<span class="md-nav__icon md-icon"></span>
.NET
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_9_1" >
<label class="md-nav__link" for="__nav_4_9_1" id="__nav_4_9_1_label" tabindex="0">
<span class="md-ellipsis">
C#
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_9_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_9_1">
<span class="md-nav__icon md-icon"></span>
C#
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../csharp/csharp.html" class="md-nav__link">
<span class="md-ellipsis">
C#
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../csharp/linq.html" class="md-nav__link">
<span class="md-ellipsis">
Linq
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../csharp/collections.html" class="md-nav__link">
<span class="md-ellipsis">
Collections
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../csharp/reactive-extensions.html" class="md-nav__link">
<span class="md-ellipsis">
Reactive Extensions
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../csharp/async-programming.html" class="md-nav__link">
<span class="md-ellipsis">
Async Programming
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../csharp/unit-tests.html" class="md-nav__link">
<span class="md-ellipsis">
Unit Tests
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_9_2" checked>
<label class="md-nav__link" for="__nav_4_9_2" id="__nav_4_9_2_label" tabindex="0">
<span class="md-ellipsis">
ASP.NET
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_9_2_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_4_9_2">
<span class="md-nav__icon md-icon"></span>
ASP.NET
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="minimal-api.html" class="md-nav__link">
<span class="md-ellipsis">
Minimal API
</span>
</a>
</li>
<li class="md-nav__item">
<a href="filters.html" class="md-nav__link">
<span class="md-ellipsis">
FIlters
</span>
</a>
</li>
<li class="md-nav__item">
<a href="middleware.html" class="md-nav__link">
<span class="md-ellipsis">
Middleware
</span>
</a>
</li>
<li class="md-nav__item">
<a href="razor-syntax.html" class="md-nav__link">
<span class="md-ellipsis">
Razor Syntax
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
Blazor
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="blazor.html" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Blazor
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#components-razor" class="md-nav__link">
<span class="md-ellipsis">
Components (.razor)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#state-management" class="md-nav__link">
<span class="md-ellipsis">
State Management
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#passing-state-with-navigationmanager" class="md-nav__link">
<span class="md-ellipsis">
Passing state with NavigationManager
</span>
</a>
<nav class="md-nav" aria-label="Passing state with NavigationManager">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#blazor-wasm" class="md-nav__link">
<span class="md-ellipsis">
Blazor WASM
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#data-binding-events" class="md-nav__link">
<span class="md-ellipsis">
Data Binding &amp; Events
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascriptnet-interop" class="md-nav__link">
<span class="md-ellipsis">
Javascript/.NET Interop
</span>
</a>
<nav class="md-nav" aria-label="Javascript/.NET Interop">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#render-blazor-components-from-javascript" class="md-nav__link">
<span class="md-ellipsis">
Render Blazor components from JavaScript
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#blazor-custom-elements" class="md-nav__link">
<span class="md-ellipsis">
Blazor custom elements
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="signalr.html" class="md-nav__link">
<span class="md-ellipsis">
SignalR
</span>
</a>
</li>
<li class="md-nav__item">
<a href="web-forms.html" class="md-nav__link">
<span class="md-ellipsis">
Web Forms
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_9_3" >
<label class="md-nav__link" for="__nav_4_9_3" id="__nav_4_9_3_label" tabindex="0">
<span class="md-ellipsis">
Database
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_9_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_9_3">
<span class="md-nav__icon md-icon"></span>
Database
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../database/ado.net.html" class="md-nav__link">
<span class="md-ellipsis">
ADO.NET
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../database/entity-framework.html" class="md-nav__link">
<span class="md-ellipsis">
Entity Framework
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_10" >
<label class="md-nav__link" for="__nav_4_10" id="__nav_4_10_label" tabindex="">
<span class="md-ellipsis">
Java
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_10_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_10">
<span class="md-nav__icon md-icon"></span>
Java
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../java/java.html" class="md-nav__link">
<span class="md-ellipsis">
Java
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../java/java-collection-framework.html" class="md-nav__link">
<span class="md-ellipsis">
Java Collection Framework
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../java/dao.html" class="md-nav__link">
<span class="md-ellipsis">
DAO
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_10_4" >
<label class="md-nav__link" for="__nav_4_10_4" id="__nav_4_10_4_label" tabindex="0">
<span class="md-ellipsis">
Web
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_10_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_10_4">
<span class="md-nav__icon md-icon"></span>
Web
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../java/web/servlet.html" class="md-nav__link">
<span class="md-ellipsis">
Serverlet
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_10_4_2" >
<label class="md-nav__link" for="__nav_4_10_4_2" id="__nav_4_10_4_2_label" tabindex="0">
<span class="md-ellipsis">
Spring
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="4" aria-labelledby="__nav_4_10_4_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_10_4_2">
<span class="md-nav__icon md-icon"></span>
Spring
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../java/spring/pom.xml.html" class="md-nav__link">
<span class="md-ellipsis">
POM
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../java/spring/spring-project.html" class="md-nav__link">
<span class="md-ellipsis">
Project Structure
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_11" >
<label class="md-nav__link" for="__nav_4_11" id="__nav_4_11_label" tabindex="">
<span class="md-ellipsis">
PHP
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_11_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_11">
<span class="md-nav__icon md-icon"></span>
PHP
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../php/php.html" class="md-nav__link">
<span class="md-ellipsis">
PHP
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../php/database.html" class="md-nav__link">
<span class="md-ellipsis">
Database
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../php/web.html" class="md-nav__link">
<span class="md-ellipsis">
Web
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../php/dependency-injection.html" class="md-nav__link">
<span class="md-ellipsis">
Dependency Injection
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../php/unit-tests.html" class="md-nav__link">
<span class="md-ellipsis">
Unit Tests
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../php/composer.html" class="md-nav__link">
<span class="md-ellipsis">
Composer
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../php/psr-7.html" class="md-nav__link">
<span class="md-ellipsis">
PSR 7
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../php/plates-templating.html" class="md-nav__link">
<span class="md-ellipsis">
Plates
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_11_9" >
<label class="md-nav__link" for="__nav_4_11_9" id="__nav_4_11_9_label" tabindex="0">
<span class="md-ellipsis">
Simple MVC
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_11_9_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_11_9">
<span class="md-nav__icon md-icon"></span>
Simple MVC
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../php/simple-mvc/simple-mvc.html" class="md-nav__link">
<span class="md-ellipsis">
Simple MVC
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../php/simple-mvc/rest-api.html" class="md-nav__link">
<span class="md-ellipsis">
REST API
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_12" >
<label class="md-nav__link" for="__nav_4_12" id="__nav_4_12_label" tabindex="">
<span class="md-ellipsis">
Rust
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_12_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_12">
<span class="md-nav__icon md-icon"></span>
Rust
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../rust/rust.html" class="md-nav__link">
<span class="md-ellipsis">
Rust
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../rust/macros.html" class="md-nav__link">
<span class="md-ellipsis">
Macros
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../rust/cargo.html" class="md-nav__link">
<span class="md-ellipsis">
Cargo
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../rust/concurrency.html" class="md-nav__link">
<span class="md-ellipsis">
Concurrency
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../rust/unit-tests.html" class="md-nav__link">
<span class="md-ellipsis">
Unit Tests
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_13" >
<label class="md-nav__link" for="__nav_4_13" id="__nav_4_13_label" tabindex="">
<span class="md-ellipsis">
Javascript
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_13_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_13">
<span class="md-nav__icon md-icon"></span>
Javascript
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../javascript/javascript.html" class="md-nav__link">
<span class="md-ellipsis">
Javascript
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../javascript/dom.html" class="md-nav__link">
<span class="md-ellipsis">
DOM
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../javascript/events-animation.html" class="md-nav__link">
<span class="md-ellipsis">
Events & Animation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../javascript/ajax.html" class="md-nav__link">
<span class="md-ellipsis">
AJAX
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../javascript/jquery.html" class="md-nav__link">
<span class="md-ellipsis">
jQuery
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_13_6" >
<label class="md-nav__link" for="__nav_4_13_6" id="__nav_4_13_6_label" tabindex="0">
<span class="md-ellipsis">
React
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_13_6_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_13_6">
<span class="md-nav__icon md-icon"></span>
React
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../javascript/react/react.html" class="md-nav__link">
<span class="md-ellipsis">
React
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../javascript/react/react-router.html" class="md-nav__link">
<span class="md-ellipsis">
React Router
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../javascript/react/react-tests.html" class="md-nav__link">
<span class="md-ellipsis">
React Tests
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../javascript/react/redux.html" class="md-nav__link">
<span class="md-ellipsis">
Redux
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../javascript/react/redux-tests.html" class="md-nav__link">
<span class="md-ellipsis">
Redux Tests
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../javascript/svelte/svelte.html" class="md-nav__link">
<span class="md-ellipsis">
Svelte
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_14" >
<label class="md-nav__link" for="__nav_4_14" id="__nav_4_14_label" tabindex="">
<span class="md-ellipsis">
PowerShell
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_14_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_14">
<span class="md-nav__icon md-icon"></span>
PowerShell
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../powershell/scripting.html" class="md-nav__link">
<span class="md-ellipsis">
Scripting
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../powershell/commands.html" class="md-nav__link">
<span class="md-ellipsis">
Commands
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_15" >
<label class="md-nav__link" for="__nav_4_15" id="__nav_4_15_label" tabindex="">
<span class="md-ellipsis">
Bash
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_15_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_15">
<span class="md-nav__icon md-icon"></span>
Bash
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../bash/scripting.html" class="md-nav__link">
<span class="md-ellipsis">
Scripting
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../bash/commands.html" class="md-nav__link">
<span class="md-ellipsis">
Commands
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" >
<label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="0">
<span class="md-ellipsis">
Misc
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5">
<span class="md-nav__icon md-icon"></span>
Misc
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../misc/git.html" class="md-nav__link">
<span class="md-ellipsis">
Git
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../misc/graph-ql.html" class="md-nav__link">
<span class="md-ellipsis">
GraphQL
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../misc/regular-expressions.html" class="md-nav__link">
<span class="md-ellipsis">
RegEx
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../misc/ssh.html" class="md-nav__link">
<span class="md-ellipsis">
SSH
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../misc/web-components.html" class="md-nav__link">
<span class="md-ellipsis">
WebComponents
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6" >
<label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="0">
<span class="md-ellipsis">
Linux
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6">
<span class="md-nav__icon md-icon"></span>
Linux
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_1" >
<label class="md-nav__link" for="__nav_6_1" id="__nav_6_1_label" tabindex="0">
<span class="md-ellipsis">
Filesystem
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6_1">
<span class="md-nav__icon md-icon"></span>
Filesystem
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../linux/filesystem/file-links.html" class="md-nav__link">
<span class="md-ellipsis">
File Links
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../linux/filesystem/procfs.html" class="md-nav__link">
<span class="md-ellipsis">
/proc
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../linux/filesystem/sysfs.html" class="md-nav__link">
<span class="md-ellipsis">
/sys
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_2" >
<label class="md-nav__link" for="__nav_6_2" id="__nav_6_2_label" tabindex="0">
<span class="md-ellipsis">
System Init
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6_2">
<span class="md-nav__icon md-icon"></span>
System Init
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../linux/init/systemd.html" class="md-nav__link">
<span class="md-ellipsis">
Systemd
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../linux/init/open-rc.html" class="md-nav__link">
<span class="md-ellipsis">
OpenRC
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#components-razor" class="md-nav__link">
<span class="md-ellipsis">
Components (.razor)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#state-management" class="md-nav__link">
<span class="md-ellipsis">
State Management
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#passing-state-with-navigationmanager" class="md-nav__link">
<span class="md-ellipsis">
Passing state with NavigationManager
</span>
</a>
<nav class="md-nav" aria-label="Passing state with NavigationManager">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#blazor-wasm" class="md-nav__link">
<span class="md-ellipsis">
Blazor WASM
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#data-binding-events" class="md-nav__link">
<span class="md-ellipsis">
Data Binding &amp; Events
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#javascriptnet-interop" class="md-nav__link">
<span class="md-ellipsis">
Javascript/.NET Interop
</span>
</a>
<nav class="md-nav" aria-label="Javascript/.NET Interop">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#render-blazor-components-from-javascript" class="md-nav__link">
<span class="md-ellipsis">
Render Blazor components from JavaScript
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#blazor-custom-elements" class="md-nav__link">
<span class="md-ellipsis">
Blazor custom elements
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<h1 id="blazor">Blazor</h1>
<p>Blazor apps are based on <em>components</em>. A <strong>component</strong> in Blazor is an element of UI, such as a page, dialog, or data entry form.</p>
<p>Components are .NET C# classes built into .NET assemblies that:</p>
<ul>
<li>Define flexible UI rendering logic.</li>
<li>Handle user events.</li>
<li>Can be nested and reused.</li>
<li>Can be shared and distributed as Razor class libraries or NuGet packages.</li>
</ul>
<p><img alt="Blazor Server Architecture" src="../../../img/dotnet_blazor-server.avif" />
<img alt="Blazor WASM Architecture" src="../../../img/dotnet_blazor-webassembly.avif" /></p>
<p>The component class is usually written in the form of a Razor markup page with a <code>.razor</code> file extension. Components in Blazor are formally referred to as <em>Razor components</em>.</p>
<h2 id="components-razor">Components (<code>.razor</code>)</h2>
<p><a href="https://docs.microsoft.com/en-us/aspnet/core/blazor/components/">Blazor Components</a></p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">C#</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-0-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-0-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-0-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-0-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-0-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-0-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-0-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-0-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-0-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-0-10">10</a></span>
<span class="normal"><a href="#__codelineno-0-11">11</a></span>
<span class="normal"><a href="#__codelineno-0-12">12</a></span>
<span class="normal"><a href="#__codelineno-0-13">13</a></span>
<span class="normal"><a href="#__codelineno-0-14">14</a></span>
<span class="normal"><a href="#__codelineno-0-15">15</a></span>
<span class="normal"><a href="#__codelineno-0-16">16</a></span>
<span class="normal"><a href="#__codelineno-0-17">17</a></span>
<span class="normal"><a href="#__codelineno-0-18">18</a></span>
<span class="normal"><a href="#__codelineno-0-19">19</a></span>
<span class="normal"><a href="#__codelineno-0-20">20</a></span>
<span class="normal"><a href="#__codelineno-0-21">21</a></span>
<span class="normal"><a href="#__codelineno-0-22">22</a></span>
<span class="normal"><a href="#__codelineno-0-23">23</a></span>
<span class="normal"><a href="#__codelineno-0-24">24</a></span>
<span class="normal"><a href="#__codelineno-0-25">25</a></span>
<span class="normal"><a href="#__codelineno-0-26">26</a></span>
<span class="normal"><a href="#__codelineno-0-27">27</a></span>
<span class="normal"><a href="#__codelineno-0-28">28</a></span>
<span class="normal"><a href="#__codelineno-0-29">29</a></span>
<span class="normal"><a href="#__codelineno-0-30">30</a></span>
<span class="normal"><a href="#__codelineno-0-31">31</a></span>
<span class="normal"><a href="#__codelineno-0-32">32</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1"></a><span class="n">@page</span><span class="w"> </span><span class="s">&quot;/route/{RouteParameter}&quot;</span><span class="w"> </span><span class="c1">// make component accessible from a URL</span>
<a id="__codelineno-0-2" name="__codelineno-0-2"></a><span class="n">@page</span><span class="w"> </span><span class="s">&quot;/route/{RouteParameter?}&quot;</span><span class="w"> </span><span class="c1">// specify route parameter as optional</span>
<a id="__codelineno-0-3" name="__codelineno-0-3"></a><span class="n">@page</span><span class="w"> </span><span class="s">&quot;/route/{RouteParameter:&lt;type&gt;}&quot;</span><span class="w"> </span><span class="c1">// specify route parameter type</span>
<a id="__codelineno-0-4" name="__codelineno-0-4"></a>
<a id="__codelineno-0-5" name="__codelineno-0-5"></a><span class="n">@namespace</span><span class="w"> </span><span class="o">&lt;</span><span class="n">Namespace</span><span class="o">&gt;</span><span class="w"> </span><span class="c1">// set the component namespace</span>
<a id="__codelineno-0-6" name="__codelineno-0-6"></a><span class="n">@using</span><span class="w"> </span><span class="o">&lt;</span><span class="n">Namespace</span><span class="o">&gt;</span><span class="w"> </span><span class="c1">// using statement</span>
<a id="__codelineno-0-7" name="__codelineno-0-7"></a><span class="n">@inherits</span><span class="w"> </span><span class="n">BaseType</span><span class="w"> </span><span class="c1">// inheritance</span>
<a id="__codelineno-0-8" name="__codelineno-0-8"></a><span class="n">@attribute</span><span class="w"> </span><span class="p">[</span><span class="n">Attribute</span><span class="p">]</span><span class="w"> </span><span class="c1">// apply an attribute</span>
<a id="__codelineno-0-9" name="__codelineno-0-9"></a><span class="n">@inject</span><span class="w"> </span><span class="n">Type</span><span class="w"> </span><span class="n">objectName</span><span class="w"> </span><span class="c1">// dependency injection</span>
<a id="__codelineno-0-10" name="__codelineno-0-10"></a>
<a id="__codelineno-0-11" name="__codelineno-0-11"></a><span class="c1">// html of the page here</span>
<a id="__codelineno-0-12" name="__codelineno-0-12"></a>
<a id="__codelineno-0-13" name="__codelineno-0-13"></a><span class="o">&lt;</span><span class="n">Namespace</span><span class="p">.</span><span class="n">ComponentFolder</span><span class="p">.</span><span class="n">Component</span><span class="w"> </span><span class="o">/&gt;</span><span class="w"> </span><span class="c1">// access component w/o @using</span>
<a id="__codelineno-0-14" name="__codelineno-0-14"></a><span class="o">&lt;</span><span class="n">Component</span><span class="w"> </span><span class="n">Property</span><span class="o">=</span><span class="s">&quot;value&quot;</span><span class="o">/&gt;</span><span class="w"> </span><span class="c1">// insert component into page, passing attributes</span>
<a id="__codelineno-0-15" name="__codelineno-0-15"></a><span class="o">&lt;</span><span class="n">Component</span><span class="w"> </span><span class="n">@onclick</span><span class="o">=</span><span class="s">&quot;@CallbackMethod&quot;</span><span class="o">&gt;</span>
<a id="__codelineno-0-16" name="__codelineno-0-16"></a><span class="w"> </span><span class="n">@ChildContent</span><span class="w"> </span><span class="c1">// segment of UI content</span>
<a id="__codelineno-0-17" name="__codelineno-0-17"></a><span class="o">&lt;/</span><span class="n">Component</span><span class="o">&gt;</span>
<a id="__codelineno-0-18" name="__codelineno-0-18"></a>
<a id="__codelineno-0-19" name="__codelineno-0-19"></a><span class="n">@code</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-20" name="__codelineno-0-20"></a><span class="w"> </span><span class="c1">// component model (Properties, Methods, ...)</span>
<a id="__codelineno-0-21" name="__codelineno-0-21"></a>
<a id="__codelineno-0-22" name="__codelineno-0-22"></a><span class="w"> </span><span class="na">[Parameter]</span><span class="w"> </span><span class="c1">// capture attribute </span>
<a id="__codelineno-0-23" name="__codelineno-0-23"></a><span class="w"> </span><span class="k">public</span><span class="w"> </span><span class="n">Type</span><span class="w"> </span><span class="n">Property</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">get</span><span class="p">;</span><span class="w"> </span><span class="k">set</span><span class="p">;</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">defaultValue</span><span class="p">;</span>
<a id="__codelineno-0-24" name="__codelineno-0-24"></a>
<a id="__codelineno-0-25" name="__codelineno-0-25"></a><span class="w"> </span><span class="na">[Parameter]</span><span class="w"> </span><span class="c1">// capture route parameters</span>
<a id="__codelineno-0-26" name="__codelineno-0-26"></a><span class="w"> </span><span class="k">public</span><span class="w"> </span><span class="n">type</span><span class="w"> </span><span class="n">RouteParameter</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">get</span><span class="p">;</span><span class="w"> </span><span class="k">set</span><span class="p">;}</span>
<a id="__codelineno-0-27" name="__codelineno-0-27"></a>
<a id="__codelineno-0-28" name="__codelineno-0-28"></a><span class="w"> </span><span class="na">[Parameter]</span><span class="w"> </span><span class="c1">// segment of UI content</span>
<a id="__codelineno-0-29" name="__codelineno-0-29"></a><span class="w"> </span><span class="k">public</span><span class="w"> </span><span class="n">RenderFragment</span><span class="w"> </span><span class="n">ChildContent</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">get</span><span class="p">;</span><span class="w"> </span><span class="k">set</span><span class="p">;}</span>
<a id="__codelineno-0-30" name="__codelineno-0-30"></a>
<a id="__codelineno-0-31" name="__codelineno-0-31"></a><span class="w"> </span><span class="k">private</span><span class="w"> </span><span class="k">void</span><span class="w"> </span><span class="nf">CallbackMethod</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-0-32" name="__codelineno-0-32"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h2 id="state-management">State Management</h2>
<h2 id="passing-state-with-navigationmanager">Passing state with <code>NavigationManager</code></h2>
<p>It's now possible to pass state when navigating in Blazor apps using the <code>NavigationManager</code>.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">C#</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-1-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-1-1" name="__codelineno-1-1"></a><span class="n">navigationManager</span><span class="p">.</span><span class="n">NavigateTo</span><span class="p">(</span><span class="s">&quot;/&lt;route&gt;&quot;</span><span class="p">,</span><span class="w"> </span><span class="k">new</span><span class="w"> </span><span class="n">NavigationOptions</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="n">HistoryEntryState</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">value</span><span class="w"> </span><span class="p">});</span>
</code></pre></div></td></tr></table></div>
<p>This mechanism allows for simple communication between different pages. The specified state is pushed onto the browser’s history stack so that it can be accessed later using either the <code>NavigationManager.HistoryEntryState</code> property or the <code>LocationChangedEventArgs.HistoryEntryState</code> property when listening for location changed events.</p>
<h3 id="blazor-wasm">Blazor WASM</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">C#</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-2-1">1</a></span>
<span class="normal"><a href="#__codelineno-2-2">2</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-2-1" name="__codelineno-2-1"></a><span class="c1">// setup state singleton</span>
<a id="__codelineno-2-2" name="__codelineno-2-2"></a><span class="n">builder</span><span class="p">.</span><span class="n">Services</span><span class="p">.</span><span class="n">AddSingleton</span><span class="o">&lt;</span><span class="n">StateContainer</span><span class="o">&gt;</span><span class="p">();</span>
</code></pre></div></td></tr></table></div>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">C#</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-3-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-3-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-3-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-3-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-3-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-3-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-3-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-3-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-3-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-3-10">10</a></span>
<span class="normal"><a href="#__codelineno-3-11">11</a></span>
<span class="normal"><a href="#__codelineno-3-12">12</a></span>
<span class="normal"><a href="#__codelineno-3-13">13</a></span>
<span class="normal"><a href="#__codelineno-3-14">14</a></span>
<span class="normal"><a href="#__codelineno-3-15">15</a></span>
<span class="normal"><a href="#__codelineno-3-16">16</a></span>
<span class="normal"><a href="#__codelineno-3-17">17</a></span>
<span class="normal"><a href="#__codelineno-3-18">18</a></span>
<span class="normal"><a href="#__codelineno-3-19">19</a></span>
<span class="normal"><a href="#__codelineno-3-20">20</a></span>
<span class="normal"><a href="#__codelineno-3-21">21</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-3-1" name="__codelineno-3-1"></a><span class="c1">// StateContainer singleton</span>
<a id="__codelineno-3-2" name="__codelineno-3-2"></a><span class="k">using</span><span class="w"> </span><span class="nn">System</span><span class="p">;</span>
<a id="__codelineno-3-3" name="__codelineno-3-3"></a>
<a id="__codelineno-3-4" name="__codelineno-3-4"></a><span class="k">public</span><span class="w"> </span><span class="k">class</span><span class="w"> </span><span class="nc">StateContainer</span>
<a id="__codelineno-3-5" name="__codelineno-3-5"></a><span class="p">{</span>
<a id="__codelineno-3-6" name="__codelineno-3-6"></a><span class="w"> </span><span class="k">private</span><span class="w"> </span><span class="kt">int</span><span class="w"> </span><span class="n">_counter</span><span class="p">;</span>
<a id="__codelineno-3-7" name="__codelineno-3-7"></a>
<a id="__codelineno-3-8" name="__codelineno-3-8"></a><span class="w"> </span><span class="k">public</span><span class="w"> </span><span class="kt">string</span><span class="w"> </span><span class="n">Property</span>
<a id="__codelineno-3-9" name="__codelineno-3-9"></a><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-10" name="__codelineno-3-10"></a><span class="w"> </span><span class="k">get</span><span class="w"> </span><span class="o">=&gt;</span><span class="w"> </span><span class="n">_counter</span><span class="p">;</span>
<a id="__codelineno-3-11" name="__codelineno-3-11"></a><span class="w"> </span><span class="k">set</span>
<a id="__codelineno-3-12" name="__codelineno-3-12"></a><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-13" name="__codelineno-3-13"></a><span class="w"> </span><span class="n">_counter</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">value</span><span class="p">;</span>
<a id="__codelineno-3-14" name="__codelineno-3-14"></a><span class="w"> </span><span class="n">NotifyStateChanged</span><span class="p">();</span><span class="w"> </span><span class="c1">// will trigger StateHasChanged(), causing a render </span>
<a id="__codelineno-3-15" name="__codelineno-3-15"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-3-16" name="__codelineno-3-16"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-3-17" name="__codelineno-3-17"></a>
<a id="__codelineno-3-18" name="__codelineno-3-18"></a><span class="w"> </span><span class="k">public</span><span class="w"> </span><span class="k">event</span><span class="w"> </span><span class="n">Action</span><span class="w"> </span><span class="n">OnChange</span><span class="p">;</span>
<a id="__codelineno-3-19" name="__codelineno-3-19"></a>
<a id="__codelineno-3-20" name="__codelineno-3-20"></a><span class="w"> </span><span class="k">private</span><span class="w"> </span><span class="k">void</span><span class="w"> </span><span class="nf">NotifyStateChanged</span><span class="p">()</span><span class="w"> </span><span class="o">=&gt;</span><span class="w"> </span><span class="n">OnChange</span><span class="o">?.</span><span class="n">Invoke</span><span class="p">();</span>
<a id="__codelineno-3-21" name="__codelineno-3-21"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">C#</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-4-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-4-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-4-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-4-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-4-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-4-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-4-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-4-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-4-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-4-10">10</a></span>
<span class="normal"><a href="#__codelineno-4-11">11</a></span>
<span class="normal"><a href="#__codelineno-4-12">12</a></span>
<span class="normal"><a href="#__codelineno-4-13">13</a></span>
<span class="normal"><a href="#__codelineno-4-14">14</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-4-1" name="__codelineno-4-1"></a><span class="c1">// component that changes the state</span>
<a id="__codelineno-4-2" name="__codelineno-4-2"></a><span class="n">@inject</span><span class="w"> </span><span class="n">StateContainer</span><span class="w"> </span><span class="n">State</span>
<a id="__codelineno-4-3" name="__codelineno-4-3"></a>
<a id="__codelineno-4-4" name="__codelineno-4-4"></a><span class="c1">// Delegate event handlers automatically trigger a UI render</span>
<a id="__codelineno-4-5" name="__codelineno-4-5"></a><span class="o">&lt;</span><span class="n">button</span><span class="w"> </span><span class="n">@onClick</span><span class="o">=</span><span class="s">&quot;@HandleClick&quot;</span><span class="o">&gt;</span>
<a id="__codelineno-4-6" name="__codelineno-4-6"></a><span class="w"> </span><span class="n">Change</span><span class="w"> </span><span class="n">State</span>
<a id="__codelineno-4-7" name="__codelineno-4-7"></a><span class="o">&lt;/</span><span class="n">button</span><span class="o">&gt;</span>
<a id="__codelineno-4-8" name="__codelineno-4-8"></a>
<a id="__codelineno-4-9" name="__codelineno-4-9"></a><span class="n">@code</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-4-10" name="__codelineno-4-10"></a><span class="w"> </span><span class="k">private</span><span class="w"> </span><span class="k">void</span><span class="w"> </span><span class="nf">HandleClick</span><span class="p">()</span>
<a id="__codelineno-4-11" name="__codelineno-4-11"></a><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-4-12" name="__codelineno-4-12"></a><span class="w"> </span><span class="n">State</span><span class="p">.</span><span class="n">Property</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="m">1</span><span class="p">;</span><span class="w"> </span><span class="c1">// update state</span>
<a id="__codelineno-4-13" name="__codelineno-4-13"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-4-14" name="__codelineno-4-14"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">C#</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-5-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-5-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-5-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-5-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-5-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-5-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-5-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-5-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-5-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-5-10">10</a></span>
<span class="normal"><a href="#__codelineno-5-11">11</a></span>
<span class="normal"><a href="#__codelineno-5-12">12</a></span>
<span class="normal"><a href="#__codelineno-5-13">13</a></span>
<span class="normal"><a href="#__codelineno-5-14">14</a></span>
<span class="normal"><a href="#__codelineno-5-15">15</a></span>
<span class="normal"><a href="#__codelineno-5-16">16</a></span>
<span class="normal"><a href="#__codelineno-5-17">17</a></span>
<span class="normal"><a href="#__codelineno-5-18">18</a></span>
<span class="normal"><a href="#__codelineno-5-19">19</a></span>
<span class="normal"><a href="#__codelineno-5-20">20</a></span>
<span class="normal"><a href="#__codelineno-5-21">21</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-5-1" name="__codelineno-5-1"></a><span class="c1">// component that should be update on state change</span>
<a id="__codelineno-5-2" name="__codelineno-5-2"></a><span class="n">@implements</span><span class="w"> </span><span class="n">IDisposable</span>
<a id="__codelineno-5-3" name="__codelineno-5-3"></a><span class="n">@inject</span><span class="w"> </span><span class="n">StateContainer</span><span class="w"> </span><span class="n">State</span>
<a id="__codelineno-5-4" name="__codelineno-5-4"></a>
<a id="__codelineno-5-5" name="__codelineno-5-5"></a><span class="o">&lt;</span><span class="n">p</span><span class="o">&gt;</span><span class="n">Property</span><span class="p">:</span><span class="w"> </span><span class="o">&lt;</span><span class="n">b</span><span class="o">&gt;</span><span class="n">@State</span><span class="p">.</span><span class="n">Property</span><span class="o">&lt;/</span><span class="n">b</span><span class="o">&gt;&lt;/</span><span class="n">p</span><span class="o">&gt;</span>
<a id="__codelineno-5-6" name="__codelineno-5-6"></a>
<a id="__codelineno-5-7" name="__codelineno-5-7"></a><span class="n">@code</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-5-8" name="__codelineno-5-8"></a>
<a id="__codelineno-5-9" name="__codelineno-5-9"></a><span class="w"> </span><span class="c1">// StateHasChanged notifies the component that its state has changed. </span>
<a id="__codelineno-5-10" name="__codelineno-5-10"></a><span class="w"> </span><span class="c1">// When applicable, calling StateHasChanged causes the component to be rerendered.</span>
<a id="__codelineno-5-11" name="__codelineno-5-11"></a>
<a id="__codelineno-5-12" name="__codelineno-5-12"></a><span class="w"> </span><span class="k">protected</span><span class="w"> </span><span class="k">override</span><span class="w"> </span><span class="k">void</span><span class="w"> </span><span class="nf">OnInitialized</span><span class="p">()</span>
<a id="__codelineno-5-13" name="__codelineno-5-13"></a><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-5-14" name="__codelineno-5-14"></a><span class="w"> </span><span class="n">State</span><span class="p">.</span><span class="n">OnChange</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="n">StateHasChanged</span><span class="p">;</span>
<a id="__codelineno-5-15" name="__codelineno-5-15"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-5-16" name="__codelineno-5-16"></a>
<a id="__codelineno-5-17" name="__codelineno-5-17"></a><span class="w"> </span><span class="k">public</span><span class="w"> </span><span class="k">void</span><span class="w"> </span><span class="nf">Dispose</span><span class="p">()</span>
<a id="__codelineno-5-18" name="__codelineno-5-18"></a><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-5-19" name="__codelineno-5-19"></a><span class="w"> </span><span class="n">State</span><span class="p">.</span><span class="n">OnChange</span><span class="w"> </span><span class="o">-=</span><span class="w"> </span><span class="n">StateHasChanged</span><span class="p">;</span>
<a id="__codelineno-5-20" name="__codelineno-5-20"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-5-21" name="__codelineno-5-21"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h2 id="data-binding-events">Data Binding &amp; Events</h2>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">C#</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-6-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-6-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-6-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-6-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-6-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-6-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-6-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-6-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-6-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-6-10">10</a></span>
<span class="normal"><a href="#__codelineno-6-11">11</a></span>
<span class="normal"><a href="#__codelineno-6-12">12</a></span>
<span class="normal"><a href="#__codelineno-6-13">13</a></span>
<span class="normal"><a href="#__codelineno-6-14">14</a></span>
<span class="normal"><a href="#__codelineno-6-15">15</a></span>
<span class="normal"><a href="#__codelineno-6-16">16</a></span>
<span class="normal"><a href="#__codelineno-6-17">17</a></span>
<span class="normal"><a href="#__codelineno-6-18">18</a></span>
<span class="normal"><a href="#__codelineno-6-19">19</a></span>
<span class="normal"><a href="#__codelineno-6-20">20</a></span>
<span class="normal"><a href="#__codelineno-6-21">21</a></span>
<span class="normal"><a href="#__codelineno-6-22">22</a></span>
<span class="normal"><a href="#__codelineno-6-23">23</a></span>
<span class="normal"><a href="#__codelineno-6-24">24</a></span>
<span class="normal"><a href="#__codelineno-6-25">25</a></span>
<span class="normal"><a href="#__codelineno-6-26">26</a></span>
<span class="normal"><a href="#__codelineno-6-27">27</a></span>
<span class="normal"><a href="#__codelineno-6-28">28</a></span>
<span class="normal"><a href="#__codelineno-6-29">29</a></span>
<span class="normal"><a href="#__codelineno-6-30">30</a></span>
<span class="normal"><a href="#__codelineno-6-31">31</a></span>
<span class="normal"><a href="#__codelineno-6-32">32</a></span>
<span class="normal"><a href="#__codelineno-6-33">33</a></span>
<span class="normal"><a href="#__codelineno-6-34">34</a></span>
<span class="normal"><a href="#__codelineno-6-35">35</a></span>
<span class="normal"><a href="#__codelineno-6-36">36</a></span>
<span class="normal"><a href="#__codelineno-6-37">37</a></span>
<span class="normal"><a href="#__codelineno-6-38">38</a></span>
<span class="normal"><a href="#__codelineno-6-39">39</a></span>
<span class="normal"><a href="#__codelineno-6-40">40</a></span>
<span class="normal"><a href="#__codelineno-6-41">41</a></span>
<span class="normal"><a href="#__codelineno-6-42">42</a></span>
<span class="normal"><a href="#__codelineno-6-43">43</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-6-1" name="__codelineno-6-1"></a><span class="o">&lt;</span><span class="n">p</span><span class="o">&gt;</span>
<a id="__codelineno-6-2" name="__codelineno-6-2"></a><span class="w"> </span><span class="o">&lt;</span><span class="n">button</span><span class="w"> </span><span class="n">@on</span><span class="p">{</span><span class="n">DOM</span><span class="w"> </span><span class="n">EVENT</span><span class="p">}</span><span class="o">=</span><span class="s">&quot;{DELEGATE}&quot;</span><span class="w"> </span><span class="o">/&gt;</span>
<a id="__codelineno-6-3" name="__codelineno-6-3"></a><span class="w"> </span><span class="o">&lt;</span><span class="n">button</span><span class="w"> </span><span class="n">@on</span><span class="p">{</span><span class="n">DOM</span><span class="w"> </span><span class="n">EVENT</span><span class="p">}</span><span class="o">=</span><span class="s">&quot;{DELEGATE}&quot;</span><span class="w"> </span><span class="n">@on</span><span class="p">{</span><span class="n">DOM</span><span class="w"> </span><span class="n">EVENT</span><span class="p">}:</span><span class="n">preventDefault</span><span class="w"> </span><span class="o">/&gt;</span><span class="w"> </span><span class="c1">// prevent default action</span>
<a id="__codelineno-6-4" name="__codelineno-6-4"></a><span class="w"> </span><span class="o">&lt;</span><span class="n">button</span><span class="w"> </span><span class="n">@on</span><span class="p">{</span><span class="n">DOM</span><span class="w"> </span><span class="n">EVENT</span><span class="p">}</span><span class="o">=</span><span class="s">&quot;{DELEGATE}&quot;</span><span class="w"> </span><span class="n">@on</span><span class="p">{</span><span class="n">DOM</span><span class="w"> </span><span class="n">EVENT</span><span class="p">}:</span><span class="n">preventDefault</span><span class="o">=</span><span class="s">&quot;{CONDITION}&quot;</span><span class="w"> </span><span class="o">/&gt;</span><span class="w"> </span><span class="c1">// prevent default action if CONDITION is true</span>
<a id="__codelineno-6-5" name="__codelineno-6-5"></a>
<a id="__codelineno-6-6" name="__codelineno-6-6"></a><span class="w"> </span><span class="o">&lt;</span><span class="n">button</span><span class="w"> </span><span class="n">@on</span><span class="p">{</span><span class="n">DOM</span><span class="w"> </span><span class="n">EVENT</span><span class="p">}</span><span class="o">=</span><span class="s">&quot;{DELEGATE}&quot;</span><span class="w"> </span><span class="n">@on</span><span class="p">{</span><span class="n">DOM</span><span class="w"> </span><span class="n">EVENT</span><span class="p">}:</span><span class="n">stopPropagation</span><span class="w"> </span><span class="o">/&gt;</span>
<a id="__codelineno-6-7" name="__codelineno-6-7"></a><span class="w"> </span><span class="o">&lt;</span><span class="n">button</span><span class="w"> </span><span class="n">@on</span><span class="p">{</span><span class="n">DOM</span><span class="w"> </span><span class="n">EVENT</span><span class="p">}</span><span class="o">=</span><span class="s">&quot;{DELEGATE}&quot;</span><span class="w"> </span><span class="n">@on</span><span class="p">{</span><span class="n">DOM</span><span class="w"> </span><span class="n">EVENT</span><span class="p">}:</span><span class="n">stopPropagation</span><span class="o">=</span><span class="s">&quot;{CONDITION}&quot;</span><span class="w"> </span><span class="o">/&gt;</span><span class="w"> </span><span class="c1">// stop event propagation if CONDITION is true</span>
<a id="__codelineno-6-8" name="__codelineno-6-8"></a>
<a id="__codelineno-6-9" name="__codelineno-6-9"></a><span class="w"> </span><span class="o">&lt;</span><span class="n">button</span><span class="w"> </span><span class="n">@on</span><span class="p">{</span><span class="n">DOM</span><span class="w"> </span><span class="n">EVENT</span><span class="p">}</span><span class="o">=</span><span class="s">&quot;@(e =&gt; Property = value)&quot;</span><span class="w"> </span><span class="o">/&gt;</span><span class="w"> </span><span class="c1">// change internal state w/ lambda</span>
<a id="__codelineno-6-10" name="__codelineno-6-10"></a><span class="w"> </span><span class="o">&lt;</span><span class="n">button</span><span class="w"> </span><span class="n">@on</span><span class="p">{</span><span class="n">DOM</span><span class="w"> </span><span class="n">EVENT</span><span class="p">}</span><span class="o">=</span><span class="s">&quot;@(e =&gt; DelegateAsync(e, value))&quot;</span><span class="w"> </span><span class="o">/&gt;</span><span class="w"> </span><span class="c1">// invoke delegate w/ lambda</span>
<a id="__codelineno-6-11" name="__codelineno-6-11"></a>
<a id="__codelineno-6-12" name="__codelineno-6-12"></a><span class="w"> </span><span class="o">&lt;</span><span class="n">input</span><span class="w"> </span><span class="n">@ref</span><span class="o">=</span><span class="s">&quot;elementReference&quot;</span><span class="w"> </span><span class="o">/&gt;</span>
<a id="__codelineno-6-13" name="__codelineno-6-13"></a>
<a id="__codelineno-6-14" name="__codelineno-6-14"></a><span class="w"> </span><span class="o">&lt;</span><span class="n">input</span><span class="w"> </span><span class="n">@bind</span><span class="o">=</span><span class="s">&quot;{PROPERTY}&quot;</span><span class="w"> </span><span class="o">/&gt;</span><span class="w"> </span><span class="c1">// updates variable on ONCHANGE event (focus loss)</span>
<a id="__codelineno-6-15" name="__codelineno-6-15"></a><span class="w"> </span><span class="o">&lt;</span><span class="n">input</span><span class="w"> </span><span class="n">@bind</span><span class="o">=</span><span class="s">&quot;{PROPERTY}&quot;</span><span class="w"> </span><span class="n">@bind</span><span class="p">:</span><span class="k">event</span><span class="o">=</span><span class="s">&quot;{DOM EVENT}&quot;</span><span class="w"> </span><span class="o">/&gt;</span><span class="w"> </span><span class="c1">// updates value on DOM EVENT</span>
<a id="__codelineno-6-16" name="__codelineno-6-16"></a><span class="w"> </span><span class="o">&lt;</span><span class="n">input</span><span class="w"> </span><span class="n">@bind</span><span class="o">=</span><span class="s">&quot;{PROPERTY}&quot;</span><span class="w"> </span><span class="n">@bind</span><span class="p">:</span><span class="n">format</span><span class="o">=</span><span class="s">&quot;{FORMAT STRING}&quot;</span><span class="w"> </span><span class="o">/&gt;</span><span class="w"> </span><span class="c1">// use FORMAT STRING to display value</span>
<a id="__codelineno-6-17" name="__codelineno-6-17"></a>
<a id="__codelineno-6-18" name="__codelineno-6-18"></a><span class="w"> </span><span class="o">&lt;</span><span class="n">ChildComponent</span><span class="w"> </span><span class="n">@bind</span><span class="o">-</span><span class="p">{</span><span class="n">PROPERTY</span><span class="p">}</span><span class="o">=</span><span class="s">&quot;{PROPERTY}&quot;</span><span class="w"> </span><span class="n">@bind</span><span class="o">-</span><span class="p">{</span><span class="n">PROPERTY</span><span class="p">}:</span><span class="k">event</span><span class="o">=</span><span class="s">&quot;{EVENT}&quot;</span><span class="w"> </span><span class="o">/&gt;</span><span class="w"> </span><span class="c1">// bind to child component {PROPERTY}</span>
<a id="__codelineno-6-19" name="__codelineno-6-19"></a><span class="w"> </span><span class="o">&lt;</span><span class="n">ChildComponent</span><span class="w"> </span><span class="n">@bind</span><span class="o">-</span><span class="p">{</span><span class="n">PROPERTY</span><span class="p">}</span><span class="o">=</span><span class="s">&quot;{PROPERTY}&quot;</span><span class="w"> </span><span class="n">@bind</span><span class="o">-</span><span class="p">{</span><span class="n">PROPERTY</span><span class="p">}:</span><span class="k">event</span><span class="o">=</span><span class="s">&quot;{PROPERTY}Changed&quot;</span><span class="w"> </span><span class="o">/&gt;</span><span class="w"> </span><span class="c1">// bind to child component {PROPERTY}, listen for custom event</span>
<a id="__codelineno-6-20" name="__codelineno-6-20"></a>
<a id="__codelineno-6-21" name="__codelineno-6-21"></a><span class="w"> </span><span class="o">&lt;</span><span class="n">input</span><span class="w"> </span><span class="n">@bind</span><span class="o">=</span><span class="s">&quot;{PROPERTY}&quot;</span><span class="w"> </span><span class="n">@bind</span><span class="p">:</span><span class="n">after</span><span class="o">=</span><span class="s">&quot;{DELEGATE}&quot;</span><span class="w"> </span><span class="o">/&gt;</span><span class="w"> </span><span class="c1">// run async logic after bind event completion</span>
<a id="__codelineno-6-22" name="__codelineno-6-22"></a><span class="w"> </span><span class="o">&lt;</span><span class="n">input</span><span class="w"> </span><span class="n">@bind</span><span class="p">:</span><span class="k">get</span><span class="o">=</span><span class="s">&quot;{PROPERTY}&quot;</span><span class="w"> </span><span class="n">@bind</span><span class="p">:</span><span class="k">set</span><span class="o">=</span><span class="s">&quot;PropertyChanged&quot;</span><span class="w"> </span><span class="o">/&gt;</span><span class="w"> </span><span class="c1">// two-way data binding</span>
<a id="__codelineno-6-23" name="__codelineno-6-23"></a><span class="o">&lt;/</span><span class="n">p</span><span class="o">&gt;</span>
<a id="__codelineno-6-24" name="__codelineno-6-24"></a>
<a id="__codelineno-6-25" name="__codelineno-6-25"></a><span class="n">@code</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-26" name="__codelineno-6-26"></a><span class="w"> </span><span class="k">private</span><span class="w"> </span><span class="n">ElementReference</span><span class="w"> </span><span class="n">elementReference</span><span class="p">;</span>
<a id="__codelineno-6-27" name="__codelineno-6-27"></a>
<a id="__codelineno-6-28" name="__codelineno-6-28"></a><span class="w"> </span><span class="k">public</span><span class="w"> </span><span class="kt">string</span><span class="w"> </span><span class="n">Property</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">get</span><span class="p">;</span><span class="w"> </span><span class="k">set</span><span class="p">;</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-6-29" name="__codelineno-6-29"></a>
<a id="__codelineno-6-30" name="__codelineno-6-30"></a><span class="w"> </span><span class="k">public</span><span class="w"> </span><span class="n">EventCallback</span><span class="o">&lt;</span><span class="n">Type</span><span class="o">&gt;</span><span class="w"> </span><span class="n">PropertyChanged</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">get</span><span class="p">;</span><span class="w"> </span><span class="k">set</span><span class="p">;</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="c1">// custom event {PROPERTY}Changed</span>
<a id="__codelineno-6-31" name="__codelineno-6-31"></a>
<a id="__codelineno-6-32" name="__codelineno-6-32"></a><span class="w"> </span><span class="c1">// invoke custom event</span>
<a id="__codelineno-6-33" name="__codelineno-6-33"></a><span class="w"> </span><span class="k">public</span><span class="w"> </span><span class="k">async</span><span class="w"> </span><span class="n">Task</span><span class="w"> </span><span class="nf">DelegateAsync</span><span class="p">(</span><span class="n">EventArgs</span><span class="w"> </span><span class="n">e</span><span class="p">,</span><span class="w"> </span><span class="n">Type</span><span class="w"> </span><span class="n">argument</span><span class="p">)</span>
<a id="__codelineno-6-34" name="__codelineno-6-34"></a><span class="w"> </span><span class="p">{</span><span class="w"> </span>
<a id="__codelineno-6-35" name="__codelineno-6-35"></a><span class="w"> </span><span class="cm">/* ... */</span>
<a id="__codelineno-6-36" name="__codelineno-6-36"></a>
<a id="__codelineno-6-37" name="__codelineno-6-37"></a><span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="n">PropertyChanged</span><span class="p">.</span><span class="n">InvokeAsync</span><span class="p">(</span><span class="n">e</span><span class="p">,</span><span class="w"> </span><span class="n">argument</span><span class="p">);</span><span class="w"> </span><span class="c1">// notify parent bound prop has changed</span>
<a id="__codelineno-6-38" name="__codelineno-6-38"></a><span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="n">elementReference</span><span class="p">.</span><span class="n">FocusAsync</span><span class="p">();</span><span class="w"> </span><span class="c1">// focus an element in code</span>
<a id="__codelineno-6-39" name="__codelineno-6-39"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-6-40" name="__codelineno-6-40"></a>
<a id="__codelineno-6-41" name="__codelineno-6-41"></a><span class="w"> </span><span class="na">[Parameter]</span><span class="w"> </span><span class="k">public</span><span class="w"> </span><span class="n">TValue</span><span class="w"> </span><span class="n">Value</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">get</span><span class="p">;</span><span class="w"> </span><span class="k">set</span><span class="p">;</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-6-42" name="__codelineno-6-42"></a><span class="w"> </span><span class="na">[Parameter]</span><span class="w"> </span><span class="k">public</span><span class="w"> </span><span class="n">EventCallback</span><span class="o">&lt;</span><span class="n">TValue</span><span class="o">&gt;</span><span class="w"> </span><span class="n">ValueChanged</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">get</span><span class="p">;</span><span class="w"> </span><span class="k">set</span><span class="p">;</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-6-43" name="__codelineno-6-43"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<blockquote>
<p><strong>Note</strong>: When a user provides an unparsable value to a data-bound element, the unparsable value is automatically reverted to its previous value when the bind event is triggered.
<strong>Note</strong>: The <code>@bind:get</code> and <code>@bind:set</code> modifiers are always used together.<br />
<code>The @bind:get</code> modifier specifies the value to bind to and the <code>@bind:set</code> modifier specifies a callback that is called when the value changes</p>
</blockquote>
<h2 id="javascriptnet-interop">Javascript/.NET Interop</h2>
<p><a href="https://docs.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet">Call Javascript from .NET</a><br />
<a href="https://docs.microsoft.com/en-us/aspnet/core/blazor/call-dotnet-from-javascript">Call .NET from Javascript</a></p>
<h3 id="render-blazor-components-from-javascript">Render Blazor components from JavaScript</h3>
<p>To render a Blazor component from JavaScript, first register it as a root component for JavaScript rendering and assign it an identifier:</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">C#</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-7-1">1</a></span>
<span class="normal"><a href="#__codelineno-7-2">2</a></span>
<span class="normal"><a href="#__codelineno-7-3">3</a></span>
<span class="normal"><a href="#__codelineno-7-4">4</a></span>
<span class="normal"><a href="#__codelineno-7-5">5</a></span>
<span class="normal"><a href="#__codelineno-7-6">6</a></span>
<span class="normal"><a href="#__codelineno-7-7">7</a></span>
<span class="normal"><a href="#__codelineno-7-8">8</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-7-1" name="__codelineno-7-1"></a><span class="c1">// Blazor Server</span>
<a id="__codelineno-7-2" name="__codelineno-7-2"></a><span class="n">builder</span><span class="p">.</span><span class="n">Services</span><span class="p">.</span><span class="n">AddServerSideBlazor</span><span class="p">(</span><span class="n">options</span><span class="w"> </span><span class="o">=&gt;</span>
<a id="__codelineno-7-3" name="__codelineno-7-3"></a><span class="p">{</span>
<a id="__codelineno-7-4" name="__codelineno-7-4"></a><span class="w"> </span><span class="n">options</span><span class="p">.</span><span class="n">RootComponents</span><span class="p">.</span><span class="n">RegisterForJavaScript</span><span class="o">&lt;</span><span class="n">Counter</span><span class="o">&gt;</span><span class="p">(</span><span class="n">identifier</span><span class="p">:</span><span class="w"> </span><span class="s">&quot;counter&quot;</span><span class="p">);</span>
<a id="__codelineno-7-5" name="__codelineno-7-5"></a><span class="p">});</span>
<a id="__codelineno-7-6" name="__codelineno-7-6"></a>
<a id="__codelineno-7-7" name="__codelineno-7-7"></a><span class="c1">// Blazor WebAssembly</span>
<a id="__codelineno-7-8" name="__codelineno-7-8"></a><span class="n">builder</span><span class="p">.</span><span class="n">RootComponents</span><span class="p">.</span><span class="n">RegisterForJavaScript</span><span class="o">&lt;</span><span class="n">Counter</span><span class="o">&gt;</span><span class="p">(</span><span class="n">identifier</span><span class="p">:</span><span class="w"> </span><span class="s">&quot;counter&quot;</span><span class="p">);</span>
</code></pre></div></td></tr></table></div>
<p>Load Blazor into the JavaScript app (<code>blazor.server.js</code> or <code>blazor.webassembly.js</code>) and then render the component from JavaScript into a container element using the registered identifier, passing component parameters as needed:</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-8-1">1</a></span>
<span class="normal"><a href="#__codelineno-8-2">2</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-8-1" name="__codelineno-8-1"></a><span class="kd">let</span><span class="w"> </span><span class="nx">containerElement</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;my-counter&#39;</span><span class="p">);</span>
<a id="__codelineno-8-2" name="__codelineno-8-2"></a><span class="k">await</span><span class="w"> </span><span class="nx">Blazor</span><span class="p">.</span><span class="nx">rootComponents</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">containerElement</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;counter&#39;</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">incrementAmount</span><span class="o">:</span><span class="w"> </span><span class="mf">10</span><span class="w"> </span><span class="p">});</span>
</code></pre></div></td></tr></table></div>
<h3 id="blazor-custom-elements">Blazor custom elements</h3>
<p>Experimental support is also now available for building custom elements with Blazor using the Microsoft.AspNetCore.Components.CustomElements NuGet package.<br />
Custom elements use standard HTML interfaces to implement custom HTML elements.</p>
<p>To create a custom element using Blazor, register a Blazor root component as custom elements like this:</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">C#</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-9-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-9-1" name="__codelineno-9-1"></a><span class="n">options</span><span class="p">.</span><span class="n">RootComponents</span><span class="p">.</span><span class="n">RegisterAsCustomElement</span><span class="o">&lt;</span><span class="n">Counter</span><span class="o">&gt;</span><span class="p">(</span><span class="s">&quot;my-counter&quot;</span><span class="p">);</span>
</code></pre></div></td></tr></table></div>
</article>
</div>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
<button type="button" class="md-top md-icon" data-md-component="top" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg>
Back to top
</button>
</main>
<footer class="md-footer">
<nav class="md-footer__inner md-grid" aria-label="Footer" >
<a href="razor-syntax.html" class="md-footer__link md-footer__link--prev" aria-label="Previous: Razor Syntax">
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</div>
<div class="md-footer__title">
<span class="md-footer__direction">
Previous
</span>
<div class="md-ellipsis">
Razor Syntax
</div>
</div>
</a>
<a href="signalr.html" class="md-footer__link md-footer__link--next" aria-label="Next: SignalR">
<div class="md-footer__title">
<span class="md-footer__direction">
Next
</span>
<div class="md-ellipsis">
SignalR
</div>
</div>
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg>
</div>
</a>
</nav>
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
<div class="md-copyright__highlight">
MIT
</div>
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs
</a>
</div>
<div class="md-social">
<a href="https://hachyderm.io/@m_lamonaca" target="_blank" rel="noopener me" title="hachyderm.io" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.5 102.5 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5m-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg>
</a>
<a href="https://github.com/m-lamonaca" target="_blank" rel="noopener" title="github.com" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "../../..", "features": ["navigation.instant", "navigation.indexes", "navigation.tracking", "navigation.pruning", "navigation.sections", "navigation.top", "navigation.tabs", "navigation.tabs.sticky", "navigation.footer", "toc.follow", "content.code.copy"], "search": "../../../assets/javascripts/workers/search.07f07601.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
<script src="../../../assets/javascripts/bundle.56dfad97.min.js"></script>
</body>
</html>
Reference in a new issue View git blame Copy permalink