BlazorFormManager 2.0.0
See the version list below for details.
dotnet add package BlazorFormManager --version 2.0.0
NuGet\Install-Package BlazorFormManager -Version 2.0.0
<PackageReference Include="BlazorFormManager" Version="2.0.0" />
paket add BlazorFormManager --version 2.0.0
#r "nuget: BlazorFormManager, 2.0.0"
// Install BlazorFormManager as a Cake Addin #addin nuget:?package=BlazorFormManager&version=2.0.0 // Install BlazorFormManager as a Cake Tool #tool nuget:?package=BlazorFormManager&version=2.0.0
AutoEditForm quick start (pseudo-code)
For a working sample please checkout the demo application in the project's repository.
The sample model:
using BlazorFormManager.ComponentModel.ViewAnnotations;
using System;
using System.ComponentModel.DataAnnotations;
[FormDisplayDefault(ShowGroupName = true)]
public class AutoUpdateUserModel
{
[DisplayIgnore]
public string Id { get; set; }
[Required]
[StringLength(100)]
[FormDisplay(GroupName = "Personal info", Icon = "fas fa-user")]
public string FirstName { get; set; }
[Required]
[StringLength(100)]
[FormDisplay(GroupName = "Personal info", Name = "Last / Family Name", Icon = "fas fa-user")]
public string LastName { get; set; }
[Required]
[StringLength(255)]
[EmailAddress]
[FormDisplay(GroupName = "Contact details", Icon = "fas fa-envelope", UITypeHint = "email")]
public string Email { get; set; }
[StringLength(30)]
[FormDisplay(GroupName = "Contact details", Icon = "fas fa-phone", UITypeHint = "phone")]
public string PhoneNumber { get; set; }
[FormDisplay(GroupName = "Please select", UIHint = "select", Name = "", Order = 2)]
public int AgeRange { get; set; }
[Range(typeof(DayOfWeek), "Monday", "Friday")]
[FormDisplay(GroupName = "Please select", UIHint = "select", Name = "", Order = 1, Prompt = "[Favourite Working Day]", Icon = "fas fa-calendar")]
public string FavouriteWorkingDay { get; set; }
[FormDisplay(UITypeHint = "radio", Order = 3, Name = "What's your favourite color?")]
public string FavouriteColor { get; set; }
[FormDisplay(Order = 4, Name = "Enable two-factor authentication", Description = "Log in with your email and an SMS confirmation")]
public bool TwoFactorEnabled { get; set; }
}
The matching markup on the client (AutoEditFormUpdate.razor):
@attribute [Authorize]
@page "/account/autoeditform"
<AutoEditForm Model="Model" FormAction="api/account/update" RequestHeaders="RequestHeaders" OnSubmitDone="HandleSubmitDone" OptionsGetter="GetOptions" @ref="Manager">
<AfterDisplayGroups>
<hr />
<SubmitButton Manager="Manager" Text="Update" />
</AfterDisplayGroups>
<ChildContent>
<Base64RemoteImage Src="api/account/photo" @ref="RemoteImgRef" />
<CustomInputFile Name="Photo" />
<DataAnnotationsValidator />
</ChildContent>
</AutoEditForm>
The code behind the markup (essential parts):
using BlazorFormManager.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Net.Http.Json;
using System.Threading.Tasks;
public partial class AutoEditFormUpdate
{
private static IEnumerable<SelectOptionList> _options;
private IDictionary<string, object> RequestHeaders { get; set; }
private AutoUpdateUserModel Model { get; set; }
private AutoEditForm<AutoUpdateUserModel> Manager { get; set; }
private Base64RemoteImage RemoteImgRef { get; set; }
...
protected override async Task OnInitializedAsync()
{
try
{
Model = await Http.GetFromJsonAsync<AutoUpdateUserModel>("api/account/info");
RequestHeaders = await HeadersProvider.CreateAsync();
if (_options == null) _options = await Http.GetFromJsonAsync<IEnumerable<SelectOptionList>>("api/account/options");
}
catch (AccessTokenNotAvailableException ex)
{
ex.Redirect();
}
await base.OnInitializedAsync();
}
private IEnumerable<SelectOption> GetOptions(string propertyName)
=> _options?.Where(opt => opt.PropertyName == propertyName).FirstOrDefault()?.Items;
}
On the server, in a controller:
[Authorize]
[Route("api/[controller]")]
[ApiController]
public class AccountController : ControllerBase
{
[HttpGet("options")]
public IEnumerable<SelectOptionList> GetOptions()
{
// These options could be retrieved from a database or another server-side store;
// otherwise, there would be no point in making an HTTP request just to retrieve
// static / hard-coded values. But hey, this is a demo project!
var ageOptions = new[]
{
new SelectOption{ Id = "0", Value = "[Your most appropriate age]", IsPrompt = true },
new SelectOption{ Id = "1", Value = "Minor (< 18)" },
new SelectOption{ Id = "2", Value = "Below or 25" },
new SelectOption{ Id = "3", Value = "Below or 30" },
new SelectOption{ Id = "4", Value = "Below or 40" },
new SelectOption{ Id = "5", Value = "Below 50" },
new SelectOption{ Id = "6", Value = "Between 50 and 54" },
new SelectOption{ Id = "7", Value = "Between 55 and 60" },
new SelectOption{ Id = "8", Value = "Above 60" },
new SelectOption{ Id = "8", Value = "Above 70" },
new SelectOption{ Id = "8", Value = "Above 80" },
};
var colorOptions = new[]
{
new SelectOption("red", "Red"),
new SelectOption("green", "Green"),
new SelectOption("blue", "Blue"),
};
return new[]
{
new SelectOptionList(nameof(AutoUpdateUserModel.AgeRange), ageOptions),
new SelectOptionList(nameof(AutoUpdateUserModel.FavouriteColor), colorOptions),
};
}
}
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 |
Introducing AutoEditForm: Automatically generate an EditForm with all appropriate inputs using only a model and custom attributes. These new form display custom attributes control the way the UI is presented and reduce the amount of code required to have a beautifully-layed-out and fully-functional editable form. Adding a tiny amount of CSS you can further style your form as you desire.