Update value on EditForm only with submit button is clicked
<EditForm Model="@model" OnValidSubmit="ValidSubmit">
<DataAnnotationsValidator />
<div class="form-group">
<SfTextBox Placeholder="Mark Scheme Name"
ShowClearButton=true
FloatLabelType="@FloatLabelType.Auto"
@bind-Value="@model.Name"
></SfTextBox>
<ValidationMessage For="@(() => model.Name)" />
</div>
<div class="mt-3">
<SfButton CssClass="e-small e-info" Type="submit">@saveButtonCaption</SfButton>
<SfButton CssClass="e-small e-primary" Type="button">@cancelButtonCaption</SfButton>
</div>
</EditForm>
@code {
[Parameter] public Model model { get; set; } = new Model();
}
protected override async Task OnInitializedAsync()
{
if (model.Id == 0)
{
model = new Model();
}
else
{
model = await dbService.FindRecord<Model>(x => x.Id == model.Id);
}
}
protected async Task ValidSubmit(EditContext editContext)
{
…
await dbService.EditRecord<Model>(model);
}
|
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Buttons
@using System.ComponentModel.DataAnnotations;
@using Syncfusion.Blazor.Popups
<div class="col-lg-12 control-section" id="target">
<div>
@if (this.ShowButton)
{
<button class="e-btn" @onclick="@OnBtnClick">Open</button>
}
</div>
<SfDialog @ref="@DialogObject" Width="500px" ShowCloseIcon="true" @bind-Visible="Visibility">
<DialogTemplates>
<Header> About SYNCFUSION succinctly series </Header>
<Content>
<div class="row">
<div style="width:100%;margin:20px;">
<EditForm EditContext="@editContext">
<DataAnnotationsValidator />
<div class="form-group">
<SfTextBox Placeholder="Email address" FloatLabelType='@FloatLabelType.Auto' @bind-Value="model.EmailAddress" CssClass="@cssClass"></SfTextBox>
<ValidationMessage For="() => model.EmailAddress" />
</div>
<div class="form-group">
<SfTextBox ID="password" CssClass="@cssClass" @bind-Value="model.Password" Type="InputType.Password" Placeholder="Password" FloatLabelType="@FloatLabelType.Auto"></SfTextBox>
<ValidationMessage For="@(() => model.Password)" />
</div>
<div class="mt-3">
<SfButton CssClass="e-small e-info" Type="submit" OnClick="SaveButtonClick">@saveButtonCaption</SfButton>
<SfButton CssClass="e-small e-primary" Type="button" OnClick="CancelButtonClick">@cancelButtonCaption</SfButton>
</div>
</EditForm>
</div>
</div>
</Content>
</DialogTemplates>
<DialogEvents OnOpen="@DialogOpen" Closed="@DialogClose"></DialogEvents>
<DialogButtons>
</DialogButtons>
</SfDialog>
</div>
@code {
SfDialog DialogObject;
public string saveButtonCaption { get; set; } = "Submit";
public string cancelButtonCaption { get; set; } = "Cancel";
private bool Visibility { get; set; } = true;
private bool ShowButton { get; set; } = false;
private void OnBtnClick()
{
this.Visibility = true;
}
private void DialogOpen(Object args)
{
this.ShowButton = false;
}
private void DialogClose(Object args)
{
this.ShowButton = true;
}
private Test model;
private EditContext editContext;
private string cssClass { get; set; } = "e-outline";
protected override void OnInitialized()
{
model = new Test();
editContext = new EditContext(model);
}
public class Test
{
[Required]
public string EmailAddress { get; set; }
[Required]
public string Password { get; set; }
}
public void CancelButtonClick()
{
this.model.EmailAddress = "";
this.model.Password = "";
}
public void SaveButtonClick()
{
this.Visibility = false;
}
}
|
