Skip to content

EditForm examples update #30997

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
guardrex merged 2 commits into from
Nov 9, 2023
Merged

EditForm examples update #30997

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f9d97c9
EditForm examples update
guardrex Nov 9, 2023
96400c5
Updates
guardrex Nov 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 5 additions & 8 deletions aspnetcore/blazor/forms/binding.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ In the following example, the `HelloFormFromLibrary` component has a form named
`HelloFormFromLibrary.razor`:

```razor
<EditForm method="post" Model="@this" OnSubmit="@Submit" FormName="Hello">
<EditForm Model="@this" OnSubmit="@Submit" FormName="Hello">
<InputText @bind-Value="Name" />
<button type="submit">Submit</button>
</EditForm>
Expand Down Expand Up @@ -201,7 +201,7 @@ The following `NamedFormsWithScope` component uses the library's `HelloFormFromL

<div>Hello form using the same form name</div>

<EditForm method="post" Model="@this" OnSubmit="@Submit" FormName="Hello">
<EditForm Model="@this" OnSubmit="@Submit" FormName="Hello">
<InputText @bind-Value="Name" />
<button type="submit">Submit</button>
</EditForm>
Expand Down Expand Up @@ -239,14 +239,12 @@ The following example independently binds two forms to their models by form name
@rendermode RenderMode.InteractiveServer
@inject ILogger<Starship6> Logger

<EditForm method="post" Model="@Model1" OnSubmit="@Submit1"
FormName="Holodeck1">
<EditForm Model="@Model1" OnSubmit="@Submit1" FormName="Holodeck1">
<InputText @bind-Value="Model1!.Id" />
<button type="submit">Submit</button>
</EditForm>

<EditForm method="post" Model="@Model2" OnSubmit="@Submit2"
FormName="Holodeck2">
<EditForm Model="@Model2" OnSubmit="@Submit2" FormName="Holodeck2">
<InputText @bind-Value="Model2!.Id" />
<button type="submit">Submit</button>
</EditForm>
Expand Down Expand Up @@ -342,8 +340,7 @@ The main form is bound to the `Ship` class. The `StarshipSubform` component is u
@rendermode RenderMode.InteractiveServer
@inject ILogger<Starship7> Logger

<EditForm method="post" Model="@Model" OnSubmit="@Submit"
FormName="Starship7">
<EditForm Model="@Model" OnSubmit="@Submit" FormName="Starship7">
<div>
<label>
Id:
Expand Down
4 changes: 2 additions & 2 deletions aspnetcore/blazor/forms/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ A form is defined using the Blazor framework's <xref:Microsoft.AspNetCore.Compon
@rendermode RenderMode.InteractiveServer
@inject ILogger<Starship1> Logger

<EditForm method="post" Model="@Model" OnSubmit="@Submit" FormName="Starship1">
<EditForm Model="@Model" OnSubmit="@Submit" FormName="Starship1">
<InputText @bind-Value="Model!.Id" />
<button type="submit">Submit</button>
</EditForm>
Expand Down Expand Up @@ -208,7 +208,7 @@ In the next example, the preceding component is modified to create the form in t
@rendermode RenderMode.InteractiveServer
@inject ILogger<Starship2> Logger

<EditForm method="post" Model="@Model" OnValidSubmit="@Submit" FormName="Starship2">
<EditForm Model="@Model" OnValidSubmit="@Submit" FormName="Starship2">
<DataAnnotationsValidator />
<ValidationSummary />
<InputText @bind-Value="Model!.Id" />
Expand Down
8 changes: 3 additions & 5 deletions aspnetcore/blazor/forms/input-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ The following form accepts and validates user input using:

<h2>New Ship Entry Form</h2>

<EditForm method="post" Model="@Model" OnValidSubmit="@Submit" FormName="Starship3">
<EditForm Model="@Model" OnValidSubmit="@Submit" FormName="Starship3">
<DataAnnotationsValidator />
<ValidationSummary />
<div>
Expand Down Expand Up @@ -314,8 +314,7 @@ In the following example:
@rendermode RenderMode.InteractiveServer
@inject ILogger<Starship4> Logger

<EditForm method="post" EditContext="@editContext" OnSubmit="@Submit"
FormName="Starship4">
<EditForm EditContext="@editContext" OnSubmit="@Submit" FormName="Starship4">
<DataAnnotationsValidator />
<div>
<label>
Expand Down Expand Up @@ -458,8 +457,7 @@ In the following example, the user must select at least two starship classificat

