Skip to content

Commit 1b45aef

Browse files
sathiskumarKRsathiskumarKR
committed
Sample(SF3600_Text): Some changes in Getting started with the Blazor TextArea Component
1 parent ffddb3c commit 1b45aef

File tree

4 files changed

+8
-175
lines changed

4 files changed

+8
-175
lines changed

‎TextArea/BlazorServerApp/Pages/Index.razor‎

Lines changed: 3 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,8 @@
11
@page "/"
22

3-
@using Syncfusion.Blazor.Inputs
4-
@using System.ComponentModel.DataAnnotations
5-
@using Syncfusion.Blazor.Buttons
6-
73
<div class="form-container">
8-
<EditForm Model="@annotation" OnValidSubmit="OnValidSubmit" OnInvalidSubmit="OnInvalidSubmit">
9-
<DataAnnotationsValidator></DataAnnotationsValidator>
10-
11-
<div class="form-element">
12-
<SfTextArea @bind-Value="annotation.Comments" ResizeMode="Resize.None" FloatLabelType="FloatLabelType.Always" RowCount="6" ColumnCount="40"
13-
Placeholder="Type your message.." CssClass="e-static-clear" ShowClearButton="true"></SfTextArea>
14-
<ValidationMessage For="@(() => annotation.Comments)" />
15-
</div>
16-
17-
<div class="form-element">
18-
<SfButton type="submit" IsPrimary="true">Submit</SfButton>
19-
</div>
20-
</EditForm>
21-
22-
@if (!string.IsNullOrEmpty(Message))
23-
{
24-
<p class="success-message">@Message</p>
25-
}
4+
<SfTextArea ResizeMode="Resize.None" FloatLabelType="FloatLabelType.Always" RowCount="6" ColumnCount="40"
5+
Placeholder="Type your message.." MaxLength="20"></SfTextArea>
266
</div>
277
<style>
288
/* Center the form container */
@@ -32,41 +12,4 @@
3212
align-items: center;
3313
margin-top: 5rem;
3414
}
35-
36-
/* Style for the form elements to ensure proper spacing */
37-
.form-element {
38-
margin-bottom: 1rem;
39-
}
40-
41-
/* Style for the success message */
42-
.success-message {
43-
margin-top: 1rem;
44-
color: green; /* Ensures the success message is green */
45-
}
46-
</style>
47-
48-
@code {
49-
private string Message = string.Empty;
50-
private Annotation annotation = new Annotation();
51-
52-
private async Task OnValidSubmit()
53-
{
54-
Message = "Form Submitted Successfully!";
55-
await Task.Delay(2000);
56-
Message = string.Empty;
57-
StateHasChanged();
58-
}
59-
60-
private void OnInvalidSubmit()
61-
{
62-
Message = string.Empty;
63-
}
64-
65-
public class Annotation
66-
{
67-
[Required(ErrorMessage = "The comments field is required.")]
68-
[MaxLength(250, ErrorMessage = "The comments field should not contain more than 250 characters.")]
69-
[MinLength(20, ErrorMessage = "The comments field must contain at least 20 characters.")]
70-
public string? Comments { get; set; }
71-
}
72-
}
15+
</style>

‎TextArea/BlazorWebApp/BlazorWebApp.Client/Pages/Home.razor‎

Lines changed: 2 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,8 @@
11
@page "/"
22

3-
@using System.ComponentModel.DataAnnotations
4-
@using Syncfusion.Blazor.Buttons
5-
63
<div class="form-container">
7-
<EditForm Model="@annotation" OnValidSubmit="OnValidSubmit" OnInvalidSubmit="OnInvalidSubmit">
8-
<DataAnnotationsValidator></DataAnnotationsValidator>
9-
10-
<div class="form-element">
11-
<SfTextArea @bind-Value="annotation.Comments" ResizeMode="Resize.None" FloatLabelType="FloatLabelType.Always" RowCount="6" ColumnCount="40"
12-
Placeholder="Type your message.." CssClass="e-static-clear" ShowClearButton="true"></SfTextArea>
13-
<ValidationMessage For="@(() => annotation.Comments)" />
14-
</div>
15-
16-
<div class="form-element">
17-
<SfButton type="submit" IsPrimary="true">Submit</SfButton>
18-
</div>
19-
</EditForm>
20-
21-
@if (!string.IsNullOrEmpty(Message))
22-
{
23-
<p class="success-message">@Message</p>
24-
}
4+
<SfTextArea ResizeMode="Resize.None" FloatLabelType="FloatLabelType.Always" RowCount="6" ColumnCount="40"
5+
Placeholder="Type your message.." MaxLength="20"></SfTextArea>
256
</div>
267
<style>
278
/* Center the form container */
@@ -31,41 +12,5 @@
3112
align-items: center;
3213
margin-top: 5rem;
3314
}
34-
35-
/* Style for the form elements to ensure proper spacing */
36-
.form-element {
37-
margin-bottom: 1rem;
38-
}
39-
40-
/* Style for the success message */
41-
.success-message {
42-
margin-top: 1rem;
43-
color: green; /* Ensures the success message is green */
44-
}
4515
</style>
4616

