BlazorFormManager 1.1.0

There is a newer version of this package available.
See the version list below for details.
dotnet add package BlazorFormManager --version 1.1.0
NuGet\Install-Package BlazorFormManager -Version 1.1.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="BlazorFormManager" Version="1.1.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add BlazorFormManager --version 1.1.0
#r "nuget: BlazorFormManager, 1.1.0"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install BlazorFormManager as a Cake Addin
#addin nuget:?package=BlazorFormManager&version=1.1.0

// Install BlazorFormManager as a Cake Tool
#tool nuget:?package=BlazorFormManager&version=1.1.0

BlazorFormManager

BlazorFormManager is an open-source Razor Class Library (RCL) for (both client and server-side) Blazor projects. It provides core functionalities for handling AJAX form submissions with zero or more files, and report back data upload progress. It does so by enhancing the existing functionalities of an EditForm, including client-side validations, form data and file upload progress report, abortion of an on-going upload, and console logging support for troubleshooting.

It is flexible enough to allow advanced control, such as setting HTTP request headers, over instances of the XMLHttpRequest object used to send requests, all from the C#/.NET perspective.

Quick start

Clone this repository into a directory on your device:

git clone https://github.com/bigabdoul/BlazorFormManager.git

There are 3 projects found under the directory BlazorFormManager and the structure is similar to:

  • BlazorFormManager
    • src
      • BlazorFormManager
      • Demos
        • BlazorFormManager.Demo.Client
        • BlazorFormManager.Demo.Server

In the project's root directory you can find a Visual Studio Solution (.sln) file. To launch with Visual Studio, double-click that file and make sure BlazorFormManager.Demo.Server is the start-up project. Press CTRL+F5 (or the appropriate key combination on your device).

Quick Integration Steps

In your {APP NAMESPACE}.Client project, open the index.html file located under the wwwroot folder and add the following lines:

  1. At the top, right before the closing </head> tag:

    • <link href="_content/BlazorFormManager/css/styles.css" rel="stylesheet" />, and optionally
    • <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
  2. At the bottom, right before the closing </body> tag:

    • <script src="_content/BlazorFormManager/js/BlazorFormManager.js"></script>, and optionally
    • <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js"></script>
  3. Add the following namespace to the _Imports.razor file:

    File: {APP NAMESPACE}.Client/_Imports.razor

    @using BlazorFormManager
    @using BlazorFormManager.Components
    @using BlazorFormManager.Components.Debugging
    @using BlazorFormManager.Debugging
    
  4. For instance, create a new user registration Razor Component with the FormManager component:

    @page "/account/register"
    @using System.ComponentModel.DataAnnotations
    
    <FormManager @ref="form" Model="User" FormAction="api/account/register" EnableProgressBar>
      <div class="row">
          <div class="col-md-8">
            <div class="row">
              <div class="col-6">
                <div class="form-group">
                  <label class="sr-only" for="FirstName">First Name</label>
                  <InputText @bind-Value="User.FirstName" class="form-control" id="FirstName" title="First Name" placeholder="First Name" />
                  <ValidationMessage For="() => User.FirstName" />
                </div>
                <div class="form-group">
                    <label class="sr-only" for="LastName">Last Name</label>
                    <InputText @bind-Value="User.LastName" class="form-control" id="LastName" title="Last Name" placeholder="Last Name" />
                    <ValidationMessage For="() => User.LastName" />
                </div>
                <div class="form-group">
                    <label class="sr-only" for="Email">Email</label>
                    <InputText @bind-Value="User.Email" type="email" class="form-control" id="Email" title="Email" placeholder="Email" />
                    <ValidationMessage For="() => User.Email" />
                </div>
                <div class="form-group">
                    <label class="sr-only" for="PhoneNumber">Phone Number</label>
                    <InputText @bind-Value="User.PhoneNumber" class="form-control" id="PhoneNumber" title="Phone Number" placeholder="Phone Number" />
                    <ValidationMessage For="() => User.PhoneNumber" />
                </div>
              </div>
              <div class="col-6">
                <div class="form-group">
                  <div class="custom-file mt-3 mb-3">
                      <input type="file" class="custom-file-input" id="@id" title="Choose a photo">
                      <label class="custom-file-label" for="@id">Choose a photo</label>
                  </div>
                </div>
              </div>
            </div>
          </div>
      </div>
      <SubmitButton Manager="form" Text="Sign up" />
      <DataAnnotationsValidator />
    </FormManager>
    
    @code {
      private FormManager<RegisterUserModel> form;
      private RegisterUserModel User = new RegisterUserModel();
    
      public class RegisterUserModel
      {
        [Required]
        [StringLength(100)]
        public string FirstName { get; set; }
    
        [Required]
        [StringLength(100)]
        public string LastName { get; set; }
    
        [Required]
        [StringLength(255)]
        [EmailAddress]
        public string Email { get; set; }
    
        [StringLength(30)]
        public string PhoneNumber { get; set; }
    
        [Required]
        [DataType(DataType.Password)]
        public string Password { get; set; }
    
        [Required]
        [DataType(DataType.Password)]
        [Compare(nameof(Password), ErrorMessage = "The password and confirmation password do not match.")]
        public string ConfirmPassword { get; set; }
      }
    }
    