<h1>Bind Multiple <code>InputSelect</code> Example</h1>

<EditForm method="post" EditContext="@editContext" OnValidSubmit="@Submit"
FormName="Starship5">
<EditForm EditContext="@editContext" OnValidSubmit="@Submit" FormName="Starship5">
<DataAnnotationsValidator />
<ValidationSummary />
<div>
Expand Down
25 changes: 6 additions & 19 deletions aspnetcore/blazor/forms/validation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,7 @@ In the following component, the `HandleValidationRequested` handler method clear

<h2>Holodeck Configuration</h2>

<EditForm method="post" EditContext="editContext" OnValidSubmit="@Submit"
FormName="Starship8">
<EditForm EditContext="editContext" OnValidSubmit="@Submit" FormName="Starship8">
<div>
<label>
<InputCheckbox @bind-Value="Model!.Subsystem1" />
Expand Down Expand Up @@ -327,7 +326,7 @@ When validation messages are set in the component, they're added to the validato

<h2>New Ship Entry Form</h2>

<EditForm method="post" Model="@Model" OnValidSubmit="@Submit" FormName="Starship9">
<EditForm Model="@Model" OnValidSubmit="@Submit" FormName="Starship9">
<CustomValidation @ref="customValidation" />
<ValidationSummary />
<div>
Expand Down Expand Up @@ -739,7 +738,7 @@ In the following component, update the namespace of the **`Shared`** project (`@

<h2>New Ship Entry Form</h2>

<EditForm method="post" Model="@Model" OnValidSubmit="@Submit" FormName="Starship10">
<EditForm Model="@Model" OnValidSubmit="@Submit" FormName="Starship10">
<DataAnnotationsValidator />
<CustomValidation @ref="customValidation" />
<ValidationSummary />
Expand Down Expand Up @@ -1042,7 +1041,7 @@ The `CustomInputText` component can be used anywhere <xref:Microsoft.AspNetCore.
@rendermode RenderMode.InteractiveServer
@inject ILogger<Starship11> Logger

<EditForm method="post" Model="@Model" OnValidSubmit="@Submit" FormName="Starship11">
<EditForm Model="@Model" OnValidSubmit="@Submit" FormName="Starship11">
<DataAnnotationsValidator />
<ValidationSummary />
<CustomInputText @bind-Value="Model!.Id" />
Expand Down Expand Up @@ -1254,25 +1253,20 @@ The following component validates user input by applying the `SaladChefValidator
@inject SaladChef SaladChef

<EditForm Model="@this" autocomplete="off" FormName="Starship12">

<DataAnnotationsValidator />

<p>
<label>
Salad topper (@saladToppers):
<input @bind="SaladIngredient" />
</label>
</p>

<button type="submit">Submit</button>

<ul>
@foreach (var message in context.GetValidationMessages())
{
<li class="validation-message">@message</li>
}
</ul>

</EditForm>

@code {
Expand All @@ -1295,25 +1289,20 @@ The following component validates user input by applying the `SaladChefValidator
@inject SaladChef SaladChef

<EditForm Model="@this" autocomplete="off">

<DataAnnotationsValidator />

<p>
<label>
Salad topper (@saladToppers):
<input @bind="SaladIngredient" />
</label>
</p>

<button type="submit">Submit</button>

<ul>
@foreach (var message in context.GetValidationMessages())
{
<li class="validation-message">@message</li>
}
</ul>

</EditForm>

@code {
Expand Down Expand Up @@ -1412,8 +1401,7 @@ Set the `CustomFieldClassProvider` class as the Field CSS Class Provider on the
@rendermode RenderMode.InteractiveServer
@inject ILogger<Starship13> Logger

<EditForm method="post" EditContext="@editContext" OnValidSubmit="@Submit"
FormName="Starship13">
<EditForm EditContext="@editContext" OnValidSubmit="@Submit" FormName="Starship13">
<DataAnnotationsValidator />
<ValidationSummary />
<InputText @bind-Value="Model!.Id" />
Expand Down Expand Up @@ -1782,8 +1770,7 @@ To enable and disable the submit button based on form validation, the following
@implements IDisposable
@inject ILogger<Starship14> Logger

<EditForm method="post" EditContext="@editContext" OnValidSubmit="@Submit"
FormName="Starship14">
<EditForm EditContext="@editContext" OnValidSubmit="@Submit" FormName="Starship14">
<DataAnnotationsValidator />
<ValidationSummary />
<div>
Expand Down