{"id":92,"date":"2019-06-10T17:59:27","date_gmt":"2019-06-10T16:59:27","guid":{"rendered":"https:\/\/archicode.be\/?p=92"},"modified":"2019-06-10T17:59:27","modified_gmt":"2019-06-10T16:59:27","slug":"how-to-blazorify-an-existing-mvc-app","status":"publish","type":"post","link":"https:\/\/archicode.be\/index.php\/2019\/06\/10\/how-to-blazorify-an-existing-mvc-app\/","title":{"rendered":"How to blazorify an existing mvc app"},"content":{"rendered":"<p>Blazor is awesome. \u00a0If you don&#8217;t know what it is, you can check it out <a href=\"https:\/\/github.com\/aspnet\/Blazor\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>\u00a0but to summarize, it&#8217;s a framework that allows .net code to run in your browser using the power of Web Assembly.<\/p>\n<p>I&#8217;ve found a lot of tutorials using the official blazor templates but only hints on how exactly using Blazor when you already have an exisiting mvc app. \u00a0This is why I wrote this piece. \u00a0There are a few steps to accomplish but it&#8217;s worth the hassle, believe me !<\/p>\n<h1>1. Prerequesites<\/h1>\n<p>To start working with Blazor you need the following :<\/p>\n<ul>\n<li>Visual studio 2019 (Microsoft currently recommends to use the 2019 preview to work with .net core 3 but it&#8217;s not necessary as you can allow the preview framework in the release version of Visual Studio 2019).<\/li>\n<li>.Net core 3 (you can download it\u00a0<a href=\"https:\/\/dotnet.microsoft.com\/download\/dotnet-core\/3.0\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>). \u00a0If you work with the release version of Visual Studio 2019 you need to allow the use of the preview framework (as .net core 3 is still in preview).<br \/>\nTo do so, I found\u00a0<a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/net-core-tooling-update-for-visual-studio-2017-version-15-9\/\" target=\"_blank\" rel=\"noopener noreferrer\">this tutorial<\/a>\u00a0on the web but it wasn&#8217;t working with my Visual Studio 2019 professional edition. \u00a0The setting I was looking for is in Visual Studio Options &gt; Environment &gt; Preview Features &gt; Use previews of the .net framework<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-93\" src=\"\/wp-content\/uploads\/2019\/06\/Annotation-2019-06-10-155940.jpg\" alt=\"Annotation 2019-06-10 155940.jpg\" width=\"2429\" height=\"148\" \/><\/li>\n<\/ul>\n<h1>2. Migrate your application to .net core 3<\/h1>\n<p>To do so, all I did was right click on the project name in solution explorer &gt; properties &gt; Applications &gt; Target Framework<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-94\" src=\"\/wp-content\/uploads\/2019\/06\/migrate_solution_to_dotnet_core_3.gif\" alt=\"migrate_solution_to_dotnet_core_3.gif\" width=\"1456\" height=\"1560\" \/><\/p>\n<p>Now after you do this, there is a good chance that your solution won&#8217;t compile anymore because of incompatible versions of some nuget packages. \u00a0All you need to do is update the packages to a compatible version (note that many of them might still be in preview).<\/p>\n<p>If you happen to encounter this error : &#8220;<em>The project &#8216;project name&#8217; must provide a value for Configuration<\/em>&#8220;, you might check out tomRedox&#8217;s solution\u00a0<a href=\"https:\/\/github.com\/dotnet\/cli\/issues\/10336\" target=\"_blank\" rel=\"noopener noreferrer\">here on github<\/a> (In short, just delete the Microsoft.Aspnetcore.Razor.Design package which isn&#8217;t needed anymore as it is now part of the .net core framework).<\/p>\n<h1>3. install blazor<\/h1>\n<p>Obviously you need to add the Blazor package in your solution. \u00a0To do so just open the package manager console and type this command :<\/p>\n<pre>install-package microsoft.aspnetcore.blazor<\/pre>\n<p>At the time of this writing, the latest stable version is 0.7.0 but you can use the preview versions as well.<\/p>\n<h1>4. Edit the startup.cs and the _layout.cshtml file<\/h1>\n<p>we need to do some edition in the startup.cs file to enable Blazor.<\/p>\n<ul>\n<li>First we need to configure MVC so that the application can launch without any issue. \u00a0Find in the ConfigureServices method where this line is :\n<pre>services.AddMvc();<\/pre>\n<p>And edit it as such :<\/p>\n<pre>services.AddMvc(options =&gt; options.EnableEndpointRouting = false);<\/pre>\n<\/li>\n<li>After you edited this line, just add this\n<div>\n<pre>services.AddServerSideBlazor();<\/pre>\n<\/div>\n<p>This effectively tells the mvc app that we will use Blazor.<\/li>\n<li>Now in the Configure method, find the line where mvc is configured as something like this :\n<pre>app.UseMvc(routes =&gt;\n{\nroutes.MapRoute(\nname: \"default\",\ntemplate: \"{controller=Home}\/{action=Index}\/{id?}\");\n});<\/pre>\n<p>and change it into :<\/p>\n<pre>app.UseRouting();\napp.UseMvc();\napp.UseEndpoints(endpoints =&gt;\n{\nendpoints.MapControllerRoute(\nname: \"default\",\npattern: \"{controller=Home}\/{action=Index}\/{id?}\");\nendpoints.MapBlazorHub();\n});<\/pre>\n<\/li>\n<li>In the _layout.cshtml we need to add this\n<pre>&lt;script src=\"_framework\/blazor.server.js\"&gt;&lt;\/script&gt;<\/pre>\n<p>Like so :<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-101\" src=\"\/wp-content\/uploads\/2019\/06\/blazor_js_file.jpg\" alt=\"blazor_js_file.jpg\" width=\"1510\" height=\"452\" \/><\/li>\n<\/ul>\n<h1>5. Create a blazor component:<\/h1>\n<p>To include Blazor\u00a0inside an exisiting page, you need to create a Blazor component, which is basically a razor page with the extension .razor instead of .cshtml. \u00a0You can configure your project to treat the cshtml files as Blazor\u00a0components but I wouldn&#8217;t advise it as you still need your existing code to be running.<\/p>\n<p>To mark a simple distinction between your existing pages and your Blazor\u00a0components, it&#8217;s advisable to put them into a Components folder. \u00a0To do so just right click on your project &gt; Add New Folder &gt; Type in Components &gt; Hit enter<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-95\" src=\"\/wp-content\/uploads\/2019\/06\/Create-a-new-folder.gif\" alt=\"Create a new folder.gif\" width=\"1972\" height=\"1124\" \/><\/p>\n<p>Then you add a new item like this<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-102\" src=\"\/wp-content\/uploads\/2019\/06\/Add-A-new-blazor-component.gif\" alt=\"Add A new blazor component.gif\" width=\"2170\" height=\"1124\" \/><\/p>\n<p>Now a Blazor component is very similar to a razor page. \u00a0We&#8217;re going to implement a simple counter that will increment a value on the page, without refreshing the page, because that is what Blazor does.<\/p>\n<p>The Blazor component is divided into two parts, the HTML code and the c# code.<\/p>\n<p>The c# code is hosted inside the @functions section like so :<\/p>\n<pre>@code{\n    int p = 0;\n    void Increment()\n    {\n        p++;\n    }\n}<\/pre>\n<p>Here we just declare a variable p and a method that will just increment it.<\/p>\n<p>Now this will be use in the HTML code like this :<\/p>\n<pre>@page \"\/Counter\"\n\n&lt;div id=\"counter\"&gt;\n    &lt;h1&gt;@p&lt;\/h1&gt;\n    &lt;button onclick=\"@Increment\"&gt;Increment&lt;\/button&gt;\n&lt;\/div&gt;<\/pre>\n<p>The value of the p variable will be displayed in the H1 block. \u00a0Everytime the button will be click the Increment method will be called. \u00a0Note that we just use the signature of the method (without parentheses)<\/p>\n<h1>6. Insert your Blazor component into your MVC view<\/h1>\n<p>Luckily there is only one line of code that we need to put into your existing MVC view (cshtml file)<\/p>\n<pre>@(await Html.RenderComponentAsync&lt;Blazorify.Components.Counter&gt;())<\/pre>\n<p>Et voil\u00e0 ! \u00a0Blazor is now working in your existing application and you can now enjoy the benefits of writing c# code that will be executed inside your browser \u00e0 la javascript, without javascript. \u00a0That&#8217;s the beauty of it.<\/p>\n<p>You can find the source code in\u00a0<a href=\"https:\/\/github.com\/HerraHak\/Blazorify\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/github.com\/HerraHak\/Blazorify<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Blazor is awesome. \u00a0If you don&#8217;t know what it is, you can check it out here\u00a0but to summarize, it&#8217;s a framework that allows .net code to run in your browser using the power of Web Assembly. I&#8217;ve found a lot of tutorials using the official blazor templates but only hints on how exactly using Blazor&#8230;<\/p>\n","protected":false},"author":1,"featured_media":103,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_newsletter_tier_id":0,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[2],"tags":[13,16,17,20,23,24,28],"class_list":["post-92","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-net","tag-blazor","tag-dotnet","tag-dotnet-core","tag-javascript","tag-migration","tag-mvc","tag-tutorial"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":163,"url":"https:\/\/archicode.be\/index.php\/2020\/07\/07\/blazor-convince-your-architect\/","url_meta":{"origin":92,"position":0},"title":"Blazor : convince your CTO (or whomever takes the technical decisions)","author":"Hakim","date":"July 7, 2020","format":false,"excerpt":"When there is something new on the market, we developers want to work with it. There might be several reasons for that, but not always the shortcut decision makers think we favour, which is wanting to try the new shiny thing. Most of the time, we want to work with\u2026","rel":"","context":"In &quot;.NET&quot;","block_context":{"text":".NET","link":"https:\/\/archicode.be\/index.php\/category\/net\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":370,"url":"https:\/\/archicode.be\/index.php\/2024\/05\/14\/understanding-blazor-component-parameters\/","url_meta":{"origin":92,"position":1},"title":"Understanding Blazor Component Parameters","author":"Hakim","date":"May 14, 2024","format":false,"excerpt":"Understanding Parameters Parameters in Blazor are used to pass data from a parent component to a child component. They are defined using public properties on a component and decorated with the [Parameter] attribute. Non-Complex Objects Non-complex objects such as integers, strings, and booleans can be passed as parameters. Here\u2019s an\u2026","rel":"","context":"In &quot;.NET&quot;","block_context":{"text":".NET","link":"https:\/\/archicode.be\/index.php\/category\/net\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":162,"url":"https:\/\/archicode.be\/index.php\/2020\/06\/30\/blazor-server-side-or-web-assembly\/","url_meta":{"origin":92,"position":2},"title":"Blazor : server-side or Web assembly","author":"Hakim","date":"June 30, 2020","format":false,"excerpt":"Blazor is amazing. But if you are wondering which of Web Assembly of Server-Side would suit your project, here's an attempt to explain and help","rel":"","context":"In &quot;.NET&quot;","block_context":{"text":".NET","link":"https:\/\/archicode.be\/index.php\/category\/net\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":356,"url":"https:\/\/archicode.be\/index.php\/2024\/05\/09\/weird-issues-with-maui-blazor-hybrid-app\/","url_meta":{"origin":92,"position":3},"title":"Weird issues with Maui Blazor Hybrid app","author":"Hakim","date":"May 9, 2024","format":false,"excerpt":"Configuration Visual Studio 2022 17.8 .NET 8.0 Android SDK Steps Create a new \"Maui Blazor Hybrid Solution\" Try building the solution When you try building a Maui Blazor Hybrid Solution, in .NET 8, you might encounter a peculiar issue : Cannot deploy the solution, please select deploy in the Configuration\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":366,"url":"https:\/\/archicode.be\/index.php\/2024\/05\/11\/understanding-inject-in-blazor-components\/","url_meta":{"origin":92,"position":4},"title":"Understanding @inject in Blazor Components","author":"Hakim","date":"May 11, 2024","format":false,"excerpt":"Blazor, Microsoft\u2019s framework for building interactive client-side web UI with .NET, offers a robust solution for dependency injection (DI) in the form of the\u00a0@inject\u00a0directive. This powerful feature allows developers to inject services directly into their components, promoting a clean and modular architecture. What is Dependency Injection? Dependency Injection (DI) is\u2026","rel":"","context":"In &quot;.NET&quot;","block_context":{"text":".NET","link":"https:\/\/archicode.be\/index.php\/category\/net\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":115,"url":"https:\/\/archicode.be\/index.php\/2019\/10\/02\/how-to-blazor-components-basic\/","url_meta":{"origin":92,"position":5},"title":"How to : Blazor components (basic)","author":"Hakim","date":"October 2, 2019","format":false,"excerpt":"One essential aspect of Blazor are components. They are basically your Blazor code container. This is where you put the UI and the code needed for your UI to behave the way you want it to. You can dissociate the code from the UI but it's not mandatory. For small\u2026","rel":"","context":"In &quot;Uncategorised&quot;","block_context":{"text":"Uncategorised","link":"https:\/\/archicode.be\/index.php\/category\/uncategorised\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/posts\/92","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/comments?post=92"}],"version-history":[{"count":0,"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/posts\/92\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/archicode.be\/index.php\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/media?parent=92"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/categories?post=92"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/archicode.be\/index.php\/wp-json\/wp\/v2\/tags?post=92"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}