I am using Blazor Bootstrap, and I am getting an error when I try to add a Grid on my page:
[2024-01-16T14:40:11.732Z] Error: System.InvalidOperationException: Microsoft.AspNetCore.Components.Forms.InputSelect`1[System.Int32] requires a cascading parameter of type EditContext. For example, you can use Microsoft.AspNetCore.Components.Forms.InputSelect`1[[System.Int32, System.Private.CoreLib, Version=6.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]] inside an EditForm. at Microsoft.AspNetCore.Components.Forms.InputBase`1.SetParametersAsync(ParameterView parameters) at Microsoft.AspNetCore.Components.Rendering.ComponentState.SupplyCombinedParameters(ParameterView directAndCascadingParameters)
Also, note that the EditForm functionality works perfectly fine. The Grid is outside Editform. If I comment out the grid code, then the page works well. But I want all the Bank details to be visible under the same form.
@layout EventsHub.Components.Shared.Dashboard.DashboardLayout
@page "/BankDetails"
@inject EventsHub.Shared.Interface.IAccessTokenService _accessTokenService
@using System.Security.Claims
@inject NavigationManager _navigationManager
@inject ILocalStorageService _localstorage
@inject EventsHub.Shared.Interface.IEvents _eventsService
<style>
.validation-message {
color: red;
}
</style>
<div class="d-md-flex align-items-center justify-content-between mb-4">
<div>
<ol class="breadcrumb fs-sm mb-1">
<li class="breadcrumb-item">Payments</li>
<li class="breadcrumb-item active" aria-current="page">Bank Details</li>
</ol>
<h4 class="main-title mb-0">Account Details For Receiving Payments</h4>
</div>
<div class="d-flex align-items-center gap-2 mt-3 mt-md-0">
</div>
</div>
<div class="row g-3">
<div class="col-xl-12">
<div class="card card-settings mt-4">
<div class="card-body p-0">
<Toasts class="p-3" Messages="messages" Delay="6000" AutoHide="true" Placement="ToastsPlacement.BottomRight" />
<EditForm Model="@_BankDetails" OnValidSubmit="NewDetails">
<DataAnnotationsValidator />
<div class="setting-item">
<div class="row g-2 align-items-center">
<div class="col-md-5">
<h6>Bank Name</h6>
<p>Example HDFC,PNB,SBI bank etc</p>
</div><!-- col -->
<div class="col-md">
<input type="text" class="form-control" @bind-value="@_BankDetails.BankName" placeholder="Enter bank name">
<ValidationMessage For="@(() => _BankDetails.BankName)" />
</div><!-- col -->
</div><!-- row -->
</div><!-- setting-item -->
<div class="setting-item">
<div class="row g-2 align-items-center">
<div class="col-md-5">
<h6>Branch Address</h6>
<p>Your bank branch address</p>
</div><!-- col -->
<div class="col-md">
<textarea class="form-control" rows="3" @bind="@_BankDetails.BankAddress" placeholder="Enter branch address"></textarea>
<ValidationMessage For="@(() => _BankDetails.BankAddress)" />
</div><!-- col -->
</div><!-- row -->
</div><!-- setting-item -->
<div class="setting-item">
<div class="row g-2 align-items-center">
<div class="col-md-5">
<h6>Account Number</h6>
<p>Your bank account number</p>
</div><!-- col -->
<div class="col-md">
<input type="text" class="form-control" @bind-value="@_BankDetails.AccountNumber" placeholder="Enter account number">
<ValidationMessage For="@(() => _BankDetails.AccountNumber)" />
</div><!-- col -->
</div><!-- row -->
</div><!-- setting-item -->
<div class="setting-item">
<div class="row g-2 align-items-center">
<div class="col-md-5">
<h6>IFSC Code</h6>
<p>Your bank account number</p>
</div><!-- col -->
<div class="col-md">
<input type="text" class="form-control" @bind-value="@_BankDetails.IFSC" placeholder="Enter IFSC code">
<ValidationMessage For="@(() => _BankDetails.IFSC)" />
</div><!-- col -->
</div><!-- row -->
</div><!-- setting-item -->
<div class="divider"><span></span></div>
<div class="row">
<div class="row g-2 justify-content-between">
<div class="col-2">
</div>
<div class="col-4 p-3">
@if (isEditable)
{
<Button @ref="saveForm" class="btn btn-outline-success" Type="ButtonType.Submit"><i class="ri-save-3-line"></i> Save Details </Button>
}
else
{
<p>To change bank details please write a mail to us [email protected] </p>
}
</div>
</div>
</div>
</EditForm>
</div>
<Grid TItem="EventsHub.Shared.Users.BankDetails"
Class="table table-hover table-bordered table-striped"
DataProvider="BankDataProvider"
AllowFiltering="true"
AllowPaging="true"
AllowSorting="true"
Responsive="true"
ItemsPerPageText=""
PageSizeSelectorItems="@(new int[] { 5,10,20 })"
PageSizeSelectorVisible="true"
PaginationItemsTextFormat="{0} - {1}">
<GridColumn TItem="EventsHub.Shared.Users.BankDetails" HeaderText="Id" PropertyName="Id" SortString="Id" SortKeySelector="item => item.Id" FilterTextboxWidth="50" HeaderTextAlignment="Alignment.Center" TextAlignment="Alignment.Center">
@context.Id
</GridColumn>
<GridColumn TItem="EventsHub.Shared.Users.BankDetails" HeaderText="Bank Name" PropertyName="BankName" SortString="BankName" SortKeySelector="item => item.BankName" FilterTextboxWidth="80">
@context.BankName
</GridColumn>
<GridColumn TItem="EventsHub.Shared.Users.BankDetails" HeaderText="Bank Address" PropertyName="BankAddress" SortString="BankAddress" SortKeySelector="item => item.BankAddress" FilterTextboxWidth="100">
@context.BankAddress
</GridColumn>
<GridColumn TItem="EventsHub.Shared.Users.BankDetails" HeaderText="Account Number" PropertyName="AccountNumber" SortString="AccountNumber" SortKeySelector="item => item.AccountNumber" FilterTextboxWidth="120">
@context.AccountNumber
</GridColumn>
<GridColumn TItem="EventsHub.Shared.Users.BankDetails" HeaderText="IFSC" PropertyName="IFSC" SortString="IFSC" SortKeySelector="item => item.IFSC" FilterTextboxWidth="150">
@context.IFSC
</GridColumn>
<GridColumn TItem="EventsHub.Shared.Users.BankDetails" HeaderText="CreateDate" PropertyName="CreateDate" SortString="CreateDate" SortKeySelector="item => item.CreateDate" FilterTextboxWidth="80">
@context.CreateDate
</GridColumn>
</Grid>
</div>
</div>
<ConfirmDialog @ref="dialog" />
</div>
@code {
private Button saveForm;
private ConfirmDialog dialog = default!;
[CascadingParameter]
public Task<AuthenticationState> authenticationState { get; set; } = default!;
[Inject] protected PreloadService PreloadService { get; set; }
private bool isEditable { get; set; } = true;
public EventsHub.Shared.Users.BankDetails _BankDetails = new EventsHub.Shared.Users.BankDetails();
public IEnumerable<EventsHub.Shared.Users.BankDetails> _BankdetailsList = default!;
List<ToastMessage> messages = new();
private void ShowMessage(ToastType toastType, string toastTitle, string toastMessage)
{
messages.Add(CreateToastMessage(toastType, toastTitle, toastMessage));
}
public async Task<GridDataProviderResult<EventsHub.Shared.Users.BankDetails>> BankDataProvider(GridDataProviderRequest<EventsHub.Shared.Users.BankDetails> gridDataProvider)
{
if (_BankdetailsList is null)
_BankdetailsList = GetBankDetails();
return await Task.FromResult(gridDataProvider.ApplyTo(_BankdetailsList));
}
private IEnumerable<EventsHub.Shared.Users.BankDetails> GetBankDetails()
{
return new List<EventsHub.Shared.Users.BankDetails>
{
new EventsHub.Shared.Users.BankDetails{ Id = 1,BankName="BankName",AccountNumber="asd",BankAddress="asd",IFSC="asd",CreateDate=DateTime.Now}
};
}
// public async Task<GridDataProviderResult<IEnumerable<EventsHub.Shared.Users.BankDetails>> BankDataProvider(GridDataProviderRequest<EventsHub.Shared.Users.BankDetails> request)
//{
// return await Task.FromResult(new GridDataProviderResult<EventsHub.Shared.Users.BankDetails> { Data = result.Item1, TotalCount = result.Item2
//});
//}
private ToastMessage CreateToastMessage(ToastType toastType, string toastTitle, string toastMessageBody)
{
var toastMessage = new ToastMessage();
toastMessage.Type = toastType;
toastMessage.Title = $"{toastTitle}";
toastMessage.HelpText = $"{DateTime.Now}";
toastMessage.Message = $"{toastMessageBody}";
if (toastType == ToastType.Danger)
{
toastMessage.IconName = IconName.DashCircle;
}
if (toastType == ToastType.Success)
{
toastMessage.IconName = IconName.OneCircleFill;
}
// disable auto hide for `danger` and `warning` messages.
toastMessage.AutoHide = !(toastType == ToastType.Danger || toastType == ToastType.Warning);
return toastMessage;
}
async Task NewDetails()
{
var options = new ConfirmDialogOptions { IsVerticallyCentered = true };
var confirmation = await dialog.ShowAsync(
title: $"Saving Bank Details",
message1: $"Please read carefully all the details filled. All your transactions will be transferred into above mentioned account.",
message2: "Please confirm your action.",
confirmDialogOptions: options);
if (confirmation)
{
// do something
await saveBankDetails();
}
else
{
// do something
}
}
private async Task saveBankDetails()
{
saveForm?.ShowLoading("Saving...!");
var authStates = await authenticationState;
var user = authStates.User;
var id = user.FindFirst(c => c.Type == ClaimTypes.NameIdentifier);
if (_BankDetails.Id > 0)
{
_BankDetails.GetAction = EventsHub.Shared.ActionType.Action.Update;
}
else
{
_BankDetails.GetAction = EventsHub.Shared.ActionType.Action.Insert;
_BankDetails.CreateDate = DateTime.Now;
_BankDetails.Id = 0;
}
_BankDetails.IsEditable = false;
_BankDetails.UserId = Convert.ToInt32(id.Value);
var result = await _eventsService.GetBankDetails(_BankDetails);
saveForm?.HideLoading();
if (result != null)
{
if (result.Id > 0)
{
ShowMessage(ToastType.Success, "Bank details...!", "your details are updated with us.");
}
await LoadDetails(result.UserId);
this.StateHasChanged();
}
else
{
ShowMessage(ToastType.Danger, "Unable to update bank details...!", "Please connect with us at [email protected]");
}
}
private async Task LoadDetails(int UserId)
{
try
{
_BankDetails.GetAction = EventsHub.Shared.ActionType.Action.Get;
_BankDetails.UserId = UserId;
_BankDetails.BankName = "-------";
_BankDetails.BankAddress = "-----";
_BankDetails.AccountNumber = "------";
_BankDetails.IFSC = "------";
_BankDetails.Id = 0;
PreloadService?.Show(SpinnerColor.Primary, "Loading details...!");
var result = await _eventsService.GetBankDetails(_BankDetails);
if (result != null)
{
_BankDetails = new EventsHub.Shared.Users.BankDetails();
_BankDetails = result;
isEditable = result.IsEditable;
}
else
{
_BankDetails = new EventsHub.Shared.Users.BankDetails();
}
}
catch (Exception ex)
{
}
PreloadService?.Hide();
}
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
try
{
var authStates = await authenticationState;
var user = authStates.User;
if (user?.Identity is not null && user.Identity.IsAuthenticated)
{
}
else
{
_navigationManager.NavigateTo("/", true);
return;
}
var defaultActiveEvent = await _localstorage.GetItemAsStringAsync("defaultActiveEvent");
if (string.IsNullOrWhiteSpace(defaultActiveEvent))
{
_navigationManager.NavigateTo("/", true);
return;
}
else
{
var id = user.FindFirst(c => c.Type == ClaimTypes.NameIdentifier);
await LoadDetails(Convert.ToInt32(id.Value));
}
//await loadEventInformation();
}
catch (Exception ex)
{
}
StateHasChanged();
}
}