Elian  Harber

Elian Harber


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.


What is GEEK

Buddha Community

Blazor Webassembly: SVG Drag And Drop
Hertha  Mayer

Hertha Mayer


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">
<li class="nav-item px-3">
    <NavLink class="nav-link" href="fetchdata">
          Fetch data

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

CRUD App Using Blazor And Entity Framework Core in ASP.NET Core


#blazor #blazor tutorial #blazor in c# #blazor crud #blazor webassembly #blazor with asp.net core

CRUD App Using Blazor And Entity Framework Core in ASP.NET Core


#blazor #blazor in c# #blazor tutorial #blazor webassembly #blazor crud #blazor with asp.net core

Blazor : Calling REST API ASP NET Core Blazor | WEB API

#blazor #blazor tutorial #blazor curd #blazor in c# #blazor webassembly

Call POST API ASP NET Core Blazor | Blazor CRUD using API Part-1

#blazor #blazor tutorial #blazor curd #blazor in c# #blazor webassembly