Insert form data into a sql database triggered with a button click

Radzen Studio Blazor Server
1

I am working on a app that allows techs to submit a list of devices that need to be recycled. the input said data on the form page and then I have that data stored to local storage and then redirects the to a summary page that then loads that stored data for the tech to review one more time before the submit the information provided.

what is the best way to have each the fields that are in my summary page insert said data into a sql database? when the submit button is clicked?

here is my code

@page "/summary"
@attribute [Authorize]
@using System.Text.Json;
@inject IJSRuntime _js
@inject NavigationManager NavigationManager
@inject DialogService DialogService
@inject ContextMenuService ContextMenuService
@inject TooltipService TooltipService
@inject NotificationService NotificationService
@inject IJSRuntime JSRuntime
@using Blazored.LocalStorage

<PageTitle>Summary</PageTitle>

<RadzenGrid Data="@filteredSessionData" TItem="FormData">

    <Columns>
        <RadzenGridColumn TItem="FormData" Property="BuildingName" Title="School" />
        <RadzenGridColumn TItem="FormData" Property="CPSNumber" Title="CPS Number" />
        <RadzenGridColumn TItem="FormData" Property="Description" Title="Item Description" />
        <RadzenGridColumn TItem="FormData" Property="ReasonDescription" Title="Reason For Surplus" />
        <RadzenGridColumn TItem="FormData" Property="Edit">
            <Template Context="data">
                <div style="text-align: center;">
                    <RadzenButton Icon="edit" Style="background-color: #005570;" Click="() => EditItem(data)"></RadzenButton>
                </div>
            </Template>
        </RadzenGridColumn>
    </Columns>
</RadzenGrid>
<RadzenButton Style="width: 100%; min-width: 0px; min-height: 0px; height: 40px; display: block; background-color: #005570" Text="Submit"></RadzenButton>
<div class="back-button">
    <RadzenButton Icon="print" Style="background-color: #005570; float: left; vertical-align: text-top; text-align: center" Click="PrintMe"></RadzenButton>
</div>

@code {



private async Task PrintMe()
        => await _js.InvokeVoidAsync("window.print");
    // Define the FormData class if it's not already defined
    public class FormData
    {
        public string BuildingName { get; set; }
        public string CPSNumber { get; set; }
        public string Description { get; set; }
        public string ReasonDescription { get; set; }
    }



    // Read the stored local storage data
    private List<FormData> sessionData = new List<FormData>();

    // Filtered session data without null CPSNumber
    private List<FormData> filteredSessionData = new List<FormData>();

    // Inject the ILocalStorageService
    [Inject]
    private ILocalStorageService localStorage { get; set; }

    [Inject]
    protected SecurityService Security { get; set; }

    protected override async Task OnInitializedAsync()
    {
        // Load the data from local storage
        try
        {
            sessionData = await localStorage.GetItemAsync<List<FormData>>("inputCardData");

            // Filter out rows with null CPSNumber
            filteredSessionData = sessionData.Where(row => !string.IsNullOrEmpty(row.CPSNumber)).ToList();

            // Set the same BuildingName for all rows
            if (filteredSessionData.Count > 0)
            {
                var buildingName = filteredSessionData[0].BuildingName;
                filteredSessionData.ForEach(row => row.BuildingName = buildingName);
            }
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error loading from local storage: {ex.Message}");
        }
    }

    private void EditItem(FormData data)
    {
        NavigationManager.NavigateTo("/Form"); // Replace with the actual Razor page URL
    }
}

<style>
    .back-button {
        position: fixed;
        bottom: 20px;
        right: 20px;
    }

    .back-button a {
        display: inline-block;
        background-color: #005570;
        color: white;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        text-decoration: none;
    }

    .back-icon {
        font-size: 20px;
    }
</style>

I am still new to blazor development so sorry if this is a noob question!
thanks in advance for any help in advance!!!

2

One of the main purposes of our commercial products is to generate CRUD pages which save data to MSSQL. You can review the related help articles and videos:

You can also check Microsoft's documentation.

Also we have answered similar questions of yours before. Avoid posting duplicate threads in the future.

3