CINXE.COM

<!DOCTYPE html><html class="hasSidebar hasPageActions hasBreadcrumb conceptual has-default-focus theme-light" lang="en-us" dir="ltr" data-authenticated="false" data-auth-status-determined="false" data-target="docs" x-ms-format-detection="none"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta property="og:title" content="ASP.NET Core Blazor" /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://learn.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-9.0" /><meta property="og:description" content="Explore ASP.NET Core Blazor, a way to build interactive client-side web UI with .NET in an ASP.NET Core app." /><meta property="og:image" content="https://learn.microsoft.com/dotnet/media/dotnet-logo.png" /> <meta property="og:image:alt" content="ASP.NET Core Blazor | Microsoft Learn" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@MicrosoftLearn" /> <meta name="color-scheme" content="light dark"><meta name="author" content="guardrex" /> <meta name="breadcrumb_path" content="/aspnet/core/breadcrumb/toc.json" /> <meta name="default_moniker" content="aspnetcore-9.0" /> <meta name="depot_name" content="MSDN.aspnet-core-conceptual" /> <meta name="description" content="Explore ASP.NET Core Blazor, a way to build interactive client-side web UI with .NET in an ASP.NET Core app." /> <meta name="document_id" content="5bc28995-6784-a7d2-5c0b-9811a8d19c1a" /> <meta name="document_version_independent_id" content="1668c8fb-024c-c86d-d4d5-e22e3355c04b" /> <meta name="feedback_help_link_type" content="" /> <meta name="feedback_help_link_url" content="" /> <meta name="feedback_product_url" content="https://github.com/dotnet/aspnetcore/blob/main/CONTRIBUTING.md" /> <meta name="feedback_system" content="OpenSource" /> <meta name="git_commit_id" content="c7e8ed335d7112e09aab0fd0ebf09218464c0699" /> <meta name="gitcommit" content="https://github.com/dotnet/AspNetCore.Docs/blob/c7e8ed335d7112e09aab0fd0ebf09218464c0699/aspnetcore/blazor/index.md" /> <meta name="locale" content="en-us" /> <meta name="monikerRange" content=">= aspnetcore-3.1" /> <meta name="monikers" content="aspnetcore-10.0" /> <meta name="monikers" content="aspnetcore-3.1" /> <meta name="monikers" content="aspnetcore-5.0" /> <meta name="monikers" content="aspnetcore-6.0" /> <meta name="monikers" content="aspnetcore-7.0" /> <meta name="monikers" content="aspnetcore-8.0" /> <meta name="monikers" content="aspnetcore-9.0" /> <meta name="ms.author" content="riande" /> <meta name="ms.custom" content="mvc" /> <meta name="ms.date" content="11/12/2024" /> <meta name="ms.service" content="aspnet-core" /> <meta name="ms.subservice" content="blazor" /> <meta name="ms.topic" content="conceptual" /> <meta name="original_content_git_url" content="https://github.com/dotnet/AspNetCore.Docs/blob/live/aspnetcore/blazor/index.md" /> <meta name="page_type" content="conceptual" /> <meta name="pdf_url_template" content="https://learn.microsoft.com/pdfstore/en-us/MSDN.aspnet-core-conceptual/{branchName}{pdfName}" /> <meta name="schema" content="Conceptual" /> <meta name="site_name" content="Docs" /> <meta name="toc_rel" content="../toc.json" /> <meta name="uhfHeaderId" content="MSDocsHeader-AspNet" /> <meta name="uid" content="blazor/index" /> <meta name="updated_at" content="2024-11-18 01:19 PM" /> <meta name="word_count" content="1849" /> <meta name="persistent_id" content="c14cecc3-0387-c823-8d93-8bd17352bd7d" /> <meta name="cmProducts" content="https://authoring-docs-microsoft.poolparty.biz/devrel/06819054-3d1b-4589-8746-b33c4dc1ebf2" data-source="generated" /> <meta name="cmProducts" content="https://authoring-docs-microsoft.poolparty.biz/devrel/7696cda6-0510-47f6-8302-71bb5d2e28cf" data-source="generated" /> <meta name="spProducts" content="https://authoring-docs-microsoft.poolparty.biz/devrel/ae0d1d73-8b86-4e29-9ab4-867b4f9f6186" data-source="generated" /> <meta name="spProducts" content="https://authoring-docs-microsoft.poolparty.biz/devrel/69c76c32-967e-4c65-b89a-74cc527db725" data-source="generated" /> <meta name="scope" content="ASP.NET Core" /><meta name="github_feedback_content_git_url" content="https://github.com/dotnet/AspNetCore.Docs/blob/main/aspnetcore/blazor/index.md" /><link href="https://learn.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-9.0" rel="canonical"><title>ASP.NET Core Blazor | Microsoft Learn</title><link rel="stylesheet" href="/static/assets/0.4.028726178/styles/site-ltr.css"> <script id="msdocs-script"> var msDocs = {environment: { supportLevel: 'production', accessLevel: 'online', reviewFeatures: false, systemContent: true, azurePortalHostname: 'portal.azure.com', legacyHosting: false, siteName: 'learn', },data: { timeOrigin: Date.now(), contentLocale: 'en-us', contentDir: 'ltr', userLocale: 'en-us', userDir: 'ltr', pageTemplate: 'Conceptual', brand: '', context: {}, hasBinaryRating: true, feedbackHelpLinkType:'', feedbackHelpLinkUrl:'', standardFeedback: false, showFeedbackReport: false, enableTutorialFeedback: false, feedbackSystem: 'OpenSource', feedbackGitHubRepo: 'dotnet/AspNetCore.Docs', feedbackProductUrl: 'https://github.com/dotnet/aspnetcore/blob/main/CONTRIBUTING.md',extendBreadcrumb: false,isEditDisplayable: true, hideViewSource: false, hasPageActions: true, hasPrintButton: true, hasBookmark: true, hasShare: true, isPermissioned: false, isPrivateUnauthorized: false,hasRecommendations: true,openSourceFeedback: true, openSourceFeedbackIssueUrl: 'https://github.com/dotnet/aspnetcore.docs/issues/new?template=customer-feedback.yml', openSourceFeedbackIssueTitle: '', openSourceFeedbackIssueLabels: 'Source - Docs.ms,:watch: Not Triaged',contributors: [{ name: "guardrex", url: "https://github.com/guardrex" },{ name: "danroth27", url: "https://github.com/danroth27" },{ name: "Rick-Anderson", url: "https://github.com/Rick-Anderson" },{ name: "18-F-cali", url: "https://github.com/18-F-cali" },{ name: "fscopel", url: "https://github.com/fscopel" },{ name: "diberry", url: "https://github.com/diberry" },{ name: "donhuvy", url: "https://github.com/donhuvy" },{ name: "NTaylorMullen", url: "https://github.com/NTaylorMullen" },{ name: "scottaddie", url: "https://github.com/scottaddie" },{ name: "v-thepet", url: "https://github.com/v-thepet" },{ name: "ajaybhargavb", url: "https://github.com/ajaybhargavb" }],}, functions:{} }; </script><script src="https://wcpstatic.microsoft.com/mscc/lib/v2/wcp-consent.js"></script> <script src="https://js.monitor.azure.com/scripts/c/ms.jsll-4.min.js"></script><script src="/static/assets/0.4.028726178/global/deprecation.js"></script><script src="/static/assets/0.4.028726178/scripts/en-us/index-docs.js"></script></head> <body lang="en-us" dir="ltr"> <div class="header-holder has-default-focus"> <a href="#main" style="z-index: 1070" class="outline-color-text visually-hidden-until-focused position-fixed inner-focus focus-visible top-0 left-0 right-0 padding-xs text-align-center has-body-background" tabindex="1">Skip to main content</a><div hidden id="cookie-consent-holder" data-test-id="cookie-consent-container"></div> <div id="unsupported-browser" style=" background-color: white; color: black; padding: 16px; border-bottom: 1px solid grey;" hidden > <div style="max-width: 800px; margin: 0 auto;"> <p style="font-size: 24px">This browser is no longer supported.</p> <p style="font-size: 16px; margin-top: 16px;">Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.</p> <div style="margin-top: 12px;"> <a href="https://go.microsoft.com/fwlink/p/?LinkID=2092881 " style=" background-color: #0078d4; border: 1px solid #0078d4; color: white; padding: 6px 12px; border-radius: 2px; display: inline-block; ">Download Microsoft Edge</a> <a href="https://learn.microsoft.com/en-us/lifecycle/faq/internet-explorer-microsoft-edge" style=" background-color: white; padding: 6px 12px; border: 1px solid #505050; color: #171717; border-radius: 2px; display: inline-block; ">More info about Internet Explorer and Microsoft Edge</a> </div> </div> </div>   <header id="ms--site-header" data-test-id="site-header-wrapper" role="banner" itemscope="itemscope" itemtype="http://schema.org/Organization"> <div id="ms--mobile-nav" class="site-header display-none-tablet padding-inline-none gap-none" data-bi-name="mobile-header" data-test-id="mobile-header"></div> <div id="ms--primary-nav" class="site-header display-none display-flex-tablet" data-bi-name="L1-header" data-test-id="primary-header"></div> <div id="ms--secondary-nav" class="site-header display-none display-flex-tablet" data-bi-name="L2-header" data-test-id="secondary-header"></div> </header><div id="content-header" class="content-header uhf-container has-padding has-default-focus border-bottom-none" data-bi-name="content-header"> <div class="content-header-controls margin-xxs margin-inline-sm-tablet"> <button type="button" class="contents-button button button-sm margin-right-xxs" data-bi-name="contents-expand" aria-haspopup="true" data-contents-button> <span class="icon"><span class="docon docon-menu" aria-hidden="true"></span></span> <span class="contents-expand-title">Table of contents</span> </button> <button type="button" class="ap-collapse-behavior ap-expanded button button-sm" data-bi-name="ap-collapse" aria-controls="action-panel"> <span class="icon"><span class="docon docon-exit-mode" aria-hidden="true"></span></span> <span>Exit focus mode</span> </button> </div> </div><div id="disclaimer-holder" class="has-overflow-hidden has-default-focus">  </div> </div> <div class="mainContainer uhf-container has-default-focus" data-bi-name="body"> <div class="columns has-large-gaps is-gapless-mobile "><div id="left-container" class="left-container is-hidden-mobile column is-one-third-tablet is-one-quarter-desktop"> <nav id="affixed-left-container" class="margin-top-sm-tablet position-sticky display-flex flex-direction-column" aria-label="Primary"></nav> </div> <section class="primary-holder column is-two-thirds-tablet is-three-quarters-desktop">  <div class="columns is-gapless-mobile has-large-gaps "><div id="main-column" class="column is-full is-8-desktop"> <main id="main" class="" role="main" data-bi-name="content" lang="en-us" dir="ltr"> <div id="article-header" class="background-color-body margin-top-sm-tablet margin-bottom-xs display-none-print"> <div class="display-flex align-items-center "><details id="article-header-breadcrumbs-overflow-popover" class="popover" data-for="article-header-breadcrumbs"> <summary class="button button-clear button-primary button-sm inner-focus" aria-label="All breadcrumbs"> <span class="icon"> <span class="docon docon-more"></span> </span> </summary> <div id="article-header-breadcrumbs-overflow" class="popover-content padding-none"> </div> </details> <bread-crumbs id="article-header-breadcrumbs" data-test-id="article-header-breadcrumbs" class="overflow-hidden flex-grow-1 margin-right-sm margin-right-md-tablet margin-right-lg-desktop margin-left-negative-xxs padding-left-xxs"></bread-crumbs><div id="article-header-page-actions" class="opacity-none margin-left-auto display-flex flex-wrap-no-wrap align-items-stretch"><a id="lang-link-tablet" class="button button-primary button-clear button-sm display-none display-inline-flex-tablet" title="Read in English" data-bi-name="language-toggle" data-read-in-link hidden> <span class="icon margin-none" aria-hidden="true" data-read-in-link-icon> <span class="docon docon-locale-globe"></span> </span> <span class="is-visually-hidden" data-read-in-link-text>Read in English</span> </a><button type="button" class="collection button button-clear button-sm button-primary display-none display-inline-flex-tablet" data-list-type="collection" data-bi-name="collection" title="Add to collection"> <span class="icon margin-none" aria-hidden="true"> <span class="docon docon-circle-addition"></span> </span> <span class="collection-status is-visually-hidden">Save</span> </button><a data-contenteditbtn class="button button-clear button-sm text-decoration-none button-primary display-none display-inline-flex-tablet" aria-label="Edit" title="Edit This Document" data-bi-name="edit" href="https://github.com/dotnet/AspNetCore.Docs/blob/main/aspnetcore/blazor/index.md" data-original_content_git_url="https://github.com/dotnet/AspNetCore.Docs/blob/live/aspnetcore/blazor/index.md" data-original_content_git_url_template="{repo}/blob/{branch}/aspnetcore/blazor/index.md" data-pr_repo="" data-pr_branch=""> <span class="icon margin-none" aria-hidden="true"> <span class="docon docon-edit-outline"></span> </span> </a> <details class="popover popover-right" id="article-header-page-actions-overflow"> <summary class="justify-content-flex-start button button-clear button-sm button-primary" aria-label="More actions" title="More actions"> <span class="icon" aria-hidden="true"> <span class="docon docon-more-vertical"></span> </span> </summary> <div class="popover-content padding-xs"><button data-page-action-item="overflow-mobile" type="button" class="justify-content-flex-start button-block button-sm has-inner-focus button button-clear display-none-tablet" data-bi-name="contents-expand" data-contents-button data-popover-close> <span class="icon"> <span class="docon docon-editor-list-bullet" aria-hidden="true"></span> </span><span class="contents-expand-title">Table of contents</span></button><a id="lang-link-overflow" class="justify-content-flex-start button-sm has-inner-focus button button-clear button-block display-none-tablet" title="Read in English" data-bi-name="language-toggle" data-page-action-item="overflow-mobile" data-check-hidden="true" data-read-in-link hidden > <span class="icon" aria-hidden="true" data-read-in-link-icon> <span class="docon docon-locale-globe"></span> </span> <span data-read-in-link-text>Read in English</span> </a><button type="button" class="collection justify-content-flex-start button button-clear button-sm has-inner-focus button-block display-none-tablet" data-list-type="collection" data-bi-name="collection" title="Save" data-page-action-item="overflow-mobile" data-check-hidden="true" data-popover-close> <span class="icon" aria-hidden="true"> <span class="docon docon-circle-addition"></span> </span> <span class="collection-status">Save</span> </button> <button type="button" class="collection justify-content-flex-start button button-clear button-sm has-inner-focus button-block display-none-tablet" data-list-type="plan" data-bi-name="plan" title="Add to Plan" data-page-action-item="overflow-mobile" data-check-hidden="true" data-popover-close hidden> <span class="icon" aria-hidden="true"> <span class="docon docon-circle-addition"></span> </span> <span class="plan-status">Add to Plan</span> </button><a data-contenteditbtn class="button button-clear button-block button-sm has-inner-focus justify-content-flex-start text-decoration-none display-none-tablet" aria-label="Edit" title="Edit This Document" data-bi-name="edit" href="https://github.com/dotnet/AspNetCore.Docs/blob/main/aspnetcore/blazor/index.md" data-original_content_git_url="https://github.com/dotnet/AspNetCore.Docs/blob/live/aspnetcore/blazor/index.md" data-original_content_git_url_template="{repo}/blob/{branch}/aspnetcore/blazor/index.md" data-pr_repo="" data-pr_branch=""> <span class="icon" aria-hidden="true"> <span class="docon docon-edit-outline"></span> </span> <span>Edit</span> </a><div aria-hidden="true" class="margin-none" data-page-action-item="overflow-all"></div> <hr class="display-none-tablet margin-bottom-xxs margin-top-xxs" /> <h4 class="font-size-sm padding-left-xxs">Share via</h4> <a class="button button-clear button-sm button-block has-inner-focus text-decoration-none justify-content-flex-start share-facebook" data-bi-name="facebook" data-page-action-item="overflow-all"> <span class="icon" aria-hidden="true"> <span class="docon docon-facebook-share font-size-md color-primary"></span> </span> <span class="margin-left-xxs">Facebook</span> </a> <a class="button button-clear button-sm has-inner-focus button-block text-decoration-none justify-content-flex-start share-twitter" data-bi-name="twitter" data-page-action-item="overflow-all"> <span class="icon" aria-hidden="true"> <span class="docon docon-xlogo-share font-size-xxs"></span> </span> <span class="margin-left-xxs">x.com</span> </a> <a class="button button-clear button-sm has-inner-focus button-block text-decoration-none justify-content-flex-start share-linkedin" data-bi-name="linkedin" data-page-action-item="overflow-all"> <span class="icon" aria-hidden="true"> <span class="docon docon-linked-in-logo font-size-sm color-primary"></span> </span> <span class="margin-left-xxs">LinkedIn</span> </a> <a class="button button-clear button-sm button-block has-inner-focus text-decoration-none justify-content-flex-start margin-bottom-xxs share-email" data-bi-name="email" data-page-action-item="overflow-all"> <span class="icon" aria-hidden="true"> <span class="docon docon-mail-message font-size-sm color-primary"></span> </span> <span class="margin-left-xxs">Email</span> </a><hr /> <button class="button button-block button-clear button-sm justify-content-flex-start has-inner-focus margin-top-xxs" title="Print" type="button" aria-label="Print" data-bi-name="print" data-page-action-item="overflow-all" data-popover-close data-print-page data-check-hidden="true"> <span class="icon" aria-hidden="true"> <span class="docon docon-print font-size-sm color-primary"></span> </span> <span class="margin-left-xxs">Print</span> </button> </div> </details> </div></div> </div> <div> <button type="button" class="border contents-button button button-clear button-sm is-hidden-tablet has-inner-focus" data-bi-name="contents-expand" data-contents-button hidden> <span class="icon"> <span class="docon docon-editor-list-bullet" aria-hidden="true"></span> </span><span class="contents-expand-title">Table of contents</span></button> </div> <div class="content "><h1 id="aspnet-core-blazor">ASP.NET Core Blazor</h1><div class="display-flex justify-content-space-between align-items-center flex-wrap-wrap page-metadata-container"> <div class="margin-right-xxs"> <ul class="metadata page-metadata" data-bi-name="page info" lang="en-us" dir="ltr"><li>Article</li><li class="visibility-hidden-visual-diff"><time class="is-invisible" data-article-date aria-label="Article review date" datetime="2024-11-12T08:00:00Z" data-article-date-source="calculated">11/12/2024</time> </li><li class="contributors-holder display-none-print"> <button aria-label="View all contributors" class="contributors-button link-button" data-bi-name="contributors" title="View all contributors">11 contributors</button> </li></ul> </div> <div id="user-feedback" class="margin-block-xxs display-none-print" data-hide-on-archived> <button id="user-feedback-button" data-test-id="conceptual-feedback-button" class="button button-sm button-clear button-primary" type="button" data-bi-name="user-feedback-button" data-user-feedback-button > <span class="icon" aria-hidden="true"> <span class="docon docon-like"></span> </span> <span>Feedback</span> </button> </div></div><nav id="center-doc-outline" class="doc-outline is-hidden-desktop display-none-print margin-bottom-sm" data-bi-name="intopic toc" aria-label="In this article"> <h2 id="ms--in-this-article" class="title is-6 margin-block-xs">In this article</h2> </nav><div data-moniker="aspnetcore-3.1 aspnetcore-5.0 aspnetcore-6.0 aspnetcore-7.0 aspnetcore-8.0"> <div class="NOTE"> <p>Note</p> <p>This isn't the latest version of this article. For the current release, see the <a href="?view=aspnetcore-9.0&preserve-view=true" data-linktype="relative-path">.NET 9 version of this article</a>.</p> </div> </div> <div data-moniker="aspnetcore-3.1 aspnetcore-5.0 aspnetcore-7.0"> <div class="WARNING"> <p>Warning</p> <p>This version of ASP.NET Core is no longer supported. For more information, see the <a href="https://dotnet.microsoft.com/platform/support/policy/dotnet-core" data-linktype="external">.NET and .NET Core Support Policy</a>. For the current release, see the <a href="?view=aspnetcore-9.0&preserve-view=true" data-linktype="relative-path">.NET 9 version of this article</a>.</p> </div> </div> <div data-moniker="aspnetcore-10.0"> <div class="IMPORTANT"> <p>Important</p> <p>This information relates to a pre-release product that may be substantially modified before it's commercially released. Microsoft makes no warranties, express or implied, with respect to the information provided here.</p> <p>For the current release, see the <a href="?view=aspnetcore-9.0&preserve-view=true" data-linktype="relative-path">.NET 9 version of this article</a>.</p> </div> </div>  <p><em>Welcome to Blazor!</em></p> <div data-moniker="aspnetcore-10.0 aspnetcore-8.0 aspnetcore-9.0"> <p>Blazor is a <a href="/en-us/dotnet/standard/tour" data-linktype="absolute-path">.NET</a> frontend web framework that supports both server-side rendering and client interactivity in a single programming model:</p> </div> <div data-moniker="aspnetcore-3.1 aspnetcore-5.0 aspnetcore-6.0 aspnetcore-7.0"> <p>Blazor is a framework for building interactive client-side web UI with <a href="/en-us/dotnet/standard/tour" data-linktype="absolute-path">.NET</a>:</p> </div> <div data-moniker="aspnetcore-10.0 aspnetcore-6.0 aspnetcore-7.0 aspnetcore-8.0 aspnetcore-9.0"> <ul> <li>Create rich interactive UIs using <a href="/en-us/dotnet/csharp/" data-linktype="absolute-path">C#</a>.</li> <li>Share server-side and client-side app logic written in .NET.</li> <li>Render the UI as HTML and CSS for wide browser support, including mobile browsers.</li> <li>Build hybrid desktop and mobile apps with .NET and Blazor.</li> </ul> </div> <div data-moniker="aspnetcore-3.1 aspnetcore-5.0"> <ul> <li>Create rich interactive UIs using <a href="/en-us/dotnet/csharp/" data-linktype="absolute-path">C#</a>.</li> <li>Share server-side and client-side app logic written in .NET.</li> <li>Render the UI as HTML and CSS for wide browser support, including mobile browsers.</li> </ul> </div> <p>Using .NET for client-side web development offers the following advantages:</p> <ul> <li>Write code in C#, which can improve productivity in app development and maintenance.</li> <li>Leverage the existing .NET ecosystem of <a href="/en-us/dotnet/standard/class-libraries" data-linktype="absolute-path">.NET libraries</a>.</li> <li>Benefit from .NET's performance, reliability, and security.</li> <li>Stay productive on Windows, Linux, or macOS with a development environment, such as <a href="https://visualstudio.microsoft.com/" data-linktype="external">Visual Studio</a> or <a href="https://code.visualstudio.com/" data-linktype="external">Visual Studio Code</a>. Integrate with modern hosting platforms, such as <a href="/en-us/dotnet/standard/microservices-architecture/container-docker-introduction/index" data-linktype="absolute-path">Docker</a>.</li> <li>Build on a common set of languages, frameworks, and tools that are stable, feature-rich, and easy to use.</li> </ul> <div class="NOTE"> <p>Note</p> <p>For a Blazor quick start tutorial, see <a href="https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/intro" data-linktype="external">Build your first Blazor app</a>.</p> </div> <h2 id="components">Components</h2> <p>Blazor apps are based on <em>components</em>. A component 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 <a href="/en-us/dotnet/standard/assembly/" data-linktype="absolute-path">.NET assemblies</a> 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 <a href="../razor-pages/ui-class?view=aspnetcore-9.0" data-linktype="relative-path">Razor class libraries</a> or <a href="/en-us/nuget/what-is-nuget" data-linktype="absolute-path">NuGet packages</a>.</li> </ul> <p>The component class is usually written in the form of a <a href="../mvc/views/razor?view=aspnetcore-9.0" data-linktype="relative-path">Razor</a> markup page with a <code>.razor</code> file extension. Components in Blazor are formally referred to as <em>Razor components</em>, informally as <em>Blazor components</em>. Razor is a syntax for combining HTML markup with C# code designed for developer productivity. Razor allows you to switch between HTML markup and C# in the same file with <a href="/en-us/visualstudio/ide/using-intellisense" data-linktype="absolute-path">IntelliSense</a> programming support in Visual Studio.</p> <p>Blazor uses natural HTML tags for UI composition. The following Razor markup demonstrates a component that increments a counter when the user selects a button.</p> <pre><code class="lang-razor"><PageTitle>Counter</PageTitle> <h1>Counter</h1> <p role="status">Current count: @currentCount</p> <button class="btn btn-primary" @onclick="IncrementCount">Click me</button> @code { private int currentCount = 0; private void IncrementCount() { currentCount++; } } </code></pre> <p>Components render into an in-memory representation of the browser's <a href="https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction" data-linktype="external">Document Object Model (DOM)</a> called a <em>render tree</em>, which is used to update the UI in a flexible and efficient way.</p> <div data-moniker="aspnetcore-10.0 aspnetcore-8.0 aspnetcore-9.0"> <h2 id="build-a-full-stack-web-app-with-blazor">Build a full-stack web app with Blazor</h2> <p>Blazor Web Apps provide a component-based architecture with server-side rendering and full client-side interactivity in a single solution, where you can switch between server-side and client-side rendering modes and even mix them in the same page.</p> <p>Blazor Web Apps can quickly deliver UI to the browser by statically rendering HTML content from the server in response to requests. The page loads fast because UI rendering is performed quickly on the server without the need to download a large JavaScript bundle. Blazor can also further improve the user experience with various progressive enhancements to server rendering, such as enhanced navigation with form posts and streaming rendering of asynchronously-generated content.</p> <p>Blazor supports <em>interactive</em> server-side rendering (interactive SSR), where UI interactions are handled from the server over a real-time connection with the browser. Interactive SSR enables a rich user experience like one would expect from a client app but without the need to create API endpoints to access server resources. Page content for interactive pages is prerendered, where content on the server is initially generated and sent to the client without enabling event handlers for rendered controls. The server outputs the HTML UI of the page as soon as possible in response to the initial request, which makes the app feel more responsive to users.</p> <p>Blazor Web Apps support interactivity with client-side rendering (CSR) that relies on a .NET runtime built with <a href="https://webassembly.org" data-linktype="external">WebAssembly</a> that you can download with your app. When running Blazor on WebAssembly, your .NET code can access the full functionality of the browser and interop with JavaScript. Your .NET code runs in the browser's security sandbox with the protections that the sandbox provides against malicious actions on the client machine.</p> <p>Blazor apps can entirely target running on WebAssembly in the browser without the involvement of a server. For a <em>standalone Blazor WebAssembly app</em>, assets are deployed as static files to a web server or service capable of serving static content to clients. Once downloaded, standalone Blazor WebAssembly apps can be cached and executed offline as a Progressive Web App (PWA).</p> <h2 id="build-a-native-client-app-with-blazor-hybrid">Build a native client app with Blazor Hybrid</h2> <p><em>Blazor Hybrid</em> enables using Razor components in a native client app with a blend of native and web technologies for web, mobile, and desktop platforms. Code runs natively in the .NET process and renders web UI to an embedded Web View control using a local interop channel. WebAssembly isn't used in Hybrid apps. Hybrid apps are built with <a href="/en-us/dotnet/maui/what-is-maui" data-linktype="absolute-path">.NET Multi-platform App UI (.NET MAUI)</a>, which is a cross-platform framework for creating native mobile and desktop apps with C# and XAML.</p> <p>The Blazor Hybrid supports <a href="/en-us/dotnet/desktop/wpf/overview/" data-linktype="absolute-path">Windows Presentation Foundation (WPF)</a> and <a href="/en-us/dotnet/desktop/winforms/overview/" data-linktype="absolute-path">Windows Forms</a> to transition apps from earlier technology to .NET MAUI.</p> </div> <div data-moniker="aspnetcore-3.1 aspnetcore-5.0 aspnetcore-6.0 aspnetcore-7.0"> <h2 id="blazor-server">Blazor Server</h2> <p>Blazor Server provides support for hosting Razor components on the server in an ASP.NET Core app. UI updates are handled over a <a href="../signalr/introduction?view=aspnetcore-9.0" data-linktype="relative-path">SignalR</a> connection.</p> <p>The runtime stays on the server and handles:</p> <ul> <li>Executing the app's C# code.</li> <li>Sending UI events from the browser to the server.</li> <li>Applying UI updates to a rendered component that are sent back by the server.</li> </ul> <p>The connection used by Blazor Server to communicate with the browser is also used to handle JavaScript interop calls.</p> <p><img src="index/_static/blazor-server.png?view=aspnetcore-9.0" alt="Blazor Server runs .NET code on the server and interacts with the Document Object Model on the client over a SignalR connection" data-linktype="relative-path"></p> <p>Blazor Server apps render content differently than traditional models for rendering UI in ASP.NET Core apps using Razor views or Razor Pages. Both models use the <a href="../mvc/views/razor?view=aspnetcore-9.0" data-linktype="relative-path">Razor language</a> to describe HTML content for rendering, but they significantly differ in <em>how</em> markup is rendered.</p> <p>When a Razor Page or view is rendered, every line of Razor code emits HTML in text form. After rendering, the server disposes of the page or view instance, including any state that was produced. When another request for the page occurs, the entire page is rerendered to HTML again and sent to the client.</p> <p>Blazor Server produces a graph of components to display similar to an HTML or XML DOM. The component graph includes state held in properties and fields. Blazor evaluates the component graph to produce a binary representation of the markup, which is sent to the client for rendering. After the connection is made between the client and the server, the component's static prerendered elements are replaced with interactive elements. Prerendering content on the server in order to load HTML content on the client quickly makes the app feel more responsive to the client.</p> <p>After the components are interactive on the client, UI updates are triggered by user interaction and app events. When an update occurs, the component graph is rerendered, and a UI <em>diff</em> (difference) is calculated. This diff is the smallest set of DOM edits required to update the UI on the client. The diff is sent to the client in a binary format and applied by the browser.</p> <p>A component is disposed after the user navigates away from the component.</p> <h2 id="blazor-webassembly">Blazor WebAssembly</h2> <p>Blazor WebAssembly is a <a href="/en-us/dotnet/architecture/modern-web-apps-azure/choose-between-traditional-web-and-single-page-apps" data-linktype="absolute-path">single-page app (SPA) framework</a> for building interactive client-side web apps with .NET.</p> <p>Running .NET code inside web browsers is made possible by <a href="https://webassembly.org" data-linktype="external">WebAssembly</a> (abbreviated <code>wasm</code>). WebAssembly is a compact bytecode format optimized for fast download and maximum execution speed. WebAssembly is an open web standard and supported in web browsers without plugins. WebAssembly works in all modern web browsers, including mobile browsers.</p> <p>WebAssembly code can access the full functionality of the browser via JavaScript, called <em>JavaScript interoperability</em>, often shortened to <em>JavaScript interop</em> or <em>JS interop</em>. .NET code executed via WebAssembly in the browser runs in the browser's JavaScript sandbox with the protections that the sandbox provides against malicious actions on the client machine.</p> <p><img src="index/_static/blazor-webassembly.png?view=aspnetcore-9.0" alt="Blazor WebAssembly runs .NET code in the browser with WebAssembly." data-linktype="relative-path"></p> <p>When a Blazor WebAssembly app is built and run:</p> <ul> <li>C# code files and Razor files are compiled into .NET assemblies.</li> <li>The assemblies and the <a href="/en-us/dotnet/framework/get-started/overview" data-linktype="absolute-path">.NET runtime</a> are downloaded to the browser.</li> <li>Blazor WebAssembly bootstraps the .NET WebAssembly runtime and configures the runtime to load the assemblies for the app. The runtime uses JavaScript interop to handle DOM manipulation and browser API calls.</li> </ul> <p>The size of the published app, its <em>payload size</em>, is a critical performance factor for an app's usability. A large app takes a relatively long time to download to a browser, which diminishes the user experience. Blazor WebAssembly optimizes payload size to reduce download times:</p> <ul> <li>Unused code is stripped out of the app when it's published by the <a href="host-and-deploy/configure-trimmer?view=aspnetcore-9.0" data-linktype="relative-path">Intermediate Language (IL) Trimmer</a>.</li> <li>HTTP responses are compressed.</li> <li>The .NET runtime and assemblies are cached in the browser.</li> </ul> </div> <div data-moniker="aspnetcore-6.0 aspnetcore-7.0"> <h2 id="blazor-hybrid">Blazor Hybrid</h2> <p>Hybrid apps use a blend of native and web technologies. A <em>Blazor Hybrid</em> app uses Blazor in a native client app. Razor components run natively in the .NET process and render web UI to an embedded Web View control using a local interop channel. WebAssembly isn't used in Hybrid apps. Hybrid apps encompass the following technologies:</p> <ul> <li><a href="/en-us/dotnet/maui/what-is-maui" data-linktype="absolute-path">.NET Multi-platform App UI (.NET MAUI)</a>: A cross-platform framework for creating native mobile and desktop apps with C# and XAML.</li> <li><a href="/en-us/dotnet/desktop/wpf/overview/" data-linktype="absolute-path">Windows Presentation Foundation (WPF)</a>: A UI framework that is resolution-independent and uses a vector-based rendering engine, built to take advantage of modern graphics hardware.</li> <li><a href="/en-us/dotnet/desktop/winforms/overview/" data-linktype="absolute-path">Windows Forms</a>: A UI framework that creates rich desktop client apps for Windows. The Windows Forms development platform supports a broad set of app development features, including controls, graphics, data binding, and user input.</li> </ul> </div> <div data-moniker="aspnetcore-3.1 aspnetcore-5.0 aspnetcore-6.0 aspnetcore-7.0"> <h2 id="javascript-interop">JavaScript interop</h2> <p>For apps that require third-party JavaScript libraries and access to browser APIs, components interoperate with JavaScript. Components are capable of using any library or API that JavaScript is able to use. C# code can <a href="javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-9.0" data-linktype="relative-path">call into JavaScript code</a>, and JavaScript code can <a href="javascript-interoperability/call-dotnet-from-javascript?view=aspnetcore-9.0" data-linktype="relative-path">call into C# code</a>.</p> <h2 id="code-sharing-and-net-standard">Code sharing and .NET Standard</h2> <p>Blazor implements the <a href="/en-us/dotnet/standard/net-standard" data-linktype="absolute-path">.NET Standard</a>, which enables Blazor projects to reference libraries that conform to .NET Standard specifications. .NET Standard is a formal specification of .NET APIs that are common across .NET implementations. .NET Standard class libraries can be shared across different .NET platforms, such as Blazor, .NET Framework, .NET Core, Xamarin, Mono, and Unity.</p> <p>APIs that aren't applicable inside of a web browser (for example, accessing the file system, opening a socket, and threading) throw a <a href="/en-us/dotnet/api/system.platformnotsupportedexception" class="no-loc" data-linktype="absolute-path">PlatformNotSupportedException</a>.</p> </div> <h2 id="next-steps">Next steps</h2> <div class="nextstepaction"> <p><a href="https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/intro" data-linktype="external">Blazor Tutorial - Build your first Blazor app</a> <a href="supported-platforms?view=aspnetcore-9.0" data-linktype="relative-path">ASP.NET Core Blazor supported platforms</a></p> </div> </div><div id="ms--inline-notifications" class="margin-block-xs" data-bi-name="inline-notification"></div><div id="assertive-live-region" role="alert" aria-live="assertive" class="visually-hidden" aria-relevant="additions" aria-atomic="true"></div> <div id="polite-live-region" role="status" aria-live="polite" class="visually-hidden" aria-relevant="additions" aria-atomic="true"></div>  </main> <section class="feedback-section position-relative margin-top-lg border border-radius padding-xxs" data-bi-name="open-source-feedback-section" data-open-source-feedback-section hidden> <div class="display-flex flex-direction-column flex-direction-row-tablet"> <div class="width-450-tablet padding-inline-xs padding-inline-xs-tablet padding-top-xs padding-bottom-sm padding-top-xs-tablet background-color-body-medium"> <div class="display-flex flex-direction-column"> <div class="padding-bottom-xxs"> <span class="icon margin-right-xxs" aria-hidden="true"> <span class="docon docon-brand-github"></span> </span> <span class="font-weight-semibold" >Collaborate with us on GitHub</span> </div> <span class="line-height-normal"> The source for this content can be found on GitHub, where you can also create and review issues and pull requests. For more information, see <a href="https://learn.microsoft.com/contribute/content/dotnet/dotnet-contribute">our contributor guide</a>. </span> </div> </div> <div class="display-flex gap-xs width-full-tablet flex-direction-column padding-xs justify-content-space-evenly"> <div class="media"><div class="media-left"> <div class="image image-36x36" hidden data-open-source-image-container> <img class="theme-display is-light" src="https://learn.microsoft.com/media/logos/logo_net.svg" aria-hidden="true" data-open-source-image-light/> <img class="theme-display is-dark is-high-contrast" src="https://learn.microsoft.com/media/logos/logo_net.svg" aria-hidden="true" data-open-source-image-dark/> </div> </div> <div class="media-content"> <p class="font-size-xl font-weight-semibold margin-bottom-xxs" data-open-source-product-title>ASP.NET Core</p> <div class="display-flex gap-xs flex-direction-column"> <p class="line-height-normal" data-open-source-product-description></p> <div class="display-flex gap-xs flex-direction-column"> <a href="" data-github-link> <span class="icon margin-right-xxs" aria-hidden="true"> <span class="docon docon-bug"></span> </span> <span>Open a documentation issue</span> </a> <a href="https://github.com/dotnet/aspnetcore/blob/main/CONTRIBUTING.md" class="display-block margin-top-auto font-size-md" data-feedback-product-url> <span class="icon margin-right-xxs" aria-hidden="true"> <span class="docon docon-feedback"></span> </span> <span>Provide product feedback</span> </a> </div> </div> </div> </div> </div> </div> </section> <aside id="ms--additional-resources-mobile" aria-label="Additional resources" class="display-none-desktop display-none-print" > <hr class="hr" hidden /> <h2 id="ms--additional-resources-mobile-heading" class="title is-3" hidden>Additional resources</h2> <section id="right-rail-recommendations-mobile" data-bi-name="recommendations" hidden></section> <section id="right-rail-training-mobile" data-bi-name="learning-resources-card" hidden></section> <section id="right-rail-events-mobile" data-bi-name="events-card" hidden></section> <section id="right-rail-qna-mobile" data-bi-name="qna-link-card" hidden></section> </aside><div class="border-top is-visible-interactive has-default-focus margin-top-sm "><footer id="footer-interactive" data-bi-name="footer" class="footer-layout"><div class="display-flex gap-xs flex-wrap-wrap is-full-height padding-right-lg-desktop"><a data-mscc-ic="false" class="locale-selector-link button button-sm button-clear flex-shrink-0" href="#" data-bi-name="select-locale"> <span class="icon" aria-hidden="true"> <span class="docon docon-world"></span> </span> <span class="local-selector-link-text"></span></a><div class="ccpa-privacy-link" data-ccpa-privacy-link hidden> <a href="https://aka.ms/yourcaliforniaprivacychoices" class="button button-sm button-clear flex-shrink-0" data-mscc-ic="false" data-bi-name="your-privacy-choices" > <svg role="img" aria-label="California Consumer Privacy Act (CCPA) Opt-Out Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 14" xml:space="preserve" height="16" width="43" focusable="false" > <title>California Consumer Privacy Act (CCPA) Opt-Out Icon</title> <path d="M7.4 12.8h6.8l3.1-11.6H7.4C4.2 1.2 1.6 3.8 1.6 7s2.6 5.8 5.8 5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff"></path> <path d="M22.6 0H7.4c-3.9 0-7 3.1-7 7s3.1 7 7 7h15.2c3.9 0 7-3.1 7-7s-3.2-7-7-7zm-21 7c0-3.2 2.6-5.8 5.8-5.8h9.9l-3.1 11.6H7.4c-3.2 0-5.8-2.6-5.8-5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#06f"></path> <path d="M24.6 4c.2.2.2.6 0 .8L22.5 7l2.2 2.2c.2.2.2.6 0 .8-.2.2-.6.2-.8 0l-2.2-2.2-2.2 2.2c-.2.2-.6.2-.8 0-.2-.2-.2-.6 0-.8L20.8 7l-2.2-2.2c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0l2.2 2.2L23.8 4c.2-.2.6-.2.8 0z" style="fill:#fff"></path> <path d="M12.7 4.1c.2.2.3.6.1.8L8.6 9.8c-.1.1-.2.2-.3.2-.2.1-.5.1-.7-.1L5.4 7.7c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0L8 8.6l3.8-4.5c.2-.2.6-.2.9 0z" style="fill:#06f"></path> </svg> <span>Your Privacy Choices</span> </a> </div> <div class="flex-shrink-0"> <div class="dropdown has-caret-up"> <button class="dropdown-trigger button button-clear button-sm has-inner-focus theme-dropdown-trigger" aria-controls="theme-menu-interactive" aria-expanded="false" title="Theme" data-bi-name="theme"> <span class="icon"> <span class="docon docon-sun" aria-hidden="true"></span> </span> <span>Theme</span> <span class="icon expanded-indicator" aria-hidden="true"> <span class="docon docon-chevron-down-light"></span> </span> </button> <div class="dropdown-menu" id="theme-menu-interactive" role="menu"> <ul class="theme-selector padding-xxs" role="none"> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="light"> <span class="theme-light margin-right-xxs"> <span class="theme-selector-icon border display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>Light</span> </button> </li> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="dark"> <span class="theme-dark margin-right-xxs"> <span class="border theme-selector-icon display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>Dark</span> </button> </li> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="high-contrast"> <span class="theme-high-contrast margin-right-xxs"> <span class="border theme-selector-icon display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>High contrast</span> </button> </li> </ul> </div> </div> </div> </div> <ul class="links" data-bi-name="footerlinks"> <li class="manage-cookies-holder" hidden></li><li><a class="external-link-indicator" data-mscc-ic="false" href="/en-us/previous-versions/" data-bi-name="archivelink">Previous Versions</a></li> <li><a class="external-link-indicator" data-mscc-ic="false" href="https://techcommunity.microsoft.com/t5/microsoft-learn-blog/bg-p/MicrosoftLearnBlog" data-bi-name="bloglink">Blog</a></li> <li><a class="external-link-indicator" data-mscc-ic="false" href="/en-us/contribute/" data-bi-name="contributorGuide">Contribute</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://go.microsoft.com/fwlink/?LinkId=521839" data-bi-name="privacy">Privacy</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="/en-us/legal/termsofuse" data-bi-name="termsofuse">Terms of Use</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://www.microsoft.com/legal/intellectualproperty/Trademarks/" data-bi-name="trademarks">Trademarks</a></li><li>© Microsoft 2024</li> </ul> </footer></div></div><div id="ms--additional-resources" class="right-container column is-4-desktop display-none display-block-desktop" data-bi-name="pageactions" role="complementary" aria-label="Additional resources" > <div id="affixed-right-container" class="margin-top-sm-tablet" data-bi-name="right-column"> <h2 id="ms--additional-resources-heading" class="title is-6 margin-top-md" hidden>Additional resources</h2> <section id="right-rail-events" data-bi-name="events-card" hidden></section> <section id="right-rail-training" data-bi-name="learning-resources-card" hidden></section> <section id="right-rail-recommendations" data-bi-name="recommendations" hidden></section> <nav id="side-doc-outline" class="doc-outline" data-bi-name="intopic toc" aria-label="In this article"> <h3>In this article</h3> </nav> <section id="right-rail-qna" class="margin-top-xxs" data-bi-name="qna-link-card" hidden></section> </div> </div></div>  </section>   <aside id="interactive-container" class="interactive-container is-visible-interactive column has-body-background-dark "> </aside>  </div> </div>  <section class="border-top has-default-focus is-hidden-interactive margin-top-sm "><footer id="footer" data-bi-name="footer" class="footer-layout uhf-container has-padding" role="contentinfo"><div class="display-flex gap-xs flex-wrap-wrap is-full-height padding-right-lg-desktop"><a data-mscc-ic="false" class="locale-selector-link button button-sm button-clear flex-shrink-0" href="#" data-bi-name="select-locale"> <span class="icon" aria-hidden="true"> <span class="docon docon-world"></span> </span> <span class="local-selector-link-text"></span></a><div class="ccpa-privacy-link" data-ccpa-privacy-link hidden> <a href="https://aka.ms/yourcaliforniaprivacychoices" class="button button-sm button-clear flex-shrink-0" data-mscc-ic="false" data-bi-name="your-privacy-choices" > <svg role="img" aria-label="California Consumer Privacy Act (CCPA) Opt-Out Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 14" xml:space="preserve" height="16" width="43" focusable="false" > <title>California Consumer Privacy Act (CCPA) Opt-Out Icon</title> <path d="M7.4 12.8h6.8l3.1-11.6H7.4C4.2 1.2 1.6 3.8 1.6 7s2.6 5.8 5.8 5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff"></path> <path d="M22.6 0H7.4c-3.9 0-7 3.1-7 7s3.1 7 7 7h15.2c3.9 0 7-3.1 7-7s-3.2-7-7-7zm-21 7c0-3.2 2.6-5.8 5.8-5.8h9.9l-3.1 11.6H7.4c-3.2 0-5.8-2.6-5.8-5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#06f"></path> <path d="M24.6 4c.2.2.2.6 0 .8L22.5 7l2.2 2.2c.2.2.2.6 0 .8-.2.2-.6.2-.8 0l-2.2-2.2-2.2 2.2c-.2.2-.6.2-.8 0-.2-.2-.2-.6 0-.8L20.8 7l-2.2-2.2c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0l2.2 2.2L23.8 4c.2-.2.6-.2.8 0z" style="fill:#fff"></path> <path d="M12.7 4.1c.2.2.3.6.1.8L8.6 9.8c-.1.1-.2.2-.3.2-.2.1-.5.1-.7-.1L5.4 7.7c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0L8 8.6l3.8-4.5c.2-.2.6-.2.9 0z" style="fill:#06f"></path> </svg> <span>Your Privacy Choices</span> </a> </div> <div class="flex-shrink-0"> <div class="dropdown has-caret-up"> <button class="dropdown-trigger button button-clear button-sm has-inner-focus theme-dropdown-trigger" aria-controls="theme-menu" aria-expanded="false" title="Theme" data-bi-name="theme"> <span class="icon"> <span class="docon docon-sun" aria-hidden="true"></span> </span> <span>Theme</span> <span class="icon expanded-indicator" aria-hidden="true"> <span class="docon docon-chevron-down-light"></span> </span> </button> <div class="dropdown-menu" id="theme-menu" role="menu"> <ul class="theme-selector padding-xxs" role="none"> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="light"> <span class="theme-light margin-right-xxs"> <span class="theme-selector-icon border display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>Light</span> </button> </li> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="dark"> <span class="theme-dark margin-right-xxs"> <span class="border theme-selector-icon display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>Dark</span> </button> </li> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="high-contrast"> <span class="theme-high-contrast margin-right-xxs"> <span class="border theme-selector-icon display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>High contrast</span> </button> </li> </ul> </div> </div> </div> </div> <ul class="links" data-bi-name="footerlinks"> <li class="manage-cookies-holder" hidden></li><li><a class="external-link-indicator" data-mscc-ic="false" href="/en-us/previous-versions/" data-bi-name="archivelink">Previous Versions</a></li> <li><a class="external-link-indicator" data-mscc-ic="false" href="https://techcommunity.microsoft.com/t5/microsoft-learn-blog/bg-p/MicrosoftLearnBlog" data-bi-name="bloglink">Blog</a></li> <li><a class="external-link-indicator" data-mscc-ic="false" href="/en-us/contribute/" data-bi-name="contributorGuide">Contribute</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://go.microsoft.com/fwlink/?LinkId=521839" data-bi-name="privacy">Privacy</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="/en-us/legal/termsofuse" data-bi-name="termsofuse">Terms of Use</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://www.microsoft.com/legal/intellectualproperty/Trademarks/" data-bi-name="trademarks">Trademarks</a></li><li>© Microsoft 2024</li> </ul> </footer> </section> <div id="action-panel" role="region" aria-label="Action Panel" class="action-panel has-default-focus" tabindex="-1"></div> </body> </html>