Skip to content

Commit ffddb3c

Browse files
rajendranr-5483rajendranr-5483
authored
Merge pull request #33 from SyncfusionExamples/SF3600_TextArea
Sample(SF3600_TextArea): Added Getting started with the Blazor TextArea Component
2 parents a82aeae + b2c1249 commit ffddb3c

File tree

90 files changed

+3626
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

90 files changed

+3626
-0
lines changed

‎TextArea/BlazorServerApp/App.razor‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<Router AppAssembly="@typeof(App).Assembly">
2+
<Found Context="routeData">
3+
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
4+
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
5+
</Found>
6+
<NotFound>
7+
<PageTitle>Not found</PageTitle>
8+
<LayoutView Layout="@typeof(MainLayout)">
9+
<p role="alert">Sorry, there's nothing at this address.</p>
10+
</LayoutView>
11+
</NotFound>
12+
</Router>

‎TextArea/BlazorServerApp/BlazorServerApp.csproj‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<Project Sdk="Microsoft.NET.Sdk.Web">
2+
3+
<PropertyGroup>
4+
<TargetFramework>net7.0</TargetFramework>
5+
<Nullable>enable</Nullable>
6+
<ImplicitUsings>enable</ImplicitUsings>
7+
</PropertyGroup>
8+
9+
<ItemGroup>
10+
<PackageReference Include="Syncfusion.Blazor.Inputs" Version="26.1.41" />
11+
<PackageReference Include="Syncfusion.Blazor.Themes" Version="26.1.41" />
12+
</ItemGroup>
13+
14+
</Project>

‎TextArea/BlazorServerApp/BlazorServerApp.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.9.34723.18
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BlazorServerApp", "BlazorServerApp.csproj", "{EF0F989D-5D29-4E02-8435-10037088B987}"
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+
{EF0F989D-5D29-4E02-8435-10037088B987}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{EF0F989D-5D29-4E02-8435-10037088B987}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{EF0F989D-5D29-4E02-8435-10037088B987}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{EF0F989D-5D29-4E02-8435-10037088B987}.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 = {9D2D11A4-BFA1-4A5B-A182-2F459DF9750F}
24+
EndGlobalSection
25+
EndGlobal

‎TextArea/BlazorServerApp/Data/WeatherForecast.cs‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
namespace BlazorServerApp.Data
2+
{
3+
public class WeatherForecast
4+
{
5+
public DateOnly Date { get; set; }
6+
7+
public int TemperatureC { get; set; }
8+
9+
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
10+
11+
public string? Summary { get; set; }
12+
}
13+
}

‎TextArea/BlazorServerApp/Data/WeatherForecastService.cs‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
namespace BlazorServerApp.Data
2+
{
3+
public class WeatherForecastService
4+
{
5+
private static readonly string[] Summaries = new[]
6+
{
7+
"Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
8+
};
9+
10+
public Task<WeatherForecast[]> GetForecastAsync(DateOnly startDate)
11+
{
12+
return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast
13+
{
14+
Date = startDate.AddDays(index),
15+
TemperatureC = Random.Shared.Next(-20, 55),
16+
Summary = Summaries[Random.Shared.Next(Summaries.Length)]
17+
}).ToArray());
18+
}
19+
}
20+
}

‎TextArea/BlazorServerApp/Pages/Counter.razor‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@page "/counter"
2+
3+
<PageTitle>Counter</PageTitle>
4+
5+
<h1>Counter</h1>
6+
7+
<p role="status">Current count: @currentCount</p>
8+
9+
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
10+
11+
@code {
12+
private int currentCount = 0;
13+
14+
private void IncrementCount()
15+
{
16+
currentCount++;
17+
}
18+
}

