Blazor Webassembly: SVG Drag And Drop

Blazor Webassembly SVG Drag And Drop Demo. Draggable component supports nested Draggable, two-way binding, initialization without parameter binding

This article describes a way to implement drag and drop of SVG objects. Along the way, the following points of development with Blazor were considered:

Templated components. Content of the templated component can be set in the parent component;
Passing events from parent component to child (Parent -> Child);
Problem of rewiring component input parameters inside component (Overwritten parameters problem);
Two-way binding between parent and child component. Those. an input parameter of a child component can modify both the parent component and the child;
How to use stopPropagation with Blazor.

#blazor

Drag and drop file uploading with .NET 5.0 Blazor InputFile component

One of my pet projects requires file uploading. And because I decided to create that application to be .NET 5.0 ready, it was necessary to investigate what options do we have for file uploading with .NET 5.0 Blazor applications. The first candidate to investigate is a new InputFile component, of course. So, let’s see what it can do for us.

Installing .NET 5.0 SDK

You have to download and install a fresh version of .NET 5.0 SDK. At the moment when I’m writing this post, the SDK 5.0.100-rc.1 is available. But, probably, at the moment when you read this blog, there is a fresher version of SDK, so use it.

Creating ASP.NET Core Blazor Server application project

This time I’m going to create a Blazor Server project because I want my application can upload files to somewhere and I want it can generate links to the uploaded files. It seems to me, a Blazor Server application is most convenient for this.

So, just put the next command to your console

dotnet new blazorserver -o BlazorUploads

This time my choice is the Visual Studio 16.8.0 Preview 3.2 as an IDE. But, as usual, you can use any IDE that supports developing Blazor projects.

Clean Up

Completely remove the files and directories selected on the image below.

In the NavMenu.razor component delete the next lines of code

<li class="nav-item px-3">
    <NavLink class="nav-link" href="counter">
          Counter
    </NavLink>
</li>
<li class="nav-item px-3">
    <NavLink class="nav-link" href="fetchdata">
          Fetch data
    </NavLink>
</li>

In the Startup.cs remove the row where the WeatherForecastService is added in the ConfigureServices() method

services.AddSingleton**<** WeatherForecastService**>()** ;

And finally, remove almost all content of the_ Index.razor_ page, except the first line.

@page “/”

#posts #.net 5.0 #blazor #blazor server #component #drag and drop #drop #file #inputfile #uploading