1
I’m following the official documentation ASP.NET Core Blazor Forms and Validation at this link Blazor form with validation and I realized that some inputs are missing, being these:
- input type="email"
- input type="file"
- input type="image"
- input type="email"
Having only these
- Inputtext
- Inputtextarea
- Inputselect
- Inputnumber
- Inputcheckbox
- Inputdate
How to use input input type="file" which is not in the core of Blazor ?
I have the following form that contains Inputtext, Inputselectnumber, but I need to insert an input type="image" or type="file" as I do this procedure ?
<EditForm Model="@veiculo" OnValidSubmit="@Inserir">
<DataAnnotationsValidator />
<div class="form-row">
<div class="form-group col-md-4">
<label>Tag</label>
<InputText @bind-Value="@veiculo.Tag" class="form-control" />
<ValidationMessage For="@(() => veiculo.Tag)" />
</div>
<div class="form-group col-md-4">
<label>Motorista</label>
<InputText @bind-Value="@veiculo.Motorista" class="form-control" />
<ValidationMessage For="@(() => veiculo.Motorista)" />
</div>
<div class="form-group col-md-4">
<label>Placa</label>
<InputText @bind-Value="@veiculo.Placa" class="form-control" />
<ValidationMessage For="@(() => veiculo.Placa)" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>Empresa</label>
<InputSelectNumber @bind-Value="veiculo.EmpresaId" class="form-control">
<option value="0">-- ESCOLHA UMA EMPRESA --</option>
@foreach (var item in empresas)
{
<option value="@item.EmpresaId">@item.Nome</option>
}
</InputSelectNumber>
<ValidationMessage For="@(()=>veiculo.EmpresaId)" />
</div>
<div class="form-group col-md-6">
<label>Tipo</label>
<InputSelectNumber @bind-Value="veiculo.TipoId" class="form-control">
<option value="0">-- ESCOLHA UM TIPO --</option>
@foreach (var item in tipos)
{
<option value="@item.TipoId">@item.Nome</option>
}
</InputSelectNumber>
<ValidationMessage For="@(()=>veiculo.EmpresaId)" />
</div>
</div>
@if (mode == MODE.Inserir)
{
<button type="submit" class="btn btn-primary">Inserir</button>
}
else
{
<input type="hidden" @bind-value="@veiculo.VeiculoId" />
<button @onclick="Atualizar" class="btn btn-primary">Atualizar</button>
<button @onclick="Excluir" class="btn btn-danger">Excluir</button>
}
</EditForm>
My Model is this
[Key]
[Display(Name = "Código")]
public int VeiculoId { get; set; }
[Display(Name = "Tag")]
[Required(ErrorMessage = "O campo {0} é obrigatório.")]
[StringLength(26, MinimumLength = 26, ErrorMessage = "O campo {0} deve ter no mínimo {2} e máximo {1}")]
public string Tag { get; set; }
[Display(Name = "Empresa")]
[Required(ErrorMessage = "O campo {0} é obrigatório.")]
[Range(1, int.MaxValue, ErrorMessage = "Preencha o campo {0} com valor maior que {1}.")]
public int EmpresaId { get; set; }
public Empresa Empresa { get; set; }
[Display(Name = "Motorista")]
[Required(ErrorMessage = "O campo {0} é obrigatório.")]
[StringLength(100, MinimumLength = 2, ErrorMessage = "O campo {0} deve ter no mínimo {2} e máximo {1}")]
public string Motorista { get; set; }
[Display(Name = "Placa")]
[Required(ErrorMessage = "O campo {0} é obrigatório.")]
[StringLength(8, MinimumLength = 8, ErrorMessage = "O campo {0} deve ter no mínimo {2} e máximo {1}")]
[RegularExpression(@"[A-Z]{3}-\d{4}")]
public string Placa { get; set; }
[Display(Name = "Tipo")]
[Required(ErrorMessage = "O campo {0} é obrigatório.")]
[Range(1, int.MaxValue, ErrorMessage = "Preencha o campo {0} com valor maior que {1}.")]
public int TipoId { get; set; }
public Tipo Tipo { get; set; }
example: https://www.mikesdotnetting.com/article/341/uploading-files-in-blazor
– novic
This "Issue" has relevant information: https://github.com/dotnet/aspnetcore/issues/12205.
– tvdias