Form binding in DataForm component
10 Jan 20243 minutes to read
This segment provides a concise overview of the concepts involved in associating a Model or EditContext with a Data Form.
Model binding
The following example illustrates how the Model
is bound to the DataForm component using the user-defined EventRegistration
model class.
@using Syncfusion.Blazor.DataForm
@using Syncfusion.Blazor.Buttons
@using System.ComponentModel.DataAnnotations
<SfDataForm ID="MyForm" Width="50%"
Model="@EventRegistrationModel">
<FormValidator>
<DataAnnotationsValidator></DataAnnotationsValidator>
</FormValidator>
<FormItems>
<FormAutoGenerateItems></FormAutoGenerateItems>
</FormItems>
<FormButtons>
<SfButton typeof="submit">Register</SfButton>
</FormButtons>
</SfDataForm>
@code {
private EventRegistration EventRegistrationModel = new EventRegistration()
{
FirstName = "Andrew",
LastName = "Jack"
};
public class EventRegistration
{
[Required(ErrorMessage = "Please enter your name.")]
[Display(Name = "First Name")]
public string FirstName { get; set; }
[Required(ErrorMessage = "Please enter your last name.")]
[Display(Name = "Last Name")]
public string LastName { get; set; }
[Required(ErrorMessage = "Please enter your email-ID.")]
[Display(Name = "Email ID")]
public string Email { get; set; }
}
}
Edit context binding
The following example illustrates how the EditContext
is bound to the DataForm component using the user-defined EventRegistration
model class.
@using Syncfusion.Blazor.DataForm
@using Syncfusion.Blazor.Buttons
@using System.ComponentModel.DataAnnotations
<SfDataForm ID="MyForm" Width="50%"
EditContext="@RegistrationEditContext">
<FormValidator>
<DataAnnotationsValidator></DataAnnotationsValidator>
</FormValidator>
<FormItems>
<FormAutoGenerateItems></FormAutoGenerateItems>
</FormItems>
<FormButtons>
<SfButton typeof="submit">Register</SfButton>
</FormButtons>
</SfDataForm>
@code {
EditContext RegistrationEditContext { get; set; }
protected override void OnInitialized()
{
RegistrationEditContext = new EditContext(EventRegistrationModel);
base.OnInitialized();
}
private EventRegistration EventRegistrationModel = new EventRegistration()
{
FirstName = "Andrew",
LastName = "Jack"
};
public class EventRegistration
{
[Required(ErrorMessage = "Please enter your name.")]
[Display(Name = "First Name")]
public string FirstName { get; set; }
[Required(ErrorMessage = "Please enter your last name.")]
[Display(Name = "Last Name")]
public string LastName { get; set; }
[Required(ErrorMessage = "Please enter your email-ID.")]
[Display(Name = "Email ID")]
public string Email { get; set; }
}
}