Thoughts on .Net & Coding

.Net Articles, tutorials, reviews, code and more...

  • Drag-n-Drop file upload in Blazor using JS interop and minimal API (Part 2)

    In the Part 1 of this article you learned to implement drag-n-drop in a Blazor Server application. So far we are able to drag-n-drop files on to a drop target and list those file names in the fileBasket. However, no files are actually sent to the server. That's what we will do in this part of the article. Although our focus is going to be minimal API approach, we will explorer three variations of the process.

  • Drag-n-Drop file upload in Blazor using JS interop and minimal API (Part 1)

    Uploading files from client computer to the server is a common task in web applications. You can either use jQuery Ajax or Blazor's InputFile component to accomplish that task. Files to be uploaded on the server are typically selected by the end user using file input field. However, most of the browsers also allow you to select files by dragging them from the client computer to your web application. To that end this article discusses how drag-n-drop of files can be done in Blazor Server apps. I am going to assume that you are familiar with Blazor's JavaScript interop. You may read my previous article in case you aren't familiar with Blazor's JS interop.

  • Use JavaScript Interop in Blazor

    ASP.NET Core Blazor allows you build SPAs using C#, HTML, and CSS. Although you can develop Blazor apps without using any JavaScript, at times you might want to invoke some JavaScript code from your Blazor components. Moreover, the JavaScript code might also want to invoke some C# methods. To that end this article quickly illustrates how this can be accomplished using Blazor's JavaScript interop features.

  • Load components dynamically in Blazor

    Blazor apps consist of one or more Razor components that reside in .razor files. Usually, you place a component in a page at development time. However, at times you may want to load components on the fly based on some logic. That means you don't know the component to be loaded at the development time. That will be known only during run-time. Luckily, Blazor provides what is known as Dynamic Component that can be used to deal with such situation. In this article you will learn how Dynamic Component can be used in a Blazor Server app.

  • Create your own .NET CLI tool

    As a ASP.NET Core developer you are familiar with .NET Command Line Interface (CLI). You must have also used CLI tools such as dotnet-ef while building ASP.NET Core web apps. In addition to using built-in CLI tools you can create your own tools that can be used with .NET CLI. To this end this article introduces you to the overall tool creation and registration process.

  • Configure application startup in ASP.NET Core 6

    If you are tracking the progress of ASP.NET Core 6, you are probably aware of the new features being introduced. One of the new and interesting features of ASP.NET Core 6 is the new way of configuring web application startup in just a few lines of code. Currently this new way of application startup has been introduced in empty project templates but you can easily use it in any other project template (say, ASP.NET Core MVC or Razor Pages). To that end this article shows you how standard ASP.NET Core MVC project template generated code can be modified to use the new way of application startup.

  • Setup Blazor app using ASP.NET Core Empty project template (Part 2)

    In Part 1 of this article, you learned to setup a Blazor Server app using ASP.NET Core's empty project template. Continuing further, this part teaches you to prepare a Blazor WebAssembly app using an empty project template. Since you are familiar with the basics outlined in the previous part, let's get going by creating a new empty project in Visual Studio. 

  • Setup Blazor app using ASP.NET Core Empty project template (Part 1)

    Visual Studio offers Blazor Server and Blazor WebAssembly project templates to the ASP.NET Core developers. Most of the times beginners are taught to utilize these default project templates to build the respective Blazor apps. However, it would be an interesting exercise for beginners to setup Blazor Server and Blazor WebAssembly projects using ASP.NET Core's Empty project template. In this two part article you will develop Blazor "Hello World" application using the Empty project template.

  • Use CSS isolation in AspNet Core MVC, Razor Pages, and Blazor

    ASP.NET Core developers often store styling information for MVC views, Razor Pages, and Razor Components into a style sheet file. The style sheet is then applied to various pages using HTML element. Although this works great in many cases, at times you might want to isolate view / page / component specific styling information into its own CSS file. Luckily, MVC views, Razor Pages, and Razor Components support such CSS isolation. This article explains how.