{"@attributes":{"version":"2.0"},"channel":{"title":"Chris Sainty - Building with Blazor","link":"http:\/\/chrissainty.com\/","description":"Recent content on Chris Sainty - Building with Blazor","generator":"Hugo -- gohugo.io","language":"en-gb","lastBuildDate":"Tue, 22 Aug 2023 00:00:00 +0000","item":[{"title":"Blazor in .NET 8: Server-side and Streaming Rendering","link":"http:\/\/chrissainty.com\/blazor-in-dotnet-8-server-side-and-streaming-rendering\/","pubDate":"Tue, 22 Aug 2023 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/blazor-in-dotnet-8-server-side-and-streaming-rendering\/","description":"When it comes to modern web development, performance and user experience are at the forefront of every developer’s mind. With .NET 8 introducing various rendering modes to Blazor, developers will be armed with an array of choices. Among these, server-side rendering and streaming rendering stand out, primarily due to their efficacy in delivering optimized web experiences.\nIn this post, we\u2019ll delve deeper into these two modes and explore their significance in the new Blazor ecosystem of ."},{"title":"Blazor in .NET 8: Full stack Web UI","link":"http:\/\/chrissainty.com\/blazor-in-dotnet-8-full-stack-web-ui\/","pubDate":"Tue, 15 Aug 2023 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/blazor-in-dotnet-8-full-stack-web-ui\/","description":".NET 8 is bringing the biggest shake-up to Blazor since its debut. Remember the days when choosing a hosting model felt like being stuck between a rock and a hard place? Good news! Those days are almost over. With .NET 8, Blazor’s WebAssembly and Server models will come together in a harmonious union, accompanied by some other exciting surprises.\nWelcome to the first in a series where we’re diving deep into the Blazor enhancements coming with ."},{"title":"Adding Tailwind CSS v3 to a Blazor app","link":"http:\/\/chrissainty.com\/adding-tailwind-css-v3-to-a-blazor-app\/","pubDate":"Wed, 16 Feb 2022 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/adding-tailwind-css-v3-to-a-blazor-app\/","description":"There is no denying the increasing popularity of Tailwind CSS and it’s no secret I’ve been a big fan of it for quite some time now, using it in both personal projects–this blog is styled using Tailwind–as well as professional ones.\nBack in March 2020 (yes, that March! Right around the time the world went to s**t) I wrote a two part mini-series, Integrating Tailwind CSS with Blazor using Gulp. A lot has changed since then, Tailwind CSS v3 has been released and Gulp is not the tool I would use anymore for integrating Tailwind into a Blazor project."},{"title":"Blazored hits 1,000,000 downloads on NuGet","link":"http:\/\/chrissainty.com\/blazored-hits-1-000-000-downloads-on-nuget\/","pubDate":"Wed, 17 Feb 2021 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/blazored-hits-1-000-000-downloads-on-nuget\/","description":"At some point over the weekend of 13th and 14th February 2021, the total number of package downloads for Blazored ticked over the 1,000,000 mark. This is just a crazy number and something I’d never considered would happen when I wrote the first package, Blazored LocalStorage, a little over 2 years ago.\nOver the past two years, there have been over 50 contributors to the various Blazored repos. And I’d like to take this opportunity to say a massive thank you to everyone who has ever submitted an issue, raised a PR to fix a bug, add a feature or improve the documentation."},{"title":"Talking Blazored on the Blazor Community Stand up","link":"http:\/\/chrissainty.com\/talking-blazored-on-the-blazor-community-standup\/","pubDate":"Tue, 16 Feb 2021 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/talking-blazored-on-the-blazor-community-standup\/","description":"At the end of last year, I was asked by Safia Abdalla if I’d be interested in coming on the Blazor Community Standup to talk about the Blazored components and libraries. I of course, jumped at the chance and agreed straight away.The show was last Tuesday (9th February) and I had a great time. We had some great questions from the chat and I didn’t seem to send anyone to sleep\u2013at least I hope I didn’t!"},{"title":"Blazor in Action is now available on MEAP","link":"http:\/\/chrissainty.com\/blazor-in-action-is-now-available-on-meap\/","pubDate":"Mon, 12 Oct 2020 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/blazor-in-action-is-now-available-on-meap\/","description":"I’ve been working really hard over the past few months on Blazor in Action and I’m pleased to announce that the book is now available via Manning’s Early Access Program (MEAP).\nIf you’ve not purchased a book through the MEAP program before let me tell you a bit about how it works. When purchasing via MEAP, you will get early access to the book, receiving the chapters as I write them."},{"title":"Building a simple tooltip component for Blazor in under 10 lines of code*","link":"http:\/\/chrissainty.com\/building-a-simple-tooltip-component-for-blazor-in-under-10-lines-of-code\/","pubDate":"Tue, 06 Oct 2020 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/building-a-simple-tooltip-component-for-blazor-in-under-10-lines-of-code\/","description":"It has been so long since I’ve managed to get some time to write a blog post. Since my last post, I’ve been working hard writing the first few chapters for my book, Blazor in Action \u2013 which should be out on MEAP (Manning Early Access Program) very very soon. My wife and I also had our first child at the start of September which has been an amazing and interesting new challenge to take on."},{"title":"Creating a Custom Validation Message Component for Blazor Forms","link":"http:\/\/chrissainty.com\/creating-a-custom-validation-message-component-for-blazor-forms\/","pubDate":"Tue, 30 Jun 2020 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/creating-a-custom-validation-message-component-for-blazor-forms\/","description":"As some of you may know, I’m a big fan of Tailwind CSS. If you’ve not heard of Tailwind before then please checkout my previous posts about it which can be found here and here. The reason I mention this is because when I was using it on a recent Blazor project, I hit a bit of a snag. I wanted to style my validation messages using Tailwinds utility classes, but I couldn’t add them to the component."},{"title":"Avoiding AccessTokenNotAvailableException when using the Blazor WebAssembly Hosted template with individual user accounts","link":"http:\/\/chrissainty.com\/avoiding-accesstokennotavailableexception-when-using-blazor-webassembly-hosted-template-with-individual-user-accounts\/","pubDate":"Tue, 09 Jun 2020 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/avoiding-accesstokennotavailableexception-when-using-blazor-webassembly-hosted-template-with-individual-user-accounts\/","description":"Blazor WebAssembly has shipped with a host of new options for authentication. We now have the ability to create Blazor Wasm apps which can authenticate against Active Directory, Azure AD, Azure AD B2C, Identity Server, in fact any OIDC provider should work with Blazor. But, there is a little gotcha which has tripped a few people up when building applications which mix protected and unprotected endpoints using the Blazor WebAssembly ASP."},{"title":"Blazor News from Build 2020","link":"http:\/\/chrissainty.com\/blazor-news-from-build-2020\/","pubDate":"Tue, 26 May 2020 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/blazor-news-from-build-2020\/","description":"Last week saw the first ever virtual Build event from Microsoft and I thought they did an amazing job with it. Apparently over 200,000 people registered for the free event with around 65% of virtual attendees from outside the US. There were loads of great announcements on products ranging from Office to Azure, but as you would expect, I was most excited for the Blazor bits.\nIn this post, I’ve put together a round up of all the Blazor news from Build 2020."},{"title":"I'm writing a book!","link":"http:\/\/chrissainty.com\/im-writing-a-book-announcing-blazor-in-action\/","pubDate":"Mon, 25 May 2020 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/im-writing-a-book-announcing-blazor-in-action\/","description":"Announcing Blazor In Action If you follow me on Twitter then you probably would’ve already seen the teaser tweet I put out about this a few days ago…\nBut I wanted to write a quick post here as well for those that don’t and also to explain in a little more detail what’s going on.\nIt’s going to be called Blazor In Action and will be part of the amazing “In Action” series from Manning publishing."},{"title":"Auto Saving Form Data in Blazor","link":"http:\/\/chrissainty.com\/auto-saving-form-data-in-blazor\/","pubDate":"Tue, 05 May 2020 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/auto-saving-form-data-in-blazor\/","description":"I got tagged in a thread on Twitter last week by Mr Rockford Lhotka. I’ve embedded the thread below so you can read it for yourself, but essentially he was voicing his frustration at losing data when an error\/timeout\/server error\/etc occur in web applications.\nNow, this type of situation very much depends on the application and how it’s been developed, but, none the less, I agree. There is nothing worse than spending ages filling in a form and then for something to blow up and lose everything you’ve entered."},{"title":"Copy to Clipboard in Blazor","link":"http:\/\/chrissainty.com\/copy-to-clipboard-in-blazor\/","pubDate":"Wed, 29 Apr 2020 07:38:48 +0000","guid":"http:\/\/chrissainty.com\/copy-to-clipboard-in-blazor\/","description":"Recently I was creating a new repo on GitHub, a pretty common action for most of us now-a-days. When I noticed a feature which I use everytime but had never given much thought to, the copy to clipboard button.\nThis is a really useful feature, as I said a second ago, I literally use it everytime. Another great example of this can be found on the Bootstrap site. Each code example has a copy button in the top right corner allowing developers to copy the sample code straight to their clipboard."},{"title":"Mobile Blazor Bindings - Navigation and Xamarin Essentials","link":"http:\/\/chrissainty.com\/mobile-blazor-bindings-xamarin-essentials\/","pubDate":"Tue, 21 Apr 2020 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/mobile-blazor-bindings-xamarin-essentials\/","description":"We’ve come to the final post in this series on Mobile Blazor Bindings (MBB). In part 3, we learned about different ways to manage the state of our MBB applications. From simple state held in components to a central state container. We then looked at data, and how we could persist data locally using the SQLite database, as well as back to an API using HttpClient. Finally, we applied what we’d learned to our Budget Tracker app."},{"title":"Mobile Blazor Bindings - State Management and Data","link":"http:\/\/chrissainty.com\/mobile-blazor-bindings-state-management-and-data\/","pubDate":"Tue, 14 Apr 2020 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/mobile-blazor-bindings-state-management-and-data\/","description":"Last time, we looked at layout and styling options for Mobile Blazor Bindings (MBB). We learned about the various page types and layout components available to us, as well as how we could style our components using either parameter styling or the more familiar CSS approach. We finished up by applying what we learned to our Budget Tracker app, adding various layout components and styling to make the app look a bit more appealing."},{"title":"Mobile Blazor Bindings - Layout and Styling","link":"http:\/\/chrissainty.com\/mobile-blazor-bindings-layout-and-styling\/","pubDate":"Tue, 07 Apr 2020 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/mobile-blazor-bindings-layout-and-styling\/","description":"In my part 1, I covered what Mobile Blazor Bindings (MBB) is, how to get your dev environment setup and create and run your first app. Over the next few posts we’re going to exploring various topics to deepen our knowledge and help us build more feature rich, native mobile apps with MBB.\nIn this post, we’re going to look at layout and styling. In the web world, we’re used to creating layouts and structure in our apps using elements such as divs, spans and tables."},{"title":"Mobile Blazor Bindings - Getting Started","link":"http:\/\/chrissainty.com\/getting-started-with-mobile-blazor-bindings\/","pubDate":"Wed, 01 Apr 2020 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/getting-started-with-mobile-blazor-bindings\/","description":"This is the first, in what will probably be a series of blog posts, I’ve been looking forward to writing for a while \u2013 I’m going to be exploring the new experimental Mobile Blazor Bindings project.\nIn this post, I’m going to be giving an introduction to the Mobile Blazor Bindings (MBB) project, what it is, why you might be interesting in trying it, what is and isn’t available and we’ll finish with creating our first app."},{"title":"Working with Query Strings in Blazor","link":"http:\/\/chrissainty.com\/working-with-query-strings-in-blazor\/","pubDate":"Wed, 25 Mar 2020 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/working-with-query-strings-in-blazor\/","description":"In this post I’m going to be taking a look at query strings and specifically how we can work with them in Blazor, because at this point in time, Blazor doesn’t give us any tools out of the box. In fact, Blazor pretty much ignores them.\nWe’re going to start off by covering what query strings are and why we’d want to use them over route parameters. Then we’ll get into some code and I’ll show you a couple of options which should make working with them in your Blazor applications much easier."},{"title":"Integrating Tailwind CSS with Blazor using Gulp - Part 2","link":"http:\/\/chrissainty.com\/integrating-tailwind-css-with-blazor-using-gulp-part-2\/","pubDate":"Tue, 03 Mar 2020 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/integrating-tailwind-css-with-blazor-using-gulp-part-2\/","description":"Last time, I introduced Tailwind CSS and showed how you can get it up and running with Blazor. This time I’m going to go a little deeper and show how you can customise and configure Tailwind for your application, optimise the final CSS, as well as how to integrate it all into a CI pipeline.\nCustomising Tailwind I mentioned in part 1, it’s possible to custom Tailwind to your specific needs."},{"title":"Integrating Tailwind CSS with Blazor using Gulp - Part 1","link":"http:\/\/chrissainty.com\/integrating-tailwind-css-with-blazor-using-gulp-part-1\/","pubDate":"Tue, 18 Feb 2020 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/integrating-tailwind-css-with-blazor-using-gulp-part-1\/","description":"I’ve been a fan of Tailwind CSS for quite some time now. It was created by Adam Wathan and has been developed by Jonathan Reinink, David Hemphill, and Steve Schoger. I actually discovered Tailwind due to following Steve and his excellent tweets on UI tips and tricks. In fact, if you are a developer with an interest in UI design, I couldn’t recommend Steve’s eBook, RefactoringUI, enough.\nTailwind is a utility-first CSS framework, which means that instead of providing you with a set of premade UI components, which lead to every website looking the same, you are provided with a massive array of low-level utility classes that allow you to rapidly create custom designs with ease."},{"title":"Fragment Routing with Blazor","link":"http:\/\/chrissainty.com\/fragment-routing-with-blazor\/","pubDate":"Tue, 04 Feb 2020 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/fragment-routing-with-blazor\/","description":"A common question I’ve been asked and I’ve seen asked many times is, how can I route to a fragment in my Blazor app? If you’re not aware what I mean by a “fragment”, let me explain.\nFragment routing, or linking, is the term given when linking to a specific element on a page, say a header for example. This technique is often used in FAQ pages or technical documentation and links using this technique look like this, www."},{"title":".NET Conf: Focus on Blazor","link":"http:\/\/chrissainty.com\/net-conf-focus-on-blazor\/","pubDate":"Wed, 15 Jan 2020 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/net-conf-focus-on-blazor\/","description":"I was fortunate enough to be asked to speak at the first of a new series of one day virtual conferences, .NET Conf: Focus on Blazor. This event is the first of many focus events being run throughout the year by Microsoft and the .NET Conf team. Each event deep dives on a specific technology with a mix of speakers from Microsoft and the community.\nIf you’ve not heard of ."},{"title":"Year In Review - 2019","link":"http:\/\/chrissainty.com\/year-in-review-2019\/","pubDate":"Tue, 07 Jan 2020 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/year-in-review-2019\/","description":"Let me start by wishing everyone a happy new year! This post is a little late as I wasn’t 100% I was going to write it, and I kept fiddling with it and hovering over publish button, but I got there in the end!\n2019 was a fantastic year and full of firsts. It’s also been tiring and stressful at times, but I really wouldn’t change a thing. So what were the highlights of 2019?"},{"title":"Introduction to Blazor Component Testing","link":"http:\/\/chrissainty.com\/introduction-to-blazor-component-testing\/","pubDate":"Tue, 17 Dec 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/introduction-to-blazor-component-testing\/","description":"This post is part of the third annual C# advent. Two new posts are published every day between 1st December and 25th December.\nOne significant area which has been lacking in Blazor is testing. There is a placeholder issue for it, but for a very long time, there wasn’t any progress. This is because testing was out of scope for the first official release of Blazor - which shipped with ."},{"title":"Getting Started with Blazor - Experts Panel Discussion","link":"http:\/\/chrissainty.com\/getting-started-with-blazor-experts-panel-discussion\/","pubDate":"Mon, 16 Dec 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/getting-started-with-blazor-experts-panel-discussion\/","description":"Recently I was asked to be part of a panel discussion on Blazor by Ed Charbeneau, Senior Developer Advocate at Progress. I’ll talk about Blazor at literally any opportunity so I, of course, said yes!\nThe panel was made up of some great people. First, there was Daniel Roth, Program Manager for Blazor at Microsoft. Egil Hansen, who is a Managing Architect at Netcompany, and active community member, who’s doing some excellent work on testing for Blazor."},{"title":"Creating Bespoke Input Components for Blazor from Scratch","link":"http:\/\/chrissainty.com\/creating-bespoke-input-components-for-blazor-from-scratch\/","pubDate":"Tue, 10 Dec 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/creating-bespoke-input-components-for-blazor-from-scratch\/","description":"In my last post, we looked at how we could build custom input components on top of InputBase. Using InputBase saves us loads of extra work by managing all of the interactions with the EditForm component and the validation system, which is excellent.\nHowever, sometimes, there are situations where we want or need to have a bit more control over how our input components behave. In this post, we are going to look at how we can build input components from scratch."},{"title":"Building Custom Input Components for Blazor using InputBase","link":"http:\/\/chrissainty.com\/building-custom-input-components-for-blazor-using-inputbase\/","pubDate":"Tue, 03 Dec 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/building-custom-input-components-for-blazor-using-inputbase\/","description":"Out of the box, Blazor gives us some great components to get building forms quickly and easily. The EditForm component allows us to manage forms, coordinating validation and submission events. There’s also a range of built-in input components which we can take advantage of:\nInputText InputTextArea InputSelect InputNumber InputCheckbox InputDate And of course, we wouldn’t get very far without being able to validate form input, and Blazor has us covered there as well."},{"title":"Building a Custom Router for Blazor","link":"http:\/\/chrissainty.com\/building-a-custom-router-for-blazor\/","pubDate":"Tue, 05 Nov 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/building-a-custom-router-for-blazor\/","description":"In this post we are going to build a simple custom router component which will replace the default router Blazor ships with. I just want to say from the start that this isn’t meant to be an all singing all dancing replacement for the default router. The default router is quite sophisticated and replicating all that functionality is a bit much for a blog post. Hopefully though, this will give you an idea of what’s possible and maybe provide some inspiration."},{"title":"An In-depth Look at Routing in Blazor","link":"http:\/\/chrissainty.com\/an-in-depth-look-at-routing-in-blazor\/","pubDate":"Tue, 29 Oct 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/an-in-depth-look-at-routing-in-blazor\/","description":"In this post, I want to build on my last post, Introduction to Routing in Blazor, and take a deep dive into the nuts and bolts of routing in Blazor.\nWe’re going to look at each part of Blazor’s routing model in detail, starting in the JavaScript world where navigation events are picked up. And following the code over the divide to the C# world, to the point of rendering either the correct page or the not found template."},{"title":"Introduction to Routing in Blazor","link":"http:\/\/chrissainty.com\/introduction-to-routing-in-blazor\/","pubDate":"Tue, 22 Oct 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/introduction-to-routing-in-blazor\/","description":"Most of us probably don’t spend much time thinking about the mechanics of navigating between pages in web applications. Which is fair enough. After all, when navigation is done right and works, you shouldn’t notice it. But a few years ago there was a big change in how navigation was performed - when single page applications, also know as SPAs, came on the scene…\nThis is the first post, of what I’m sure will turn into a few, looking at how routing and navigation works in Blazor."},{"title":"Blazor Roundup From .NET Conf 2019","link":"http:\/\/chrissainty.com\/blazor-roundup-from-dot-net-conf-2019\/","pubDate":"Tue, 01 Oct 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/blazor-roundup-from-dot-net-conf-2019\/","description":".NET Conf has been and gone for another year, but this one was particularly special. .NET Core 3 was officially released and with it comes the first official version of Blazor!\nPersonally, I’m so excited to see this happen. I found Blazor in early March 2018, a few weeks before the first preview (0.1.0) was released. I immediately became a fan, and it’s fair to say, Blazor changed by life."},{"title":"An Introduction to OwningComponentBase","link":"http:\/\/chrissainty.com\/an-introduction-to-owningcomponentbase\/","pubDate":"Tue, 17 Sep 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/an-introduction-to-owningcomponentbase\/","description":"In this post, we’re going to explore the OwningComponentBase class, which was added to Blazor in .NET Core 3 Preview 9. It has a single purpose, to create a service provider scope. This is really useful in Blazor as service scopes behave a bit differently to how they do in say, MVC or Razor Pages applications. Using this class as a base, we can create components which control the lifetime of the service provider scope."},{"title":"Deploying Containerised Apps to Azure Web App for Containers","link":"http:\/\/chrissainty.com\/containerising-blazor-applications-with-docker-deploying-containerised-apps-to-azure-web-app-for-containers\/","pubDate":"Tue, 10 Sep 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/containerising-blazor-applications-with-docker-deploying-containerised-apps-to-azure-web-app-for-containers\/","description":"In the first half of this series, we covered how to containerise both Blazor Server and Blazor WebAssembly apps. In part 3, we automated that process using Azure Pipelines. We configured a CI pipeline which automatically builds code upon check-in to GitHub and publishes the Docker image to Azure Container Registry.\nIn this post, we’re going to learn how to deploy a Docker image from our container registry to an Azure App Service, which completes the cycle of development to release."},{"title":"Publishing to Azure Container Registry using Azure Pipelines","link":"http:\/\/chrissainty.com\/containerising-blazor-applications-with-docker-publishing-to-azure-container-registry-using-azure-pipelines\/","pubDate":"Tue, 03 Sep 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/containerising-blazor-applications-with-docker-publishing-to-azure-container-registry-using-azure-pipelines\/","description":"In part 1 and part 2 we looked at how to containerise Blazor applications with Docker. We can now run Blazor Server and Blazor WebAssembly apps in containers locally - which is great! But how do we go about automating the building of Docker images as part of a CI pipeline? And where do we keep our images once they’re built?\nIn this post, we’re going to answer at those two questions."},{"title":"Containerising a Blazor WebAssembly App","link":"http:\/\/chrissainty.com\/containerising-blazor-applications-with-docker-containerising-a-blazor-webassembly-app\/","pubDate":"Tue, 27 Aug 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/containerising-blazor-applications-with-docker-containerising-a-blazor-webassembly-app\/","description":"In part 1 of the series, we took a look Docker and some of its key concepts. Then we took the default template for a Blazor Server app and containerised it using Docker. In this post, we are going to take a look at doing the same thing but with a Blazor WebAssembly app.\nAll the code for this post is available on GitHub.\nDifferent Challenges Creating a dockerfile for a Blazor Server app was pretty trivial."},{"title":"Containerising a Blazor Server App","link":"http:\/\/chrissainty.com\/containerising-blazor-applications-with-docker-containerising-a-blazor-server-app\/","pubDate":"Wed, 21 Aug 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/containerising-blazor-applications-with-docker-containerising-a-blazor-server-app\/","description":"Containers are all the rage now-a-days and for good reason. They solve the problem of how to have an application work consistently regardless of the environment it is run on. This is achieved by bundling the whole runtime environment - the application, it’s dependencies, configuration files, etc… Into a single image. This image can then be shared and instances of it, known as containers, can then be run.\nIn this post, I’m going to show you how to run a Blazor Server application in a container."},{"title":"Investigating Drag and Drop with Blazor","link":"http:\/\/chrissainty.com\/investigating-drag-and-drop-with-blazor\/","pubDate":"Tue, 13 Aug 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/investigating-drag-and-drop-with-blazor\/","description":"Drag and drop has become a popular interface solution in modern applications. It’s common to find it in productivity tools, great examples of this are Trello, JIRA and Notion. As well as being an intuitive interface for the user, it can definitely add a bit of “eye-candy” to an application.\nWe’ve been thinking about incorporating drag and drop into some screens of the product my team are building at work. This has given me a great opportunity to see how drag and drop can be accomplished with Blazor."},{"title":"I\u2019m now a Microsoft MVP!","link":"http:\/\/chrissainty.com\/im-now-a-microsoft-mvp\/","pubDate":"Wed, 07 Aug 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/im-now-a-microsoft-mvp\/","description":"It\u2019s been a bit of a crazy week, on Thursday 1st August a very special e-mail appeared in my inbox. It was from Microsoft telling me I\u2019d been awarded an MVP in developer technologies!\nIf I\u2019m honest, it still hasn\u2019t really sunk in yet and I find myself re-reading it every now and then just to prove to myself it wasn\u2019t a dream. I\u2019m deeply honoured and humbled to be part of such a talented group of community leaders and experts."},{"title":"Configuring Policy-based Authorization with Blazor","link":"http:\/\/chrissainty.com\/securing-your-blazor-apps-configuring-policy-based-authorization-with-blazor\/","pubDate":"Tue, 30 Jul 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/securing-your-blazor-apps-configuring-policy-based-authorization-with-blazor\/","description":"In part 3 of this series, I showed how to add role based authorization to a client-side Blazor application. In this post, I\u2019m going to show you how to configure the newer, and recommended, policy-based authorization with Blazor.\nAll the code for this post is available on GitHub.\nIntroduction to Policy-based Authorization Introduced with ASP.NET Core, policy-based authorization allows a much more expressive way of creating authorization rules. The policy model is comprised of three concepts:"},{"title":"Configuring Role-based Authorization with client-side Blazor","link":"http:\/\/chrissainty.com\/securing-your-blazor-apps-configuring-role-based-authorization-with-client-side-blazor\/","pubDate":"Tue, 23 Jul 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/securing-your-blazor-apps-configuring-role-based-authorization-with-client-side-blazor\/","description":"In parts 1 and 2 of this series I\u2019ve shown how to create both server-side and client-side Blazor apps with authentication. In this post, I\u2019m going to show you how to configure role-based authorization in a client-side Blazor application.\nAll the code for this post is available on GitHub.\nWhat is role-based authorization? When it comes to authorization in ASP.NET Core we have two options, role-based and policy-based (there\u2019s also claims-based but thats just a special type of policy-based)."},{"title":"Authentication with client-side Blazor using WebAPI and ASP.NET Core Identity","link":"http:\/\/chrissainty.com\/securing-your-blazor-apps-authentication-with-clientside-blazor-using-webapi-aspnet-core-identity\/","pubDate":"Wed, 10 Jul 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/securing-your-blazor-apps-authentication-with-clientside-blazor-using-webapi-aspnet-core-identity\/","description":"In part 1 of this series, I showed how to create a server-side Blazor application with authentication enabled.\nIn this post, I’m going to show how to setup authentication with client-side Blazor using WebAPI and ASP.NET Core Identity.\nAll the code for this post is available on GitHub.\nIf you are not familiar with ASP.NET Core Identity then you can checkout the Microsoft Docs site for full and in-depth information."},{"title":"Introduction to Authentication with server-side Blazor","link":"http:\/\/chrissainty.com\/securing-your-blazor-apps-introduction-to-authentication-with-blazor\/","pubDate":"Wed, 03 Jul 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/securing-your-blazor-apps-introduction-to-authentication-with-blazor\/","description":"Authentication and authorisation are two fundamental functions in most applications today. Until recently, it wasn’t very clear how to best achieve these functions in Blazor applications. But with the release of ASP.NET Core 3 Preview 6 that all changed.\nIn this post, I’ll show you how you can create a new server-side Blazor application with authentication enabled. Then we’ll take a high level look at the services and components which are used in the application."},{"title":"Using Blazor Components In An Existing MVC Application","link":"http:\/\/chrissainty.com\/using-blazor-components-in-an-existing-mvc-application\/","pubDate":"Tue, 25 Jun 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/using-blazor-components-in-an-existing-mvc-application\/","description":"I’ve had this post waiting for a while but due to a bug in Preview 5 I’ve been holding off sharing it. But with the release of Preview 6 the bug is gone and I can finally hit the publish button. So let’s get to it!\nOne of the many awesome things about Blazor is the migration story it offers. If you’re currently developing or maintaining a MVC or Razor Pages application, then you’re in for a treat!"},{"title":"Prerendering a Client-side Blazor Application","link":"http:\/\/chrissainty.com\/prerendering-a-client-side-blazor-application\/","pubDate":"Wed, 12 Jun 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/prerendering-a-client-side-blazor-application\/","description":"While prerendering is now the default for server-side Blazor applications, I only recently discovered (as in the last 48 hours via Daniel Roth’s work) that client-side Blazor applications can take advantage of this as well. In this post, I’m going to show you how you can setup your client-side Blazor application for prerendering.\nThe example project for this post can be found on GitHub.\nWhat is prerendering? Prerendering is a process where all the elements of a web page are compiled on the server and static HTML is served to the client."},{"title":"Getting Started With Blazored Typeahead","link":"http:\/\/chrissainty.com\/getting-started-with-blazored-typeahead\/","pubDate":"Wed, 05 Jun 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/getting-started-with-blazored-typeahead\/","description":"Update: I’ve now released a new version of the Typeahead which supports Blazors forms and validation. I’ve updated this post accordingly as there were some breaking changes. Check out the repo for full details.\nThis week I thought I’d give an overview of the most recent addition to the Blazored collection, Blazored.Typeahead.\nFor those for you not familiar with Blazored, it’s a collection of components and libraries to help with developing Blazor applications."},{"title":"Calling gRPC Services With Server-side Blazor","link":"http:\/\/chrissainty.com\/calling-grpc-services-with-server-side-blazor\/","pubDate":"Wed, 29 May 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/calling-grpc-services-with-server-side-blazor\/","description":"In this post, I want to show you how you can call gRPC services using server-side Blazor. I just want to say that I’ve only been experimenting with gRPC for a couple of days so I’m very much still learning, but it’s been a great experience so far.\nBefore we get into any code I want to just explain what gRPC is, for those who’ve not heard of it before."},{"title":"A Detailed Look At Data Binding in Blazor","link":"http:\/\/chrissainty.com\/a-detailed-look-at-data-binding-in-blazor\/","pubDate":"Wed, 15 May 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/a-detailed-look-at-data-binding-in-blazor\/","description":"Binding data is a fundamental task in single page applications (SPAs). At some point every application needs to either display data (e.g. labels) or receive data (e.g. forms).\nWhile most SPA frameworks have similar concepts for data binding, either one way binding or two way binding, the way they work and are implemented varies widely. In this post, we’re going to have a good look at how one way and two way binding work in Blazor."},{"title":"Blazor Bites Updated and Build 2019 Blazor Roundup","link":"http:\/\/chrissainty.com\/blazor-bites-updated-and-build-2019-blazor-roundup\/","pubDate":"Wed, 08 May 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/blazor-bites-updated-and-build-2019-blazor-roundup\/","description":"With it being Build week and there being loads of cool Blazor stuff talked about I thought I would do a news post this week. I’ve also been wanting to get some of my older posts updated to the latest version of Blazor, which I’ve managed to get done as well. So let’s start there and then check out all the cool bits from Build 2019.\nBlazor Bites Updated I’ve spent the bank holiday weekend updating all of my Blazor Bites posts to the latest version of Blazor."},{"title":"Get Some Sass Into Your Blazor App","link":"http:\/\/chrissainty.com\/get-some-sass-into-your-blazor-app\/","pubDate":"Wed, 01 May 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/get-some-sass-into-your-blazor-app\/","description":"I’ve been doing a lot of styling work recently so I thought it might be useful to write a post about it. We’re going to have a run through of what Sass is and why you might want to use it. And then we’re going to have a look at how we can get it integrated into a Blazor application.\nWhat is Sass? As you can probably tell from my very subtle title, I use Sass for managing my styles."},{"title":"3 Ways to Communicate Between Components in Blazor","link":"http:\/\/chrissainty.com\/3-ways-to-communicate-between-components-in-blazor\/","pubDate":"Wed, 17 Apr 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/3-ways-to-communicate-between-components-in-blazor\/","description":"One of the most common questions I get asked, or I see asked, is what is the best way to communicate between components? I think the answer, like so many things in software development is, it depends. We’re going to look at 3 different ways to communicate between components and how you can best use them.\nThe three techniques that we’re going to look at are.\nEventCallbacks Cascading Values State Container 1."},{"title":"Getting Started with TypeScript for JSInterop in Blazor","link":"http:\/\/chrissainty.com\/getting-started-with-typescript-for-jsinterop-in-blazor\/","pubDate":"Tue, 09 Apr 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/getting-started-with-typescript-for-jsinterop-in-blazor\/","description":"One of the most exciting prospects of Blazor is the potential to remove the need for JavaScript. However, we are not there yet. In an earlier post, I pointed out that WebAssembly isn’t currently able to interact with the DOM or call browser APIs. I’m not even sure how server-side Blazor is going to move away from JavaScript or if it can.\nSo if we’re going to have to write JavaScript, then it would be great to get as close to our development experience with C# as we can."},{"title":"Building Components Manually via RenderTreeBuilder","link":"http:\/\/chrissainty.com\/building-components-via-rendertreebuilder\/","pubDate":"Wed, 03 Apr 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/building-components-via-rendertreebuilder\/","description":"We’re all very used to seeing Razor Components defined using Razor syntax. No surprises there, after all they’re called Razor Components. But you can also skip using Razor and build components manually using C# and Blazors RenderTreeBuilder.\nWhat we’ll build Let’s start by looking at what we are going to build. We’re going to replicate the following component using the pure C# approach.\n<!-- Menu.razor --> <nav class="menu"> <ul> <li><NavLink href="\/" Match="NavLinkMatch."},{"title":"Using FluentValidation for Forms Validation in Blazor","link":"http:\/\/chrissainty.com\/using-fluentvalidation-for-forms-validation-in-razor-components\/","pubDate":"Tue, 26 Mar 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/using-fluentvalidation-for-forms-validation-in-razor-components\/","description":"Blazor now has built-in form and validation. The default implementation uses data annotations and is a very similar experience to forms and validation in ASP.NET MVC applications. While it’s great to have this included out of the box, there are other popular validation libraries available. And it would be great to be able to use them in place of data annotations if we so choose.\nFluentValidation is a popular alternative to data annotations with over 12 million downloads."},{"title":"Using JavaScript Interop in Blazor","link":"http:\/\/chrissainty.com\/using-javascript-interop-in-razor-components-and-blazor\/","pubDate":"Tue, 19 Mar 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/using-javascript-interop-in-razor-components-and-blazor\/","description":"While WebAssembly has the potential to end our reliance on JavaScript, JavaScript is not going away anytime soon. There are still a lot of things WebAssembly just can’t do, most notably DOM manipulation. If you’re running server-side Blazor then you don’t even have WebAssembly as an option. So how do we handle this problem?\nThe answer is JavaScript interop. When we can’t do what we need using .NET code alone, we can use the IJSRuntime abstraction to make calls into JavaScript functions."},{"title":"Deploying Blazor Apps Using Azure Pipelines","link":"http:\/\/chrissainty.com\/deploying-blazor-apps-using-azure-pipelines\/","pubDate":"Tue, 12 Mar 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/deploying-blazor-apps-using-azure-pipelines\/","description":"In my previous post, I showed how you can use Azure pipelines to build your Blazor (or Razor Components) apps. This time, I’m going to show you how you can deploy a Blazor app to Azure storage using Azure pipelines.\nOne of the great things about Blazor applications, once published, they’re just static files. This means they can be hosted on a wide variety of platforms as they don’t require ."},{"title":"Building Blazor Apps Using Azure Pipelines","link":"http:\/\/chrissainty.com\/building-blazor-apps-using-azure-pipelines\/","pubDate":"Tue, 05 Mar 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/building-blazor-apps-using-azure-pipelines\/","description":"This is the first of two posts on building and deploying Blazor apps using Azure Pipelines. In this first post, I’m going to show you how you can use Azure Pipelines to build your Blazor applications. In the second post, I will show you how to take your built application and deploy it to Azure Storage using release pipelines.\nI would like to point out that the steps in this first post will also work for server-side Blazor applications."},{"title":"Understanding Cascading Values & Cascading Parameters","link":"http:\/\/chrissainty.com\/understanding-cascading-values-and-cascading-parameters\/","pubDate":"Tue, 26 Feb 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/understanding-cascading-values-and-cascading-parameters\/","description":"Cascading values and parameters are a way to pass a value from a component to all of its descendants without having to use traditional component parameters.\nBlazor comes with a special component called CascadingValue. This component allows whatever value is passed to it to be cascaded down its component tree to all of its descendants. The descendant components can then choose to collect the value by declaring a property of the same type, decorated with the [CascadingParameter] attribute."},{"title":"Blazored Modal Released","link":"http:\/\/chrissainty.com\/blazored-modal-released\/","pubDate":"Tue, 05 Feb 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/blazored-modal-released\/","description":"Quick Update Wow, didn’t just January fly by! I just wanted to give you all a quick update since my last post, Announcing Blazored and Blazored Toast.\nWe’ve had the first official preview release of server-side Blazor. This is really cool and I’ve been having a play around with that and will probably write a post about it very soon.\nI’ve also been busy working like mad on developing Blazored. I’ve moved over my old LocalStorage and Localisation packages to the new Blazored org."},{"title":"Announcing Blazored and Blazored Toast!","link":"http:\/\/chrissainty.com\/announcing-blazored-and-blazored-toast\/","pubDate":"Mon, 21 Jan 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/announcing-blazored-and-blazored-toast\/","description":"It’s been a busy few weeks but I’ve got a couple of things I’ve been working on that I’d like to share with you all…\nBlazored GitHub Org Firstly, let me introduce Blazored. This is a new org I’ve created on GitHub and is going to be a dedicated space for all the Blazor libraries I want to build and share with the community. It’s something that I’ve been wanting to do for over 6 months but things just kept getting in the way."},{"title":"Published on VSM: An Introduction to Templated Components in Blazor","link":"http:\/\/chrissainty.com\/published-on-vsm-an-introduction-to-templated-components-in-blazor\/","pubDate":"Mon, 07 Jan 2019 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/published-on-vsm-an-introduction-to-templated-components-in-blazor\/","description":"I’ve just had an article, An Introduction to Templated Components in Blazor, published on Visual Studio Magazine. The article tells you all about templated components and gives you some ideas about how you can take advantage of them in your Blazor projects.\nThis is actually my 3rd article for VSM but I’ve not mentioned them on here before, I’m not sure why. But from now on, I’ll be adding a quick post whenever I have an article published elsewhere."},{"title":"Blazor Toast Notifications using only C#, HTML and CSS","link":"http:\/\/chrissainty.com\/blazor-toast-notifications-using-only-csharp-html-css\/","pubDate":"Sun, 23 Dec 2018 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/blazor-toast-notifications-using-only-csharp-html-css\/","description":"This post is part of the second annual C# advent. Two new posts are published every day between 1st December and 25th December.\nIn this post, I’m going to show you how to build toast notifications for your Blazor\/Razor Components applications. By the time we’re done you’ll be able to show 4 different toasts depending on the level of importance (information, success, warning and error). The best bit, this will all be achieved without using a single line of JavaScript."},{"title":"Simple Localisation in Blazor","link":"http:\/\/chrissainty.com\/simple-localisation-in-blazor\/","pubDate":"Mon, 03 Dec 2018 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/simple-localisation-in-blazor\/","description":"Firstly, let me apologise for the lack of blog posts in November, I was busy getting married and enjoying some time away with the wife! But I’m now all recharged and normal service should now be resumed.\nIn this post, I’m going to show you a way to set the current culture in your Blazor apps based on the users browser. Just to be clear this is going to be for client-side only apps."},{"title":"Service Lifetimes in Blazor","link":"http:\/\/chrissainty.com\/service-lifetimes-in-blazor\/","pubDate":"Mon, 22 Oct 2018 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/service-lifetimes-in-blazor\/","description":"If you’ve had previous experience with ASP.NET Core apps you may have used the built-in dependency injection system. For those who haven’t you can check out the Microsoft Docs site for more info.\nWhen registering services with the service container you must specify the lifetime of the service instance. You can specify one of 3 options singleton, scoped or transient.\n_Singleton services are created once and the same instance is used to fulfil every request for the lifetime of the application."},{"title":"Building a blogging app with Blazor: Adding Authentication","link":"http:\/\/chrissainty.com\/building-a-blogging-app-with-blazor-adding-authentication\/","pubDate":"Mon, 15 Oct 2018 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/building-a-blogging-app-with-blazor-adding-authentication\/","description":"Last time I added editing and deleting to the blogging app, this finished off the admin functions. In this final post I’m going to add authentication to protect those admin functions. Let’s get started.\nThe Server For the purposes of this demo app I’m going to add basic authentication using JSON web tokens. The majority of the server code is inspired by this blog series by Jon Hilton. Just to be clear though, you will need a more robust way of authenticating username and passwords."},{"title":"Building a blogging app with Blazor: Editing & Deleting Posts","link":"http:\/\/chrissainty.com\/building-a-blogging-app-with-blazor-editing-deleting-posts\/","pubDate":"Mon, 24 Sep 2018 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/building-a-blogging-app-with-blazor-editing-deleting-posts\/","description":"To recap my last post, I added the ability to add a blog post. I wanted the writing experience to be clean and efficient so I added Markdown support. I also removed the hard coded data I’d been using. In this post I’m going to add the ability to edit and delete posts. Lets get started.\nThe Server I’m going to start by adding two new method to the BlogPostService, UpdateBlogPost and DeleteBlogPost."},{"title":"Building a blogging app with Blazor: Add Post","link":"http:\/\/chrissainty.com\/building-a-blogging-app-with-blazor-add-post\/","pubDate":"Tue, 18 Sep 2018 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/building-a-blogging-app-with-blazor-add-post\/","description":"In the last post, I added the ability to view a blog post. But the blog data was just coming from a hard-coded list. So in this post I’m going to add the ability to write a new post. And just like any good blogging platform I want to be able to write using Markdown. Lets get started.\nThe Server Up till now I have been using a hard-coded list of blog posts, but I want to make things a bit more real world."},{"title":"Building a blogging app with Blazor: View Post","link":"http:\/\/chrissainty.com\/building-a-blogging-app-with-blazor-view-post\/","pubDate":"Tue, 11 Sep 2018 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/building-a-blogging-app-with-blazor-view-post\/","description":"In the previous post, I built the home page of the app. I added a WebAPI endpoint which returned some hard-coded blog posts. Then built a couple of Blazor components to get that data and display it.\nIn this post I’m going to build the ability to view a blog post. Following a similar format to last time. I’ll add a new endpoint which will return a blog post then move over to the Blazor side."},{"title":"Building a blogging app with Blazor: Listing Posts","link":"http:\/\/chrissainty.com\/building-a-blogging-app-with-blazor-listing-posts\/","pubDate":"Mon, 03 Sep 2018 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/building-a-blogging-app-with-blazor-listing-posts\/","description":"In part 1 of the series I did a load of setup work, getting the solution and project structures in place. I also added a theme to the site to make things look a bit prettier.\nIn this post, I’m going to work on the home page of the app. I’ll create the first endpoint on the API and get the Blazor app making requests to it. By the end of this post, the app will be able to show a list of blog posts on the home screen."},{"title":"Building a blogging app with Blazor: Getting Setup","link":"http:\/\/chrissainty.com\/building-a-blogging-app-with-blazor-getting-setup\/","pubDate":"Mon, 27 Aug 2018 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/building-a-blogging-app-with-blazor-getting-setup\/","description":"In this series I\u2019m going to be building a simple blogging platform using Blazor. I’ll be using the client-side configuration of Blazor for these posts. And as I\u2019m working on a Mac I\u2019m going to use VS Code as much as possible. While it would be great to stick to it the whole time. I have found that sometimes it is necessary to spin up Windows and Visual Studio when debugging."},{"title":"Introduction to Server-side Blazor","link":"http:\/\/chrissainty.com\/introduction-to-server-side-blazor-aka-razor-components\/","pubDate":"Sat, 11 Aug 2018 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/introduction-to-server-side-blazor-aka-razor-components\/","description":"Please Note: As of .NET Core Preview 8, server-side Blazor is now known as a Blazor Server App. Client-side Blazor is known as a Blazor WebAssembly App.\nIt has been a significant couple of weeks in the Blazor world. First there was the 0.5.0 release which gave us server-side Blazor. Then in the ASP.NET community stand up on 7th August, Dan Roth told us that the server-side Blazor model would be part of ."},{"title":"Global Error Handling in ASP.NET Core MVC","link":"http:\/\/chrissainty.com\/global-error-handling-aspnet-core-mvc\/","pubDate":"Mon, 06 Aug 2018 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/global-error-handling-aspnet-core-mvc\/","description":"When generating a new MVC app the ExceptionHandler middleware is provided by default. This will catch any unhandled exceptions within your application and allow you to redirect to a specified route if you so choose. But what about other non-success status codes? Errors such as 404s will not be captured by this middleware as no exception was thrown.\nTo handle these types of errors you will need to use the StatusCodePages middleware."},{"title":"It's been a while + Blazored Local Storage v0.3.0 Released","link":"http:\/\/chrissainty.com\/blazored-local-storage-v0-3-0-released\/","pubDate":"Sun, 29 Jul 2018 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/blazored-local-storage-v0-3-0-released\/","description":"It has been far to long since I have written anything and it’s time for that to change! I have been busy with the day job and have struggled to find the time or, if I’m honest, motivation to sit down and write blog posts.\nI’ve also really struggled with “writers block” which probably sounds really stupid as there is literally thousands of things to write about when it comes to software development."},{"title":"Creating Blazor Component Libraries","link":"http:\/\/chrissainty.com\/creating-blazor-component-libraries\/","pubDate":"Sat, 28 Apr 2018 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/creating-blazor-component-libraries\/","description":"What are component libraries? With the release of Blazor 0.2.0 came the ability to create component libraries. Component libraries are how you can share components or JS interop functionality between projects. You can also generate nuget packages from a component library and share via nuget.org.\nThis is achieved with the introduction of a new project template, Blazor Library. However, at this time the template can only be generated via the dotnet CLI and not via Add > New Project in Visual Studio."},{"title":"Blazor Bites - Layouts","link":"http:\/\/chrissainty.com\/blazor-bites-layouts\/","pubDate":"Wed, 18 Apr 2018 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/blazor-bites-layouts\/","description":"When developing an application you typically want it to maintain a consistent look and feel. Back in ye old days of web development we had static HTML files and common elements, such as headers and footers, would have to be copied between files. And a change to the layout would mean updating every file in the site. As time moved on we had includes with Classic ASP, master pages with WebForms and Razor has the concept of Layouts."},{"title":"Blazor Bites - Routing","link":"http:\/\/chrissainty.com\/blazor-bites-routing\/","pubDate":"Sun, 08 Apr 2018 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/blazor-bites-routing\/","description":"Blazor comes with a router out of the box, similar to other SPA applications such as Angular. While the Blazor router is much simpler than those found in other frameworks, you can already build useful multi-page apps.\nHow does the router in Blazor actually work? Blazors router is just another component and implements IComponent the same as any other. Currently it takes an AppAssembly parameter which is the assembly for the Blazor application."},{"title":"Blazor Bites - JavaScript Interop","link":"http:\/\/chrissainty.com\/blazor-bites-javascript-interop\/","pubDate":"Wed, 04 Apr 2018 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/blazor-bites-javascript-interop\/","description":"It’s awesome we can now use C# in the browser with Blazor. But unfortunately we can’t do everything with it, yet. Currently, WebAssembly isn’t able to directly access the DOM API, which means that Blazor isn’t able to either.\nSo how do we manage this?… The answer is JavaScript interop.\nPart of Blazor is implemented and lives in the JavaScript world. It is though this interface that Blazor is able to manipulate the DOM to render the UI and to hook into various DOM events."},{"title":"Blazor Bites - Data Binding & Events","link":"http:\/\/chrissainty.com\/blazor-bites-data-binding-and-events\/","pubDate":"Thu, 29 Mar 2018 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/blazor-bites-data-binding-and-events\/","description":"Data Binding Displaying data in Blazor is really simple and if you have any experience with Razor then this should all be very familiar to you. If not, don’t worry it’s really easy to pick up.\nOne-way binding This is used for printing values in your views. These values could be strings such as a title in a <h1> tag or items in a list. But it can also be used to dynamically inject values into the HTML such as the name of a CSS class on an element."},{"title":"Blazor Bites - Component Lifecycle Methods","link":"http:\/\/chrissainty.com\/blazor-bites-component-lifecycle-methods\/","pubDate":"Wed, 28 Mar 2018 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/blazor-bites-component-lifecycle-methods\/","description":"Component Lifecycle Methods When you create a component in Blazor it should derive from ComponentBase. There are two reasons for this.\nFirst, is that ComponentBase implements IComponent and Blazor uses this interface to locate components throughout your project. It doesn’t rely on a folder convention. Second, is that ComponentBase contains important lifecycle methods, let’s take a look at what those are.\nOnInitialized() \/ OnInitializedAsync() Once the component has received its initial parameters from its parent in the render tree, the OnInitialized and OnInitializedAsync methods are called."},{"title":"Blazor Bites - Creating Components","link":"http:\/\/chrissainty.com\/blazor-bites-creating-components\/","pubDate":"Tue, 27 Mar 2018 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/blazor-bites-creating-components\/","description":"Creating Components Like all modern front end frameworks Blazor has components at its core. Blazor uses a combination of C#, Razor and HTML to create components. There are 4 styles for components in Blazor.\nInline Code behind with base class Code behind with partial class Class only One thing to note, regardless of which method you choose to build your components, components all end up as classes. If you’re interested to see what these classes look like you can view them in the obj\\Debug\\netstandard2."},{"title":"Blazor Bites - Creating a New Project","link":"http:\/\/chrissainty.com\/blazor-bites-creating-a-new-project\/","pubDate":"Mon, 26 Mar 2018 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/blazor-bites-creating-a-new-project\/","description":"Prerequisites Depending on which development experience you prefer, you can get up and running with Blazor using either Visual Studio 2019 or Visual Studio Code. Regardless of which you choose you must install the latest .NET Core 3 SDK.\nYou will also need to install the latest templates via the dotnet CLI.\ndotnet new -i Microsoft.AspNetCore.Blazor.Templates Visual Studio Start by downloading the latest Visual Studio 2019. Make sure to select the the ASP."},{"title":"What is Blazor and why is it so exciting?","link":"http:\/\/chrissainty.com\/what-is-blazor-and-why-is-it-so-exciting\/","pubDate":"Sat, 24 Mar 2018 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/what-is-blazor-and-why-is-it-so-exciting\/","description":"I’m just going to say it right from the start, .NET running in the browser. No plugins, no add-ons, no weird transpilation voodoo. THIS IS NOT Silverlight. Just .NET running in the browser.\nIf you’re a .NET developer who’s even remotely interested in web development I should firmly have your attention. Now what if I told you it’s not just an idea. But a reality and you can go and try it for yourself right now?"},{"title":"Unit Testing ILogger in ASP.NET Core","link":"http:\/\/chrissainty.com\/unit-testing-ilogger-in-aspnet-core\/","pubDate":"Mon, 05 Mar 2018 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/unit-testing-ilogger-in-aspnet-core\/","description":"I’ve been creating a new template solution for our ASP.NET Core projects. As I was writing some tests for an API controller, I hit a problem with mocking the ILogger<T> interface. So I thought I would write a quick blog post about what I found, mainly so I won’t forget in the future!\nI had a setup similar to the following code.\npublic class CatalogueController : Controller { private readonly ILogger<CatalogueController> _logger; private readonly ICatalogueService _catalogueService; public CatalogueController(ILogger<CatalogueController> logger, ICatalogueService catalogueService) { _logger = logger; _catalogueService = catalogueService; } [HttpGet("api\/catalogue")] public async Task<IActionResult> GetActiveStockItemsAsync() { try { var stockItems = await _catalogueService."},{"title":"Test Driven Development: In Practice","link":"http:\/\/chrissainty.com\/test-driven-development-in-practice\/","pubDate":"Sun, 18 Feb 2018 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/test-driven-development-in-practice\/","description":"This is part two of a series:\nWhat is Test Driven Development Test Driven Development: In Practice Previously I talked about the basics of Test Driven Development or TDD, as well as some of the rules around the practice. While it’s important to get the theory, lets face facts, it can be a little dry. So in this post I want to take you though some practical TDD.\nThe Scope I’m going to take you through developing a simple message service for an app."},{"title":"Unit Testing with the HttpClient","link":"http:\/\/chrissainty.com\/unit-testing-with-httpclient\/","pubDate":"Thu, 08 Feb 2018 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/unit-testing-with-httpclient\/","description":"There has been a lot of discussion about how and even if the HttpClient class is testable. And it very much is.\nSo I wanted to write a quick post giving you three options that you can use when you need to write tests involving the HttpClient.\nLet’s assume we have a simple class which gets a list of songs from an API. I’ll use this as the example class we wish to test."},{"title":"What is Test Driven Development","link":"http:\/\/chrissainty.com\/what-is-test-driven-development\/","pubDate":"Mon, 22 Jan 2018 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/what-is-test-driven-development\/","description":"This is part one of a series:\nWhat is Test Driven Development Test Driven Development: In Practice At the start my career I had a bit of a love-hate relationship with unit testing. Several times I’d swing from “they are totally indispensable” to “well, I’ll do them if I get time”.\nAs I’ve matured in my career I’ve been saved more than once by what seemed like a random test failure."},{"title":"Dockerising an ASP.NET Core application","link":"http:\/\/chrissainty.com\/dockerise-aspnetcore-app\/","pubDate":"Sat, 06 Jan 2018 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/dockerise-aspnetcore-app\/","description":"Docker is a technology which allows applications to be packaged up and run in containers. In this post we will go through how to achieve this with an ASP.NET Core application.\nAll code from this post is available on my GitHub account.\nStep 1 - Getting Setup I am going to be doing this from a Mac. But you can easily use Windows or Linux if you prefer.\nIf you don’t have it already, you will need to install Docker onto your machine."},{"title":"ASP.Net to ASP.Net Core 2 - 5 things to know","link":"http:\/\/chrissainty.com\/asp-net-to-asp-net-core-2-5-things\/","pubDate":"Mon, 20 Nov 2017 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/asp-net-to-asp-net-core-2-5-things\/","description":"When I first heard about ASP.NET Core I couldn’t wait to try it. But for me, v1 and v1.1 just didn’t have enough APIs.\nWelcome ASP.NET Core 2! The ASP.NET Core 1 framework had around 14-16 thousand APIs available. With ASP.NET Core 2 that number is now in the region of 36 thousand.\nWith that I have started to move over some of my personal projects and wanted to jot down some of the biggest changes from ASP."},{"title":"How I Dockerised my blog","link":"http:\/\/chrissainty.com\/how-i-dockerised-my-blog\/","pubDate":"Mon, 30 Oct 2017 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/how-i-dockerised-my-blog\/","description":"Docker is a fantastic tool and great if you’re running a VPS like me. However a common question is… What if I want to be able to run multiple sites from a single VPS?\nMost websites running in containers listen on port 80 by default. Only one of them can be bound to that port at a time, so whats the answer?\nWell, unless you want to access your websites using addresses such as www."},{"title":"Creating an ASP.NET Core app on a Mac","link":"http:\/\/chrissainty.com\/creating-an-aspnet-core-app-on-a-mac\/","pubDate":"Tue, 03 Oct 2017 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/creating-an-aspnet-core-app-on-a-mac\/","description":"Coming from a Windows background I took the plunge recently and swapped to a Mac. This has given me the perfect opportunity to get into .NET Core! In this post I’m going to take you through getting everything you need to get setup and create your first app.\nPrerequisites Lets just go over a few things to get us started\n.Net Core Now we have chosen an editor the next thing we need to do is install ."},{"title":"HTTPS with Nginx and Let's Encrypt","link":"http:\/\/chrissainty.com\/https-with-nginx-and-letsencrypt\/","pubDate":"Mon, 02 Oct 2017 00:00:00 +0000","guid":"http:\/\/chrissainty.com\/https-with-nginx-and-letsencrypt\/","description":"I’ve been wanting to get started on this blog for a while now but I wasn’t sure what to kick things off with. Then I realised that setting this blog up has been pretty interesting. So why not start with a post about that…\nThe Problem When I setup this blog I had an issue with not being able to redirect my www subdomain to non-www over HTTPS. I kept receiving a Not Secure error from Chrome stating that I had no valid certificate."}]}}