Skip to content

Commit ce1edee

Browse files
dodygdodyg
committed
Add latest form handling for Blazor SSR
1 parent 1badc46 commit ce1edee

File tree

11 files changed

+190
-3
lines changed

11 files changed

+190
-3
lines changed

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# Samples for ASP.NET Core 6.0 (490)
1+
# Samples for ASP.NET Core 6.0, 7.0 and 8.0 Preview 7 (491)
22

3-
- Samples for ASP.NET Core **8.0 Preview 7** is available [here](/projects/.net8) (28).
3+
- Samples for ASP.NET Core **8.0 Preview 7** is available [here](/projects/.net8) (29).
44
- Samples for ASP.NET Core **7.0** is available [here](/projects/.net7) (45).
55
- Samples for ASP.NET Core **8.0 Preview 6** using EdgeDB.NET is [here](https://github.com/edgedb/edgedb-net).
66

‎projects/.net8/README.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# ASP.NET 8.0 Preview 7 (28)
1+
# ASP.NET 8.0 Preview 7 (29)
22

33
These samples require [.NET 8.0 Preview 7](https://github.com/dotnet/installer#table).
44

@@ -84,6 +84,10 @@ These samples require [.NET 8.0 Preview 7](https://github.com/dotnet/installer#t
8484

8585
This example shows how to perform **multiple** automatic data binding for a form `POST` request using `[SupplyParameterFromForm]`. We will use normal `<form>` tag in this case.
8686

87+
* [RazorFormHandlingFour](RazorFormHandlingFour)
88+
89+
This example shows how to perform **multiple** automatic data binding for a form `POST` request using `<EditForm/>` and `[SupplyParameterFromForm]`.
90+
8791
## Mix and Match
8892

8993
* [RazorMixMatchOne](RazorMixMatchOne)

‎projects/.net8/RazorFormHandlingFour/.vscode/settings.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"dotnet.defaultSolution": "RazorFormHandlingFour.sln"
3+
}

‎projects/.net8/RazorFormHandlingFour/Pages/App.razor

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<html>
2+
<head>
3+
<link href="https://fastly.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
4+
</head>
5+
<body>
6+
<Router AppAssembly="typeof(Program).Assembly">
7+
<Found Context="routeData">
8+
<RouteView RouteData="routeData" />
9+
</Found>
10+
<NotFound>
11+
<h1>Page not found</h1>
12+
<p>Sorry, but there's nothing here!</p>
13+
</NotFound>
14+
</Router>
15+
</body>
16+
</html>

‎projects/.net8/RazorFormHandlingFour/Pages/Index.razor

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
@page "/"
2+
3+
<h1>Automatic Model Binding using EditForm</h1>
4+
5+
<div class="container">
6+
@((MarkupString)_showMessage)
7+
8+
<br />
9+
<div class="row">
10+
<div class="col-md-6">
11+
<EditForm method="POST" Model="PersonInfo" FormName="info" OnValidSubmit="HandleSubmit">
12+
<div class="mb-3">
13+
<label class="form-label" for="PersonInfo.Name">Please enter your name</label><br />
14+
<InputText @bind-Value="PersonInfo.Name" class="form-control" />
15+
</div>
16+
<div class="mb-3">
17+
<label for="PersonInfo.Description" class="form-label">Describe yourself</label>
18+
<InputTextArea @bind-Value="PersonInfo.Description" class="form-control" />
19+
</div>
20+
<div class="mb-3">
21+
<label for="PersonInfo.Hobby" class="form-label">Hobby</label>
22+
<InputSelect @bind-Value="PersonInfo.Hobby" class="form-select">
23+
<option>Football</option>
24+
<option>Basketball</option>
25+
<option>Tennis</option>
26+
</InputSelect>
27+
</div>
28+
<div class="mb-3 form-check">
29+
<InputCheckbox @bind-Value="PersonInfo.IsMarried" class="form-check-input" />
30+
<label for="PersonInfo.IsMarried" class="form-check-label">Is married?</label>
31+
</div>
32+
<div class="mb-3 form-check">
33+
@{ var idx = 0;}
34+
<InputRadioGroup @bind-Value="PersonInfo.Nationality">
35+
@foreach(var val in new string[] { "USA", "Indonesia", "Egypt"})
36+
{
37+
var id = "nationality" + idx;
38+
<InputRadio class="formcheck-input" Value="@val" id="@id"/>
39+
<label class="form-check-label" for="@id">@val</label>
40+
<br/>
41+
idx++;
42+
}
43+
</InputRadioGroup>
44+
</div>
45+
<div class="mb-3">
46+
<button type="submit" class="btn btn-primary">Submit</button>
47+
</div>
48+
</EditForm>
49+
</div>
50+
<div class="col-md-6">
51+
<EditForm method="POST" Model="PersonInfo" FormName="info2" OnValidSubmit="HandleSubmit2">
52+
<div class="mb-3">
53+
<label class="form-label" for="JobInfo.Title">Please enter your job title</label><br />
54+
<InputText @bind-Value="JobInfo.Title" class="form-control" />
55+
</div>
56+
<div class="mb-3">
57+
<button type="submit" class="btn btn-primary">Submit</button>
58+
</div>
59+
</EditForm>
60+
</div>
61+
</div>
62+
</div>
63+
64+
@code
65+
{
66+
[SupplyParameterFromForm(Handler="info")]// matches @formname="info"
67+
public Person PersonInfo { get; set; } = new();
68+
69+
[SupplyParameterFromForm(Handler="info2")]// matches @formname="info2"
70+
public Job JobInfo { get; set; } = new();
71+
72+
string _showMessage = string.Empty;
73+
74+
void HandleSubmit()
75+
{
76+
_showMessage = $"Name: {PersonInfo.Name}<br />Description: {PersonInfo.Description}<br />Hobby: {PersonInfo.Hobby}<br />Is married: {PersonInfo.IsMarried}<br />Nationality: {PersonInfo.Nationality}<br/><br/>";
77+
}
78+
79+
void HandleSubmit2()
80+
{
81+
_showMessage = $"Title: {JobInfo.Title}<br/><br/>";
82+
}
83+
84+
public class Person
85+
{
86+
public string Name { get; set; } = string.Empty;
87+
88+
public string Description { get; set; } = string.Empty;
89+
90+
public string Hobby { get; set; } = string.Empty;
91+
92+
public bool IsMarried { get; set; }
93+
94+
public string Nationality { get; set; } = string.Empty;
95+
}
96+
97+
public class Job
98+
{
99+
public string Title { get; set; } = string.Empty;
100+
}
101+
}

‎projects/.net8/RazorFormHandlingFour/Program.cs

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
var builder = WebApplication.CreateBuilder();
2+
builder.Services.AddRazorComponents();
3+
4+
var app = builder.Build();
5+
6+
app.MapRazorComponents<RazorFormHandlingFour.Pages.App>();
7+
app.Run();
8+
9+

‎projects/.net8/RazorFormHandlingFour/README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Multiple Form Handling in Blazor SSR - Automatic binding using EditForm and [SupplyParameterFromForm]
2+
3+
This example shows how to perform **multiple** automatic data binding for a form `POST` request using `<EditForm/>` and `[SupplyParameterFromForm]`. `EditForm` will generate the antiforgery token so there is no need to include `<AntiforgeryToken/>` component manually.

‎projects/.net8/RazorFormHandlingFour/RazorFormHandlingFour.csproj

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<Project Sdk="Microsoft.NET.Sdk.Web">
2+
<PropertyGroup>
3+
<TargetFramework>net8.0</TargetFramework>
4+
<ImplicitUsings>true</ImplicitUsings>
5+
</PropertyGroup>
6+
</Project>

‎projects/.net8/RazorFormHandlingFour/RazorFormHandlingFour.sln

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 17
4+
VisualStudioVersion = 17.5.002.0
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "RazorFormHandlingFour", "RazorFormHandlingFour.csproj", "{47BC529E-0FEF-477A-ACE2-ED4A8D87D0FB}"
7+
EndProject
8+
Global
9+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
10+
Debug|Any CPU = Debug|Any CPU
11+
Release|Any CPU = Release|Any CPU
12+
EndGlobalSection
13+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
14+
{47BC529E-0FEF-477A-ACE2-ED4A8D87D0FB}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{47BC529E-0FEF-477A-ACE2-ED4A8D87D0FB}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{47BC529E-0FEF-477A-ACE2-ED4A8D87D0FB}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{47BC529E-0FEF-477A-ACE2-ED4A8D87D0FB}.Release|Any CPU.Build.0 = Release|Any CPU
18+
EndGlobalSection
19+
GlobalSection(SolutionProperties) = preSolution
20+
HideSolutionNode = FALSE
21+
EndGlobalSection
22+
GlobalSection(ExtensibilityGlobals) = postSolution
23+
SolutionGuid = {923989CE-5243-42DA-BBCD-48E2B5AA16DC}
24+
EndGlobalSection
25+
EndGlobal

‎projects/.net8/RazorFormHandlingFour/Shared/MainLayout.razor

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@inherits LayoutComponentBase
2+
<!doctype html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Blazor United</title>
8+
<link href="https://fastly.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
9+
</head>
10+
<body>
11+
@Body
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)