受欢迎的博客标签

ASP.NET Core Blazor Server 5.x file uploads and ASP.NET Core Web API

Published

Table of content

ASP.NET Core Blazor server file uploads  UI 

Call a web API from ASP.NET Core Blazor Server

 

ASP.NET Core Blazor file uploads

https://docs.microsoft.com/en-us/aspnet/core/blazor/file-uploads?view=aspnetcore-5.0

aspnetcore/blazor/file-uploads/samples/5.x/Components/FileUpload.razor

https://github.com/dotnet/AspNetCore.Docs/blob/master/aspnetcore/blazor/file-uploads/samples/5.x/Components/FileUpload.razor

ggg

 

step 1:ASP.NET Core Blazor server file uploads  UI 

@page "/Pages/QueuedSms/Create"
@*@attribute [Authorize(Roles = "Administrator")]*@

@using System.ComponentModel.DataAnnotations
@using System.IO
@using System.Linq
@using System.Threading
@implements IDisposable

<h3>File Upload Component</h3>

<EditForm EditContext="editContext" OnValidSubmit="OnSubmit">
    <DataAnnotationsValidator />

    <div class="form-group">
        Name: <InputText @bind-Value="@person.Name" class="form-control" />
        <ValidationMessage For="() => person.Name" />
    </div>

    <div class="form-group">
        Picture: <InputFile OnChange="OnChange" class="form-control" />
        <ValidationMessage For="() => person.Picture" />

        @{
            var progressCss = "progress " + (displayProgress ? "" : "d-none");
            var progressWidthStyle = progressPercent + "%";
        }

        <div class="@progressCss">
            <div class="progress-bar" role="progressbar" style="width:@progressWidthStyle" area-valuenow="@progressPercent" aria-minvalue="0" aria-maxvalue="100"></div>
        </div>
    </div>

    <button>Submit</button>
</EditForm>

step 2:Call a web API from ASP.NET Core Blazor

 

useful links:

Call a web API from ASP.NET Core Blazor

https://docs.microsoft.com/en-us/aspnet/core/blazor/call-web-api?view=aspnetcore-5.0