I've been trying to make a reusable form component...
But the posted data doesn't seem to bind to my model when I use a custom component.
I was wondering if anyone could tell me what I've missed. This functionality would help me standardize our layout for my team.
TestPage.razor
@page "/TestingBlazor"
@using [Redacted].ComponentLibrary.Blazor
@using [Redacted].ComponentLibrary.Blazor.Enums;
<PageTitle>@Title</PageTitle>
<RadzenPanel AllowCollapse="false" Style="" class="gridContainer">
<HeaderTemplate>
<RadzenCard Style="width: 100%; padding: 0;" class="mb-5">
<RadzenColumn>
<RadzenRow Gap="0">
<RadzenColumn class="rz-p-1">
<RadzenRow class="rz-text-align-center rz-p-4" Gap="1rem">
<RadzenText TextStyle="@TextStyle.H6" Class="rz-display-flex rz-align-items-center rz-m-0">
<b>@Title</b>
</RadzenText>
</RadzenRow>
</RadzenColumn>
<RadzenColumn class="rz-p-1">
<RadzenRow class="rz-text-align-center rz-p-4" Gap="1rem">
</RadzenRow>
</RadzenColumn>
<RadzenColumn class="rz-p-1">
<RadzenRow class="rz-text-align-center rz-p-4" Gap="1rem">
</RadzenRow>
</RadzenColumn>
</RadzenRow>
</RadzenColumn>
</RadzenCard>
</HeaderTemplate>
<ChildContent>
<RadzenTemplateForm TItem="Model" Data=@model Submit=@OnSubmit InvalidSubmit=@OnInvalidSubmit>
<RadzenFieldset Text="Personal information">
<div class="row mb-5">
<div class="col-md-4">
<RadzenLabel Text="First Name" />
</div>
<div class="col">
<RadzenTextBox style="display: block" Name="FirstName" @bind-Value=@model.FirstName class="w-100" />
<RadzenRequiredValidator Component="FirstName" Text="First name is required" Popup=@popup Style="position: absolute" />
</div>
</div>
<div class="row mb-5">
<div class="col-md-4">
<RadzenLabel Text="Last Name" />
</div>
<div class="col">
<RadzenTextBox style="display: block" Name="LastName" @bind-Value=@model.LastName class="w-100" />
<RadzenRequiredValidator Component="LastName" Text="Last name is required" Popup=@popup Style="position: absolute" />
</div>
</div>
<RadzenButton ButtonType="ButtonType.Submit" Text="Submit"></RadzenButton>
</RadzenFieldset>
<RadzenFieldset Text="Input Horizontal"> @*Custom input*@
<RadzenCard Style="width: 100%; padding: 0;" class="mb-5">
<RadzenColumn>
<RadzenRow Gap="0">
<RadzenColumn class="rz-p-1">
<RadzenRow class="rz-text-align-center rz-p-4" Gap="1rem">
<RadzenTextBoxInput Label="Nick Name" Name="NickName" Layout="@InputLayout.Horizontal"
@bind-Value="@model.NickName" Placeholder="Nick Name" />
</RadzenRow>
</RadzenColumn>
<RadzenColumn class="rz-p-1">
<RadzenRow class="rz-text-align-center rz-p-4" Gap="1rem">
<RadzenTextBoxInput Label="Last Name" Name="LastName" Layout="@InputLayout.Horizontal"
@bind-Value="@model.LastName" Placeholder="Last Name" />
</RadzenRow>
</RadzenColumn>
</RadzenRow>
</RadzenColumn>
</RadzenCard>
</RadzenFieldset>
<RadzenFieldset Text="Input Vertical "> @*Custom input*@
<RadzenCard Style="width: 100%; padding: 0;" class="mb-1">
<RadzenColumn>
<RadzenRow Gap="0">
<RadzenColumn class="rz-p-1">
<RadzenRow class="rz-text-align-center rz-p-4" Gap="1rem">
<RadzenTextBoxInput Label="First Name" Name="FirstName" Layout="@InputLayout.Vertical"
@bind-Value="@model.FirstName" Placeholder="First Name" />
</RadzenRow>
</RadzenColumn>
<RadzenColumn class="rz-p-1">
<RadzenRow class="rz-text-align-center rz-p-4" Gap="1rem">
<RadzenTextBoxInput Label="Last Name" Name="LastName" Layout="@InputLayout.Vertical"
@bind-Value="@model.LastName" Placeholder="Last Name" />
</RadzenRow>
</RadzenColumn>
</RadzenRow>
</RadzenColumn>
</RadzenCard>
</RadzenFieldset>
</RadzenTemplateForm>
<RadzenCard Style="width: 100%; padding: 0;" class="mb-5">
<RadzenColumn>
<RadzenRow Gap="0">
<RadzenColumn class="rz-p-1">
<RadzenRowText TextStyleLabel="@DetailLabelTextStyle"
TextStyleText="@DetailTextTextStyle"
TagName="@DetailTagName" FieldName="First Name" FieldData="@model.FirstName" />
<RadzenRowText TextStyleLabel="@DetailLabelTextStyle"
TextStyleText="@DetailTextTextStyle"
TagName="@DetailTagName" FieldName="Last Name" FieldData="@model.LastName" />
<RadzenRowText TextStyleLabel="@DetailLabelTextStyle"
TextStyleText="@DetailTextTextStyle"
TagName="@DetailTagName" FieldName="Nick Name" FieldData="@model.NickName" />
</RadzenColumn>
</RadzenRow>
</RadzenColumn>
</RadzenCard>
</ChildContent>
</RadzenPanel>
@code {
static string Title => "Testing Blazor";
private TextStyle DetailLabelTextStyle = TextStyle.Body1;
private TextStyle DetailTextTextStyle = TextStyle.Body2;
private TagName DetailTagName = TagName.P;
class Model
{
public string FirstName { get; set; }
public string LastName { get; set; }
public string NickName { get; set; }
}
bool popup = true;
Model model = new Model();
void OnSubmit(Model model)
{
// StateHasChanged();
//console.Log($"Submit: {JsonSerializer.Serialize(model, new JsonSerializerOptions() { WriteIndented = true })}");
}
void OnInvalidSubmit(FormInvalidSubmitEventArgs args)
{
// console.Log($"InvalidSubmit: {JsonSerializer.Serialize(args, new JsonSerializerOptions() { WriteIndented = true })}");
}
}
RadzenTextBoxInput.razor
@using [redacted].ComponentLibrary.Blazor.Enums;
@inherits RadzenTextBox
@switch (Layout)
{
case InputLayout.Vertical:
<div class="col">
<div class="row">
<div class="col-md-4">
<RadzenLabel Text="@Label" />
</div>
</div>
<div class="row">
<div class="col">
<RadzenTextBox style="display: block" Name="@Name"
@bind-Value="@Value" class="w-100" Placeholder="@Placeholder" />
<RadzenRequiredValidator Component="@Name" Text=@($@"{@Label} is required")
Popup=@popup Style="position: absolute" />
</div>
</div>
</div>
break;
case InputLayout.Horizontal:
<div class="col-md-4">
<RadzenLabel Text="@Label" />
</div>
<div class="col">
<RadzenTextBox style="display: block" Name="@Name"
@bind-Value="@Value" class="w-100" Placeholder="@Placeholder" />
<RadzenRequiredValidator Component="@Name" Text=@($@"{@Label} is required")
Popup=@popup Style="position: absolute" />
</div>
break;
}
@code {
[Parameter]
public InputLayout Layout { get; set; }
[Parameter]
public bool popup { get; set; } = true;
[Parameter]
public string Label { get; set; } = " No Label set";
}
