I have a form that allows users to fill out multiple fields for electronics surplus. how do I send that the data from page 1 from a button click to a summary page (Page 2) where all the entered information can be reviewed before it is updated in the database .
this is my code for Page one:
@page "/surplus-items-new"
@attribute [Authorize]
<PageTitle>SurplusItemsNew</PageTitle>
<div class="container">
<h1 class="text-center">Surplus Form</h1>
<div class="row">
<div class="col-md-12">
<RadzenAutoComplete TextProperty="BuildingName" Data="@buildingLists" Placeholder="School Name" Style="width: 100%" Multiline="false" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<RadzenDataGrid TValue="Surplus.Models.WASPO.SurplusItemsNew" Data="@surplusItemsNews" AllowSorting="true" AllowPaging="true" AllowFiltering="true" Responsive="true" Placeholder="">
<Columns>
<RadzenDropDownDataGridColumn Property="CPSNumber" Title="CPSNumber" />
<RadzenDropDownDataGridColumn Property="Description" Title="Description" />
</Columns>
</RadzenDataGrid>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<h5 class="card-title"></h5>
<RadzenAutoComplete TextProperty="CPSNumber" Data="@surplusItemsNews" Placeholder="Enter CPS Number" Style="width: 100%" Multiline="false" />
<h5 class="card-title"></h5>
<RadzenAutoComplete TextProperty="Description" Data="@surplusItemsNews" Placeholder="Enter Item Description" Style="width: 100%" />
<RadzenDropDownDataGrid TValue="string" ValueProperty="ReasonDescription" TextProperty="ReasonDescription" Data="@reasons" AllowSorting="true" AllowPaging="true" AllowFiltering="false" Style="width: 100%" Responsive="true" Placeholder="Select Reason" ShowSearch="false" PageSize="10" AllowVirtualization="false">
<Columns>
<RadzenDropDownDataGridColumn Property="ReasonDescription" Title="ReasonDescription" />
</Columns>
</RadzenDropDownDataGrid>
</div>
</div>
</div>
</div>
</div>
Thanks in advance!
korchev
September 14, 2023, 2:45pm
2
Hi @Christopher_DeBrodie ,
Storing items is usually done in one of a few ways:
In your database. You can have another table which contains data before review.
In some storage - session or browser. Here are the available options for Blazor: ASP.NET Core Blazor state management | Microsoft Learn
Thank you so much @korchev I ended up going with using your 2nd suggestion but now my fields in the RadzenCard are not showing up at all on the page
here is my updated code:
@page "/form"
@inject IJSRuntime JSRuntime
@inject NavigationManager NavigationManager
@inject DialogService DialogService
@inject ContextMenuService ContextMenuService
@inject TooltipService TooltipService
@inject NotificationService NotificationService
@inject NavigationManager NavManager
<PageTitle>Form</PageTitle>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="h3">Surplus Form</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<RadzenDropDownDataGrid TValue="string" ValueProperty="BuildingName" TextProperty="BuildingName" Data="@buildingLists" Placeholder="School Name" Style="width: 100%" AllowSorting="false" AllowSelectAll="false" AllowFiltering="false" ShowSearch="false" PageSize="60">
<Columns>
<RadzenDropDownDataGridColumn Property="BuildingName" Title="BuildingName" />
</Columns>
</RadzenDropDownDataGrid>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-group">
@foreach (var inputData in inputCardData)
{
<div class="col-md-4"> <!-- Add this div to control card width -->
<RadzenCard Variant="Radzen.Variant.Filled">
<div class="form-group">
<RadzenAutoComplete @bind-Value="inputData.CPSNumber" Placeholder="CPS Number" Style="width: 100%" />
</div>
<div class="form-group">
<RadzenAutoComplete @bind-Value="inputData.Description" Placeholder="Item Description" Style="width: 100%" />
</div>
<div class="form-group">
<RadzenDropDownDataGrid TValue="string" ValueProperty="ReasonDescription" TextProperty="ReasonDescription" Data="@reasons" Style="width: 100%" ShowSearch="false" AllowFiltering="false" AllowSorting="false" AllowSelectAll="false" Placeholder="Reason For Surplus" PageSize="10">
<Columns>
<RadzenDropDownDataGridColumn Property="ReasonDescription" Title="ReasonDescription" />
</Columns>
</RadzenDropDownDataGrid>
</div>
</RadzenCard>
</div>
}
</div>
</div>
</div>
</div>
</div>
<RadzenButton Style="width: 100%; min-width: 0px; min-height: 0px; height: 40px; display: block" Text="Finalize List" Click="FinalizeList"></RadzenButton>
@code {
[Inject]
protected Surplus.WASPOService WASPOService { get; set; }
protected System.Linq.IQueryable<Surplus.Models.WASPO.SurplusItemsNew> surplusItemsNews;
protected System.Linq.IQueryable<Surplus.Models.WASPO.BuildingList> buildingLists;
protected System.Linq.IQueryable<Surplus.Models.WASPO.Reason> reasons;
// Create a class to hold form data
public class FormData
{
public string CPSNumber { get; set; }
public string Description { get; set; }
public string ReasonDescription { get; set; }
}
// Create a list to store instances of the form data
List<FormData> inputCardData = new List<FormData>();
protected override async Task OnInitializedAsync()
{
surplusItemsNews = await WASPOService.GetSurplusItemsNews();
buildingLists = await WASPOService.GetBuildingLists();
reasons = await WASPOService.GetReasons();
}
// Event handler for the "Finalize List" button
private void FinalizeList()
{
// Store the input card data in session data
var sessionData = inputCardData;
NavManager.NavigateTo("/summary");
// You can now use sessionData as needed
// For example, you can store it in session or pass it to another component or page.
}
}
can you please assist on why that might be?
Thanks in advance
