BlazorFormManager 1.1.0
See the version list below for details.
dotnet add package BlazorFormManager --version 1.1.0
NuGet\Install-Package BlazorFormManager -Version 1.1.0
<PackageReference Include="BlazorFormManager" Version="1.1.0" />
paket add BlazorFormManager --version 1.1.0
#r "nuget: BlazorFormManager, 1.1.0"
// 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
- src
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:
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" />
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>
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
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 | Versions 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. |
-
.NETStandard 2.0
- Microsoft.AspNetCore.Components (>= 3.1.6)
- Microsoft.AspNetCore.Components.Web (>= 3.1.6)
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 | 473 | 8/31/2022 |
3.1.1 | 450 | 4/27/2022 |
3.1.0 | 733 | 4/15/2022 |
3.0.1 | 434 | 4/14/2022 |
3.0.0 | 717 | 4/11/2022 |
2.2.0 | 527 | 9/4/2020 |
2.1.0 | 503 | 8/26/2020 |
2.0.0 | 409 | 8/20/2020 |
1.4.0 | 500 | 8/11/2020 |
1.3.0 | 516 | 8/9/2020 |
1.2.3 | 485 | 8/6/2020 |
1.2.2 | 458 | 8/5/2020 |
1.2.1 | 497 | 8/4/2020 |
1.2.0 | 491 | 8/4/2020 |
1.1.0 | 461 | 8/3/2020 |
1.0.0 | 496 | 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.