Demonstration projects

The demonstration (or demo) projects have been created with Visual Studio 2019's Blazor WebAssembly App template (ASP.NET Core 3.1 hosted with authentication using individual user accounts).

Walkthrough documentation

Check out the Walkthrough file for detailed instructions that guide you through building a set of projects similar to the demo projects found in this repository.

Engage, contribute, and give feedback

If you want to make improvements to this project, some of the best ways to contribute are to try things out, file issues, join in design conversations, and make pull-requests.

Product Compatible and additional computed target framework versions.
.NET net5.0 was computed.  net5.0-windows was computed.  net6.0 was computed.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 was computed.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
.NET Core netcoreapp2.0 was computed.  netcoreapp2.1 was computed.  netcoreapp2.2 was computed.  netcoreapp3.0 was computed.  netcoreapp3.1 was computed. 
.NET Standard netstandard2.0 is compatible.  netstandard2.1 was computed. 
.NET Framework net461 was computed.  net462 was computed.  net463 was computed.  net47 was computed.  net471 was computed.  net472 was computed.  net48 was computed.  net481 was computed. 
MonoAndroid monoandroid was computed. 
MonoMac monomac was computed. 
MonoTouch monotouch was computed. 
Tizen tizen40 was computed.  tizen60 was computed. 
Xamarin.iOS xamarinios was computed. 
Xamarin.Mac xamarinmac was computed. 
Xamarin.TVOS xamarintvos was computed. 
Xamarin.WatchOS xamarinwatchos was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (1)

Showing the top 1 NuGet packages that depend on BlazorFormManager:

Package Downloads
BlazorFormManager.Extensions

Extensions for BlazorFormManager

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
3.1.2 421 8/31/2022
3.1.1 419 4/27/2022
3.1.0 683 4/15/2022
3.0.1 402 4/14/2022
3.0.0 666 4/11/2022
2.2.0 495 9/4/2020
2.1.0 474 8/26/2020
2.0.0 379 8/20/2020
1.4.0 467 8/11/2020
1.3.0 490 8/9/2020
1.2.3 454 8/6/2020
1.2.2 418 8/5/2020
1.2.1 469 8/4/2020
1.2.0 463 8/4/2020
1.1.0 433 8/3/2020
1.0.0 465 7/29/2020

The namespaces BlazorFormManager.Debug and BlazorFormManager.Components.Debug have been respectively renamed to BlazorFormManager.Debugging and BlazorFormManager.Components.Debugging.

Authorization access token code has also been simplified.