{"id":35569,"date":"2019-03-07T06:00:53","date_gmt":"2019-03-07T13:00:53","guid":{"rendered":"http:\/\/devblogs.microsoft.com\/premier-developer\/?p=35569"},"modified":"2019-03-01T08:05:29","modified_gmt":"2019-03-01T15:05:29","slug":"exploring-blazor-with-visual-studio-2019","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/premier-developer\/exploring-blazor-with-visual-studio-2019\/","title":{"rendered":"Exploring Blazor with Visual Studio 2019"},"content":{"rendered":"

In this post, Senior App Dev Manager Keith Beller<\/a>\u00a0walks use through Blazor, a new experimental framework for WebAssembly.<\/p>\n

\n

What is Blazor?<\/h2>\n

After 22 years of dominance as \u201cthe\u201d native language for client-side browser interaction, JavaScript is facing new competition from other popular languages such as C\/C++, Go, PHP, C# and others<\/a> thanks to the growing adoption of WebAssembly<\/a> or Wasm. All four major browser engines Firefox, Chrome, Safari and Edge now support WebAssembly. In fact, according to caniuse.com<\/a> as of March 1st<\/sup> 2019 80.62% of users globally are using web browsers that support WebAssembly.<\/p>\n

Blazor<\/a> is a new experimental web framework that allows you to write client-side web apps using C# all made possible by WebAssembly. That\u2019s right, C# running natively in the browser. Basically, WebAssembly apps are passed to the browser in an efficient binary instruction format that is able run natively and performantly at near-native speed and this has opened up new opportunities for languages like C# to run client-side in the browser.<\/p>\n

To demonstrate how easy it is to work with Blazor, we will walk you through a simple example app.<\/p>\n

Getting started with Blazor<\/h2>\n

To get started with Blazor you\u2019ll need Visual Studio 2019, .Net Core SDK 3.0 Preview, the Blazor extensions form the Visual Studio Market Place and Blazor Templates. You\u2019ll find the installation guide (here<\/a>).<\/p>\n

Create a new project<\/h2>\n

After you\u2019ve installed all the prerequisites, create your first project by selected ASP.NET Core Web Applications. Next, name your project and continue.<\/p>\n

<\/p>\n

If you\u2019ve installed everything correctly you should see .NET Core and ASP.NET Core 3.0 in the drop-down boxes with two Blazor templates. For this post we will work with the \u201cBlazor\u201d template.<\/p>\n

<\/p>\n

Troubleshooting your first build<\/h2>\n

The main instructions don\u2019t call this out directly, but you\u2019ll need .Net Core 2.2<\/a> installed to build and run your Blazor applications. If you don\u2019t have .NET Core 2.2, you will get an error when you build your app that reads, \u201cPackage Microsoft.AspNetCore.Blazor.Cli 0.8.0-preview\u2026 is not compatible with netcoreapp2.2\u201d.<\/em><\/p>\n

<\/p>\n

You may think as I did that changing the <TargetFramework> to netcoreapp3.0 will fix the issue. It does not, instead changing the target framework will cause a linker error when you build in the Blazor.MonoRuntime.targets file on the line that executes the command \u201cdotnet &quot;$(MonoLinkerPath)\u2026\u201d. If you tried deleting this line and didn\u2019t save a backup of the file, you\u2019ll need to delete the Blazor packages found in the C:\\Users\\<USERNAME>\\.nuget\\packages\\ directory and reinstall Blazor. So, to summarize, the fix here is leave the Target Framework alone and just the install .NET Core 2.2 SDK.<\/p>\n

You\u2019ll also want to enable previews of the .NET Core SDK which you can do by navigating to Tools > Options <\/strong>and checking the box \u201cUse previews of the .NET Core SDK\u201d.<\/p>\n

<\/p>\n

Release notes for the latest release (0.8.0) as of this post can be found (here<\/a>). There is a troubleshooting section in the release notes should you get stuck.<\/p>\n

Building a simple Mortgage Payment Calculator<\/h2>\n

Inspired by this<\/a> Stack Overflow post, lets create a simple mortgage payment calculator to demonstrate the power of Blazor. If you\u2019re familiar with ASP.NET, you\u2019ll be very at home with the Blazor development experience. Blazor is essentially Razer views that run in the browser.<\/p>\n

To begin open Shared > NavMenu.cshtml<\/strong> and add the snippet below to the @NavMenuCssClass div container and save the file.<\/p>\n

This will add a menu to the app side bar, so you are able to navigate to the calculator page we are going to build.<\/p>\n

<\/p>\n

<li class=\"nav-item px-3\">\r\n    <NavLink class=\"nav-link\" href=\"calculator\">\r\n        <span class=\"oi oi-list-rich\" aria-hidden=\"true\"><\/span> Calculator\r\n    <\/NavLink>\r\n<\/li><\/pre>\n
Next, create a file in the Pages directory named Calculator.cshtml.<\/p>\n
<\/p>\n
Paste this code snippet into the file and run the example.<\/p>\n
@page \"\/calculator\"\r\n\r\n<div class=\"card\">\r\n    <div class=\"card-header\">\r\n        <h1>Mortgage Payment Calculator<\/h1>\r\n    <\/div>\r\n    <div class=\"card-body\">\r\n        <div class=\"form-group\">\r\n            <label for=\"enterPrinciple\">Principle Amount<\/label>\r\n            <input id=\"enterPrinciple\" class=\"form-control\" aria-describedby=\"enterPrincipleHelp\" placeholder=\"Enter Principle\" bind=\"@p\" \/>\r\n            <small id=\"enterPrincipleHelp\" class=\"form-text text-muted\">Enter the princple amount. e.g. 100000<\/small>\r\n        <\/div>\r\n        <div class=\"form-group\">\r\n            <label for=\"enterInterest\">Interest Rate<\/label>\r\n            <input id=\"enterInterest\" class=\"form-control\" aria-describedby=\"enterInterestHelp\" placeholder=\"Enter the interest rate\" bind=\"@r\" \/>\r\n            <small id=\"enterInterestHelp\" class=\"form-text text-muted\">Enter the interest rate. e.g.  3.75<\/small>\r\n        <\/div>\r\n        <div class=\"form-group\">\r\n            <label for=\"enterDuration\">Term (Years)<\/label>\r\n            <select class=\"form-control\" aria-describedby=\"enterDurationHelp\" id=\"enterDuration\" bind=\"@y\">\r\n                @for (int i = 1; i <= 30; i++)\r\n                {\r\n                    <option>@i<\/option>\r\n                }\r\n            <\/select>\r\n            <small id=\"enterDurationHelp\" class=\"form-text text-muted\">Select the duration of the loan (in years).<\/small>\r\n        <\/div>\r\n        <button class=\"btn btn-primary\" onclick=\"@Calculate\">Calculate<\/button>\r\n        <br \/>\r\n        <br \/>\r\n        <div class=\"alert alert-secondary\" role=\"alert\">\r\n            Your monthly payment will be: <strong>$ @m.ToString(\"0.00\")<\/strong>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n@functions {\r\n\r\n    double p = 100000; \/\/ principal\r\n    double r = 3.75; \/\/ interest rate\r\n    int y = 30; \/\/ number of payments\r\n    double m = 463.12; \/\/ monthly payment\r\n\r\n    void Calculate()\r\n    {\r\n        double rate = r \/ 100;\r\n        double monthlyRate = rate \/ 12;\r\n        double payments = 12 * y;\r\n\r\n        m = p * (monthlyRate * Math.Pow(1 + monthlyRate, payments)) \/ (Math.Pow(1 + monthlyRate, payments) - 1);\r\n    }\r\n}\r\n<\/pre>\n
If you\u2019ve done everything correctly you should see an interactive page that looks like this.<\/p>\n
<\/p>\n
Again, if you\u2019re familiar with ASP.NET this is a very low friction development experience. This page took just a few minutes to assemble. The binding experience Daniel and his team has put together looks very promising. Blazor also supports component libraries, dependency injection, debugging and much more. I encourage you to take a closer look at Blazor. For additional learning resources see Daniel Roth\u2019s video published on Channel 9 and also Robert Green\u2019s Visual Studio Toolbox episodes Blazor Part 1<\/a> and Blazor Part 2<\/a> with special guest Sam Basu and Ed Charbeneau. These videos provide an excellent introduction to the framework.<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
In this post, Senior App Dev Manager Keith Beller\u00a0walks use through Blazor, a new experimental framework for WebAssembly. What is Blazor? After 22 years of dominance as \u201cthe\u201d native language for client-side browser interaction, JavaScript is facing new competition from other popular languages such as C\/C++, Go, PHP, C# and others thanks to the growing […]<\/p>\n","protected":false},"author":582,"featured_media":35571,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[80,129,55],"tags":[61,3,386],"class_list":["post-35569","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-net","category-premier","category-web","tag-asp-net-core","tag-team","tag-webassembly"],"acf":[],"blog_post_summary":"
In this post, Senior App Dev Manager Keith Beller\u00a0walks use through Blazor, a new experimental framework for WebAssembly. What is Blazor? After 22 years of dominance as \u201cthe\u201d native language for client-side browser interaction, JavaScript is facing new competition from other popular languages such as C\/C++, Go, PHP, C# and others thanks to the growing […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/35569","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/users\/582"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/comments?post=35569"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/35569\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media\/35571"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media?parent=35569"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/categories?post=35569"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/tags?post=35569"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}