Blazor WASM with CRUD against Web API Endpoint - Insert() does Insert anything in db

Question

User379720387 posted

Extending the functionality to be able to add items:

Debugger makes it to ClearFields, but at that time no new record was added.

Is the highlighted code correct?

@if (students != null) // Insert form
    {
        <input placeholder="First Name" bind="@firstName" />
        <br />
        <input placeholder="Last Name" bind="@lastName" />
        <br />
        <input placeholder="School" bind="@school" />
        <br />
        <button @onclick="@Insert" class="btn btn-warning">Insert</button>
    }

@functions {
    Student[] students;

    string studentId;
    string firstName;
    string lastName;
    string school;


    protected async override Task OnInitializedAsync()
    {
        try
        {
            var httpClient = ClientFactory.CreateClient("ServerAPI");
            students = await httpClient.GetFromJsonAsync<Student[]>("api/students");
        }
        catch (Exception ex) { Console.WriteLine(ex.Message); }


    }

    private async Task Insert()
    {
        Student student = new Student()
        {
            StudentId = Guid.NewGuid().ToString(),
            FirstName = firstName,
            LastName = lastName,
            School = school
        };
        try
        {


            var httpClient = ClientFactory.CreateClient("ServerAPI");
            await httpClient.PostAsJsonAsync("api/students", student);
            ClearFields();
            students = await httpClient.GetFromJsonAsync<Student[]>("api/students");
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex.Message);
        }
    }
}

Answer 1

User475983607 posted

According to the Blazor docs, use an EditForm.

https://docs.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-3.1

@page "/studentInsert"
@inject IHttpClientFactory ClientFactory

<h1>Save Student</h1>

<EditForm Model="@Student" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div>
        <InputText id="firstname" @bind-Value="Student.FirstName" />
    </div>  
    <div>
        <InputText id="lastname" @bind-Value="Student.LastName" />
    </div>
    <div>
        <InputText id="scool" @bind-Value="Student.School" />
    </div>

    <button type="submit">Submit</button>
</EditForm>

@code {
    Student Student = new Student();

    private async Task HandleValidSubmit()
    {
        try
        {
            var httpClient = ClientFactory.CreateClient("ServerAPI");
            await httpClient.PostAsJsonAsync("api/students", Student);
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex.Message);
        }
    }
}

Answer 2

User379720387 posted

I like that approach, but where does this live? Only place I have a .cs is Program.cs

If so, does it need to be part of Task Main(), and how?

using System.ComponentModel.DataAnnotations;

public class ExampleModel
{
    [Required]
    [StringLength(10, ErrorMessage = "Name is too long.")]
    public string Name { get; set; }
}

Answer 3

User475983607 posted

wavemaster

I like that approach, but where does this live? Only place I have a .cs is Program.cs

If so, does it need to be part of Task Main(), and how?

using System.ComponentModel.DataAnnotations;

public class ExampleModel
{
    [Required]
    [StringLength(10, ErrorMessage = "Name is too long.")]
    public string Name { get; set; }
}

Your solution has a SchoolLibrary project that contains a Student Model.  The SchoolLibrary is shared by the Blazor and API applications.  I would put any new Models in the same library.  

If you want the class in the Blazor project, then just create a folder (Models) and put the class in the Models folder.  Keep in mind, doing so mean you cannot shared the class with the API.

Answer 4

User379720387 posted

This is what SchoolLibrary looks like:

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Text;

namespace SchoolLibrary
{
    public class Student
    {
        public string StudentId { get; set; }
        [Required]
        public string FirstName { get; set; }
        [Required]
        public string LastName { get; set; }
        [Required]
        public string School { get; set; }
    }

I don't think that I could do this:

<EditForm Model="@Student" OnValidSubmit="Student">

@Student has a squiggle for Student is a type which is not valid in the given context.

Answer 5

User475983607 posted

@Student is a variable not a class.  Did you define a the variable as Student or maybe with a lower case "s" student.  

<EditForm Model="@Student" OnValidSubmit="Student">

Anyway, the code I posted above works.

Answer 6

User379720387 posted

Yup, got it working here too!

Thanks.