{"id":3988,"date":"2023-11-04T23:13:58","date_gmt":"2023-11-04T23:13:58","guid":{"rendered":"http:\/\/localhost:10003\/how-to-create-a-web-app-with-asp-net-core-and-blazor\/"},"modified":"2023-11-05T05:48:25","modified_gmt":"2023-11-05T05:48:25","slug":"how-to-create-a-web-app-with-asp-net-core-and-blazor","status":"publish","type":"post","link":"http:\/\/localhost:10003\/how-to-create-a-web-app-with-asp-net-core-and-blazor\/","title":{"rendered":"How to Create a Web App with ASP.NET Core and Blazor"},"content":{"rendered":"<p>Blazor is a web framework developed by Microsoft that allows you to build interactive client-side web UIs using .NET and C# instead of JavaScript. It combines the flexibility of JavaScript with the power of .NET to provide a productive and efficient development experience.<\/p>\n<p>In this tutorial, we will walk through the process of creating a web app with ASP.NET Core and Blazor. We will cover the following steps:<\/p>\n<ol>\n<li>Setting up the development environment<\/li>\n<li>Creating a new ASP.NET Core project<\/li>\n<li>Adding Blazor support to the project<\/li>\n<li>Creating a simple Blazor component<\/li>\n<li>Using the component in a Blazor page<\/li>\n<li>Running the Blazor app<\/li>\n<\/ol>\n<p>Let&#8217;s get started!<\/p>\n<h2>1. Setting up the development environment<\/h2>\n<p>Before you can create a web app with ASP.NET Core and Blazor, you need to set up your development environment. Here are the requirements:<\/p>\n<ul>\n<li><a href=\"https:\/\/dotnet.microsoft.com\/download\">.NET Core SDK<\/a> (version 5.0 or later)<\/li>\n<li>A code editor (such as Visual Studio Code or Visual Studio)<\/li>\n<\/ul>\n<p>Make sure you have the .NET Core SDK installed on your machine. You can verify the installation by running the following command in your terminal or command prompt:<\/p>\n<pre><code>dotnet --version\n<\/code><\/pre>\n<p>If the command displays the version of the .NET Core SDK installed, you&#8217;re good to go.<\/p>\n<h2>2. Creating a new ASP.NET Core project<\/h2>\n<p>To create a new ASP.NET Core project, open your terminal or command prompt and navigate to the directory where you want to create the project.<\/p>\n<p>Run the following command to create a new ASP.NET Core project:<\/p>\n<pre><code>dotnet new webapp -o MyWebApp\n<\/code><\/pre>\n<p>This command creates a new ASP.NET Core project named &#8220;MyWebApp&#8221; in a directory called &#8220;MyWebApp&#8221;. You can replace &#8220;MyWebApp&#8221; with any name you prefer.<\/p>\n<p>Navigate into the project directory:<\/p>\n<pre><code>cd MyWebApp\n<\/code><\/pre>\n<h2>3. Adding Blazor support to the project<\/h2>\n<p>To add Blazor support to the project, run the following command in your terminal or command prompt:<\/p>\n<pre><code>dotnet new blazorserver\n<\/code><\/pre>\n<p>This command adds the necessary NuGet package references and files to enable Blazor in your ASP.NET Core project.<\/p>\n<h2>4. Creating a simple Blazor component<\/h2>\n<p>Blazor components are the building blocks of a Blazor app. They are similar to Razor views in traditional ASP.NET MVC applications.<\/p>\n<p>To create a simple Blazor component, open the project in your code editor and navigate to the &#8220;Pages&#8221; folder located in the &#8220;Areas&#8221; folder. This folder contains the Blazor pages of your app.<\/p>\n<p>Create a new file called &#8220;Counter.razor&#8221; and add the following code:<\/p>\n<pre><code class=\"language-csharp\">@page \"\/counter\"\n\n&lt;h1&gt;Counter&lt;\/h1&gt;\n\n&lt;p&gt;Current count: @_count&lt;\/p&gt;\n\n&lt;button class=\"btn btn-primary\" @onclick=\"IncrementCount\"&gt;Increment&lt;\/button&gt;\n\n@code {\n    private int _count = 0;\n\n    private void IncrementCount()\n    {\n        _count++;\n    }\n}\n<\/code><\/pre>\n<p>This code creates a simple Blazor component called &#8220;Counter&#8221;. It displays the current count and provides a button to increment the count.<\/p>\n<h2>5. Using the component in a Blazor page<\/h2>\n<p>To use the &#8220;Counter&#8221; component in a Blazor page, open the &#8220;Index.razor&#8221; file located in the &#8220;Pages&#8221; folder.<\/p>\n<p>Replace the existing code with the following:<\/p>\n<pre><code class=\"language-csharp\">@page \"\/\"\n@inherits LayoutComponentBase\n\n&lt;h1&gt;Hello, Blazor!&lt;\/h1&gt;\n\n&lt;Counter \/&gt;\n<\/code><\/pre>\n<p>This code sets the default route for the page to &#8220;\/&#8221;, inherits from the &#8220;LayoutComponentBase&#8221; class, and adds the &#8220;Counter&#8221; component inside the page.<\/p>\n<h2>6. Running the Blazor app<\/h2>\n<p>To run the Blazor app, navigate to the project directory in your terminal or command prompt:<\/p>\n<pre><code>cd MyWebApp\n<\/code><\/pre>\n<p>Run the following command to start the app:<\/p>\n<pre><code>dotnet run\n<\/code><\/pre>\n<p>Open your web browser and navigate to `https:\/\/localhost:5001` to see the running Blazor app. You should see the &#8220;Hello, Blazor!&#8221; heading and the &#8220;Counter&#8221; component.<\/p>\n<p>Click the &#8220;Increment&#8221; button in the component to see the count increase.<\/p>\n<p>Congratulations! You have created a web app with ASP.NET Core and Blazor. You can now explore more features and build more sophisticated applications using Blazor&#8217;s powerful capabilities.<\/p>\n<h2>Conclusion<\/h2>\n<p>Blazor provides an efficient way to build interactive client-side web UIs using .NET and C#. With its familiar programming model and powerful capabilities, you can create web apps that are both productive and performant.<\/p>\n<p>In this tutorial, we walked through the process of creating a web app with ASP.NET Core and Blazor. We covered the steps of setting up the development environment, creating a new ASP.NET Core project, adding Blazor support, creating a simple Blazor component, using the component in a Blazor page, and running the Blazor app.<\/p>\n<p>Now it&#8217;s time to explore more of the Blazor framework and unleash its full potential in your web development projects. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Blazor is a web framework developed by Microsoft that allows you to build interactive client-side web UIs using .NET and C# instead of JavaScript. It combines the flexibility of JavaScript with the power of .NET to provide a productive and efficient development experience. In this tutorial, we will walk through <a href=\"http:\/\/localhost:10003\/how-to-create-a-web-app-with-asp-net-core-and-blazor\/\" class=\"btn btn-link continue-link\">Continue Reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[711,3,717,723,721,720,722,714,716,719,718,712,713,49,715,710],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create a Web App with ASP.NET Core and Blazor - Pantherax Blogs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/localhost:10003\/how-to-create-a-web-app-with-asp-net-core-and-blazor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Web App with ASP.NET Core and Blazor\" \/>\n<meta property=\"og:description\" content=\"Blazor is a web framework developed by Microsoft that allows you to build interactive client-side web UIs using .NET and C# instead of JavaScript. It combines the flexibility of JavaScript with the power of .NET to provide a productive and efficient development experience. In this tutorial, we will walk through Continue Reading\" \/>\n<meta property=\"og:url\" content=\"http:\/\/localhost:10003\/how-to-create-a-web-app-with-asp-net-core-and-blazor\/\" \/>\n<meta property=\"og:site_name\" content=\"Pantherax Blogs\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-04T23:13:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-05T05:48:25+00:00\" \/>\n<meta name=\"author\" content=\"Panther\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Panther\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"http:\/\/localhost:10003\/how-to-create-a-web-app-with-asp-net-core-and-blazor\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/how-to-create-a-web-app-with-asp-net-core-and-blazor\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Panther\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\"\n\t            },\n\t            \"headline\": \"How to Create a Web App with ASP.NET Core and Blazor\",\n\t            \"datePublished\": \"2023-11-04T23:13:58+00:00\",\n\t            \"dateModified\": \"2023-11-05T05:48:25+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/how-to-create-a-web-app-with-asp-net-core-and-blazor\/\"\n\t            },\n\t            \"wordCount\": 687,\n\t            \"publisher\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t            },\n\t            \"keywords\": [\n\t                \"\\\"Blazor\\\"\",\n\t                \"\\\"C#\\\"\",\n\t                \"\\\"client-side rendering\\\"\",\n\t                \"\\\"component-based architecture\\\"]\",\n\t                \"\\\"model-view-controller\\\"\",\n\t                \"\\\"MVC\\\"\",\n\t                \"\\\"Razor components\\\"\",\n\t                \"\\\"Razor\\\"\",\n\t                \"\\\"server-side rendering\\\"\",\n\t                \"\\\"single-page application\\\"\",\n\t                \"\\\"UI components\\\"\",\n\t                \"\\\"web app development\\\"\",\n\t                \"\\\"web application\\\"\",\n\t                \"\\\"Web development\\\"\",\n\t                \"\\\"WebAssembly\\\"\",\n\t                \"[\\\"ASP.NET Core\\\"\"\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"http:\/\/localhost:10003\/how-to-create-a-web-app-with-asp-net-core-and-blazor\/\",\n\t            \"url\": \"http:\/\/localhost:10003\/how-to-create-a-web-app-with-asp-net-core-and-blazor\/\",\n\t            \"name\": \"How to Create a Web App with ASP.NET Core and Blazor - Pantherax Blogs\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#website\"\n\t            },\n\t            \"datePublished\": \"2023-11-04T23:13:58+00:00\",\n\t            \"dateModified\": \"2023-11-05T05:48:25+00:00\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/how-to-create-a-web-app-with-asp-net-core-and-blazor\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"http:\/\/localhost:10003\/how-to-create-a-web-app-with-asp-net-core-and-blazor\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"http:\/\/localhost:10003\/how-to-create-a-web-app-with-asp-net-core-and-blazor\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"http:\/\/localhost:10003\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"How to Create a Web App with ASP.NET Core and Blazor\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#website\",\n\t            \"url\": \"http:\/\/localhost:10003\/\",\n\t            \"name\": \"Pantherax Blogs\",\n\t            \"description\": \"\",\n\t            \"publisher\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"http:\/\/localhost:10003\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": \"required name=search_term_string\"\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#organization\",\n\t            \"name\": \"Pantherax Blogs\",\n\t            \"url\": \"http:\/\/localhost:10003\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t                \"contentUrl\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t                \"width\": 1024,\n\t                \"height\": 1024,\n\t                \"caption\": \"Pantherax Blogs\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\"\n\t            }\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\",\n\t            \"name\": \"Panther\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/image\/\",\n\t                \"url\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t                \"contentUrl\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t                \"caption\": \"Panther\"\n\t            },\n\t            \"sameAs\": [\n\t                \"http:\/\/localhost:10003\"\n\t            ],\n\t            \"url\": \"http:\/\/localhost:10003\/author\/pepethefrog\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create a Web App with ASP.NET Core and Blazor - Pantherax Blogs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/localhost:10003\/how-to-create-a-web-app-with-asp-net-core-and-blazor\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Web App with ASP.NET Core and Blazor","og_description":"Blazor is a web framework developed by Microsoft that allows you to build interactive client-side web UIs using .NET and C# instead of JavaScript. It combines the flexibility of JavaScript with the power of .NET to provide a productive and efficient development experience. In this tutorial, we will walk through Continue Reading","og_url":"http:\/\/localhost:10003\/how-to-create-a-web-app-with-asp-net-core-and-blazor\/","og_site_name":"Pantherax Blogs","article_published_time":"2023-11-04T23:13:58+00:00","article_modified_time":"2023-11-05T05:48:25+00:00","author":"Panther","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Panther","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/localhost:10003\/how-to-create-a-web-app-with-asp-net-core-and-blazor\/#article","isPartOf":{"@id":"http:\/\/localhost:10003\/how-to-create-a-web-app-with-asp-net-core-and-blazor\/"},"author":{"name":"Panther","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7"},"headline":"How to Create a Web App with ASP.NET Core and Blazor","datePublished":"2023-11-04T23:13:58+00:00","dateModified":"2023-11-05T05:48:25+00:00","mainEntityOfPage":{"@id":"http:\/\/localhost:10003\/how-to-create-a-web-app-with-asp-net-core-and-blazor\/"},"wordCount":687,"publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"keywords":["\"Blazor\"","\"C#\"","\"client-side rendering\"","\"component-based architecture\"]","\"model-view-controller\"","\"MVC\"","\"Razor components\"","\"Razor\"","\"server-side rendering\"","\"single-page application\"","\"UI components\"","\"web app development\"","\"web application\"","\"Web development\"","\"WebAssembly\"","[\"ASP.NET Core\""],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/localhost:10003\/how-to-create-a-web-app-with-asp-net-core-and-blazor\/","url":"http:\/\/localhost:10003\/how-to-create-a-web-app-with-asp-net-core-and-blazor\/","name":"How to Create a Web App with ASP.NET Core and Blazor - Pantherax Blogs","isPartOf":{"@id":"http:\/\/localhost:10003\/#website"},"datePublished":"2023-11-04T23:13:58+00:00","dateModified":"2023-11-05T05:48:25+00:00","breadcrumb":{"@id":"http:\/\/localhost:10003\/how-to-create-a-web-app-with-asp-net-core-and-blazor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/localhost:10003\/how-to-create-a-web-app-with-asp-net-core-and-blazor\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/localhost:10003\/how-to-create-a-web-app-with-asp-net-core-and-blazor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/localhost:10003\/"},{"@type":"ListItem","position":2,"name":"How to Create a Web App with ASP.NET Core and Blazor"}]},{"@type":"WebSite","@id":"http:\/\/localhost:10003\/#website","url":"http:\/\/localhost:10003\/","name":"Pantherax Blogs","description":"","publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/localhost:10003\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/localhost:10003\/#organization","name":"Pantherax Blogs","url":"http:\/\/localhost:10003\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/","url":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","contentUrl":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","width":1024,"height":1024,"caption":"Pantherax Blogs"},"image":{"@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7","name":"Panther","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/person\/image\/","url":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","contentUrl":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","caption":"Panther"},"sameAs":["http:\/\/localhost:10003"],"url":"http:\/\/localhost:10003\/author\/pepethefrog\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/3988"}],"collection":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/comments?post=3988"}],"version-history":[{"count":1,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/3988\/revisions"}],"predecessor-version":[{"id":4564,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/3988\/revisions\/4564"}],"wp:attachment":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/media?parent=3988"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/categories?post=3988"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/tags?post=3988"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}