Criando o componente EditAluno

No componente EditAluno vamos alterar dados do aluno e também vamos ter que validar os dados alterados pelo usuário.

Assim vamos:

• Definir o formulário usando o componente EditForm;
• Ativar a validação com o atributo DataAnnotationsValidator;
• Exibir as mensagens de erro usando os atributos: ValidationSummary e ValidationMessage;

Após criar o componente EditAluno inclua o código abaixo:

@page "/editaluno/{id:int}"

@inject HttpClient  http
@inject NavigationManager NavigationManager

<h2>Editar Aluno</h2>
<hr />

<EditForm Model="@aluno" OnValidSubmit="EditarAluno">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div class="row">
        <div class="col-md-8">
            <div class="form-group">
                <label for="Nome" class="control-label">Nome</label>
                <InputText @bind-Value="@aluno.Nome" class="form-control" />
                <ValidationMessage For="@(()=> aluno.Nome)" />
            </div>
            <div class="form-group">
                <label for="Email" class="control-label">Email</label>
                <InputText @bind-Value="@aluno.Email" class="form-control" />
                <ValidationMessage For="@(()=> aluno.Email)" />
            </div>
            <div class="form-group">
                <label for="Idade" class="control-label">Idade</label>
                <InputNumber @bind-Value="@aluno.Idade" class="form-control" />
                <ValidationMessage For="@(()=> aluno.Idade)" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <input type="submit" class="btn btn-primary" value="Salvar" />
                <input type="button" class="btn" @onclick="@Cancel" value="Cancelar" />
            </div>
        </div>
    </div>
</EditForm>

@code {
    [Parameter]  
    public int id { get; set; }  

    Estudante aluno = new Estudante();

    protected override async Task OnInitializedAsync()  
    {  
        aluno = await http.GetJsonAsync<Estudante>("/api/estudante/" + id);  
    }  

    protected async Task EditarAluno()
    {
        await http.PutJsonAsync("/api/estudante/" + id, aluno);
        NavigationManager.NavigateTo("alunos");
    }

    void Cancel()
    {
        NavigationManager.NavigateTo("alunos");
    }
}

Para obter os dados do aluno a ser editado definimos o parâmetro id que é o código do aluno, e, no evento OnInitializedAsync() estamos obtendo os dados do aluno pelo seu id usando o método GetJsonAsync.

Neste código também estamos injetando o serviço HttpClient e o serviço NavigationManager.

A definição do formulário é praticamente identica a que foi usada no componente AddAluno.(Aqui poderíamos criar um componente genérico para editar/incluir dados)

A diferença é que para editar os dados do aluno usamos o método EditaAluno que é disparado quando o formulário for enviado com êxito (aprovado na validação) e usa o método PuJsonAsync()  e passando o id do aluno e os dados alterados.

Executando o projeto teremos o resultado abaixo:

Na próxima parte do artigo vamos definir o componente para excluir dados de um aluno existente.

Pegue o código do projeto aqui: Blazor_Crud1_3.zip  (sem as referências)

"E (Jesus) disse-lhes: Acautelai-vos e guardai-vos da avareza; porque a vida de qualquer não consiste na abundância do que possui.""
Lucas 12:15