Skip to content

Commit 1badc46

Browse files
dodygdodyg
committed
Add handling multiple forms in a page using Blazor SSR
1 parent ab0ac64 commit 1badc46

File tree

11 files changed

+192
-3
lines changed

11 files changed

+192
-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 (489)
1+
# Samples for ASP.NET Core 6.0 (490)
22

3-
- Samples for ASP.NET Core **8.0 Preview 7** is available [here](/projects/.net8) (27).
3+
- Samples for ASP.NET Core **8.0 Preview 7** is available [here](/projects/.net8) (28).
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 (27)
1+
# ASP.NET 8.0 Preview 7 (28)
22

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

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

8181
This example shows how to perform automatic data binding for a form `POST` request using `<EditForm/>` and `[SupplyParameterFromForm]`.
8282

83+
* [RazorFormHandlingThree](RazorFormHandlingThree)
84+
85+
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.
86+
8387
## Mix and Match
8488

8589
* [RazorMixMatchOne](RazorMixMatchOne)

‎projects/.net8/RazorFormHandlingThree/.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": "RazorFormHandlingThree.sln"
3+
}

‎projects/.net8/RazorFormHandlingThree/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/RazorFormHandlingThree/Pages/Index.razor

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

‎projects/.net8/RazorFormHandlingThree/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<RazorFormHandlingThree.Pages.App>();
7+
app.Run();
8+
9+

‎projects/.net8/RazorFormHandlingThree/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 [SupplyParameterFromForm]
2+
3+
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. Never forget to include `<AntiforgeryToken />` in your form otherwise your POST request won't be processed.

‎projects/.net8/RazorFormHandlingThree/RazorFormHandlingThree.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/RazorFormHandlingThree/RazorFormHandlingThree.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}") = "RazorFormHandlingThree", "RazorFormHandlingThree.csproj", "{1249C601-FEFD-46EE-AEAC-765C95D6E346}"
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+
{1249C601-FEFD-46EE-AEAC-765C95D6E346}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{1249C601-FEFD-46EE-AEAC-765C95D6E346}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{1249C601-FEFD-46EE-AEAC-765C95D6E346}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{1249C601-FEFD-46EE-AEAC-765C95D6E346}.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 = {DD3B9E1A-4008-4C25-921A-648B5DA1C2C8}
24+
EndGlobalSection
25+
EndGlobal

‎projects/.net8/RazorFormHandlingThree/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)