47-
@code {
48-
private string Message = string.Empty;
49-
private Annotation annotation = new Annotation();
50-
51-
private async Task OnValidSubmit()
52-
{
53-
Message = "Form Submitted Successfully!";
54-
await Task.Delay(2000);
55-
Message = string.Empty;
56-
StateHasChanged();
57-
}
58-
59-
private void OnInvalidSubmit()
60-
{
61-
Message = string.Empty;
62-
}
63-
64-
public class Annotation
65-
{
66-
[Required(ErrorMessage = "The comments field is required.")]
67-
[MaxLength(250, ErrorMessage = "The comments field should not contain more than 250 characters.")]
68-
[MinLength(20, ErrorMessage = "The comments field must contain at least 20 characters.")]
69-
public string? Comments { get; set; }
70-
}
71-
}

‎TextArea/BlazorWebAssemblyApp/Pages/Index.razor‎

Lines changed: 2 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,8 @@
11
@page "/"
22

3-
@using Syncfusion.Blazor.Inputs
4-
@using System.ComponentModel.DataAnnotations
5-
@using Syncfusion.Blazor.Buttons
6-
73
<div class="form-container">
8-
<EditForm Model="@annotation" OnValidSubmit="OnValidSubmit" OnInvalidSubmit="OnInvalidSubmit">
9-
<DataAnnotationsValidator></DataAnnotationsValidator>
10-
11-
<div class="form-element">
12-
<SfTextArea @bind-Value="annotation.Comments" ResizeMode="Resize.None" FloatLabelType="FloatLabelType.Always" RowCount="6" ColumnCount="40"
13-
Placeholder="Type your message.." CssClass="e-static-clear" ShowClearButton="true"></SfTextArea>
14-
<ValidationMessage For="@(() => annotation.Comments)" />
15-
</div>
16-
17-
<div class="form-element">
18-
<SfButton type="submit" IsPrimary="true">Submit</SfButton>
19-
</div>
20-
</EditForm>
21-
22-
@if (!string.IsNullOrEmpty(Message))
23-
{
24-
<p class="success-message">@Message</p>
25-
}
4+
<SfTextArea ResizeMode="Resize.None" FloatLabelType="FloatLabelType.Always" RowCount="6" ColumnCount="40"
5+
Placeholder="Type your message.." MaxLength="20"></SfTextArea>
266
</div>
277
<style>
288
/* Center the form container */
@@ -32,41 +12,5 @@
3212
align-items: center;
3313
margin-top: 5rem;
3414
}
35-
36-
/* Style for the form elements to ensure proper spacing */
37-
.form-element {
38-
margin-bottom: 1rem;
39-
}
40-
41-
/* Style for the success message */
42-
.success-message {
43-
margin-top: 1rem;
44-
color: green; /* Ensures the success message is green */
45-
}
4615
</style>
4716

48-
@code {
49-
private string Message = string.Empty;
50-
private Annotation annotation = new Annotation();
51-
52-
private async Task OnValidSubmit()
53-
{
54-
Message = "Form Submitted Successfully!";
55-
await Task.Delay(2000);
56-
Message = string.Empty;
57-
StateHasChanged();
58-
}
59-
60-
private void OnInvalidSubmit()
61-
{
62-
Message = string.Empty;
63-
}
64-
65-
public class Annotation
66-
{
67-
[Required(ErrorMessage = "The comments field is required.")]
68-
[MaxLength(250, ErrorMessage = "The comments field should not contain more than 250 characters.")]
69-
[MinLength(20, ErrorMessage = "The comments field must contain at least 20 characters.")]
70-
public string? Comments { get; set; }
71-
}
72-
}

‎TextArea/BlazorWebAssemblyApp/_Imports.razor‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,4 @@
88
@using Microsoft.JSInterop
99
@using BlazorWebAssemblyApp
1010
@using BlazorWebAssemblyApp.Shared
11+
@using Syncfusion.Blazor.Inputs

0 commit comments

Comments
 (0)