‎TextArea/BlazorServerApp/Pages/Error.cshtml‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
@page
2+
@model BlazorServerApp.Pages.ErrorModel
3+
4+
<!DOCTYPE html>
5+
<html lang="en">
6+
7+
<head>
8+
<meta charset="utf-8" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
10+
<title>Error</title>
11+
<link href="~/css/bootstrap/bootstrap.min.css" rel="stylesheet" />
12+
<link href="~/css/site.css" rel="stylesheet" asp-append-version="true" />
13+
</head>
14+
15+
<body>
16+
<div class="main">
17+
<div class="content px-4">
18+
<h1 class="text-danger">Error.</h1>
19+
<h2 class="text-danger">An error occurred while processing your request.</h2>
20+
21+
@if (Model.ShowRequestId)
22+
{
23+
<p>
24+
<strong>Request ID:</strong> <code>@Model.RequestId</code>
25+
</p>
26+
}
27+
28+
<h3>Development Mode</h3>
29+
<p>
30+
Swapping to the <strong>Development</strong> environment displays detailed information about the error that occurred.
31+
</p>
32+
<p>
33+
<strong>The Development environment shouldn't be enabled for deployed applications.</strong>
34+
It can result in displaying sensitive information from exceptions to end users.
35+
For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
36+
and restarting the app.
37+
</p>
38+
</div>
39+
</div>
40+
</body>
41+
42+
</html>

‎TextArea/BlazorServerApp/Pages/Error.cshtml.cs‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
using Microsoft.AspNetCore.Mvc;
2+
using Microsoft.AspNetCore.Mvc.RazorPages;
3+
using System.Diagnostics;
4+
5+
namespace BlazorServerApp.Pages
6+
{
7+
[ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
8+
[IgnoreAntiforgeryToken]
9+
public class ErrorModel : PageModel
10+
{
11+
public string? RequestId { get; set; }
12+
13+
public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
14+
15+
private readonly ILogger<ErrorModel> _logger;
16+
17+
public ErrorModel(ILogger<ErrorModel> logger)
18+
{
19+
_logger = logger;
20+
}
21+
22+
public void OnGet()
23+
{
24+
RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier;
25+
}
26+
}
27+
}

‎TextArea/BlazorServerApp/Pages/FetchData.razor‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
@page "/fetchdata"
2+
@using BlazorServerApp.Data
3+
@inject WeatherForecastService ForecastService
4+
5+
<PageTitle>Weather forecast</PageTitle>
6+
7+
<h1>Weather forecast</h1>
8+
9+
<p>This component demonstrates fetching data from a service.</p>
10+
11+
@if (forecasts == null)
12+
{
13+
<p><em>Loading...</em></p>
14+
}
15+
else
16+
{
17+
<table class="table">
18+
<thead>
19+
<tr>
20+
<th>Date</th>
21+
<th>Temp. (C)</th>
22+
<th>Temp. (F)</th>
23+
<th>Summary</th>
24+
</tr>
25+
</thead>
26+
<tbody>
27+
@foreach (var forecast in forecasts)
28+
{
29+
<tr>
30+
<td>@forecast.Date.ToShortDateString()</td>
31+
<td>@forecast.TemperatureC</td>
32+
<td>@forecast.TemperatureF</td>
33+
<td>@forecast.Summary</td>
34+
</tr>
35+
}
36+
</tbody>
37+
</table>
38+
}
39+
40+
@code {
41+
private WeatherForecast[]? forecasts;
42+
43+
protected override async Task OnInitializedAsync()
44+
{
45+
forecasts = await ForecastService.GetForecastAsync(DateOnly.FromDateTime(DateTime.Now));
46+
}
47+
}

‎TextArea/BlazorServerApp/Pages/Index.razor‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
@page "/"
2+
3+
@using Syncfusion.Blazor.Inputs
4+
@using System.ComponentModel.DataAnnotations
5+
@using Syncfusion.Blazor.Buttons
6+
7+
<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+
}
26+
</div>
27+
<style>
28+
/* Center the form container */
29+
.form-container {
30+
display: flex;
31+
flex-direction: column;
32+
align-items: center;
33+
margin-top: 5rem;
34+
}
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+
}

0 commit comments

Comments
 (0)