Skip to content

Commit 2db9490

Browse files
dodygdodyg
committed
Add sample on form handling using normal form tag
1 parent 1c8eea8 commit 2db9490

File tree

10 files changed

+165
-1
lines changed

10 files changed

+165
-1
lines changed

‎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 (26)
1+
# ASP.NET 8.0 Preview 7 (27)
22

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

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

7373
## Blazor SSR Form Handling
7474

75+
* [RazorFormHandlingOne](RazorFormHandlingOne)
76+
77+
This example shows how to perform automatic data binding for a form `POST` request using `[SupplyParameterFromForm]`. We will use normal `<form>` tag in this case.
78+
7579
* [RazorFormHandlingTwo](RazorFormHandlingTwo)
7680

7781
This example shows how to perform automatic data binding for a form `POST` request using `[SupplyParameterFromForm]`.

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

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

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
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>
52+
</div>
53+
54+
@code
55+
{
56+
[SupplyParameterFromForm(Handler="info")]// matches @fornname"info"
57+
public Person PersonInfo { get; set; } = new();
58+
59+
string _showMessage = string.Empty;
60+
61+
void HandleSubmit()
62+
{
63+
_showMessage = $"Name: {PersonInfo.Name}<br />Description: {PersonInfo.Description}<br />Hobby: {PersonInfo.Hobby}<br />Is married: {PersonInfo.IsMarried}<br />Nationality: {PersonInfo.Nationality}<br/><br/>";
64+
}
65+
66+
public class Person
67+
{
68+
public string Name { get; set; } = string.Empty;
69+
70+
public string Description { get; set; } = string.Empty;
71+
72+
public string Hobby { get; set; } = string.Empty;
73+
74+
public bool IsMarried { get; set; }
75+
76+
public string Nationality { get; set; } = string.Empty;
77+
}
78+
}

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

‎projects/.net8/RazorFormHandlingOne/README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Form Handling in Blazor SSR - Automatic binding using [SupplyParameterFromForm]
2+
3+
This example shows how to perform 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/RazorFormHandlingOne/RazorFormHandlingOne.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/RazorFormHandlingOne/RazorFormHandlingOne.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}") = "RazorFormHandlingOne", "RazorFormHandlingOne.csproj", "{89A0E326-6533-485A-912B-A7C01569C766}"
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+
{89A0E326-6533-485A-912B-A7C01569C766}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{89A0E326-6533-485A-912B-A7C01569C766}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{89A0E326-6533-485A-912B-A7C01569C766}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{89A0E326-6533-485A-912B-A7C01569C766}.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 = {6CB93F54-D0BC-42E9-A28F-3947EB913747}
24+
EndGlobalSection
25+
EndGlobal

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

‎projects/.net8/RazorFormHandlingOne/_Imports.razor

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@using System.Net.Http
2+
@using Microsoft.AspNetCore.Components.Forms
3+
4+
@using Microsoft.AspNetCore.Components.Routing
5+
@using Microsoft.JSInterop
6+
@using Microsoft.AspNetCore.Components.Web
7+
@using Microsoft.AspNetCore.Components.Authorization

0 commit comments

Comments
 (0)