state management

BlazorApp/BlazorServerApp/Data/WeatherForecast.cs

@@ -1,13 +1,19 @@
+using System.ComponentModel.DataAnnotations;
+
 namespace BlazorServerApp.Data
 {
     public class WeatherForecast
     {
         public DateTime Date { get; set; }
 
+        [Required(ErrorMessage = "Need TemperatureC")]
+        [Range(typeof(int), "-100", "100")]
         public int TemperatureC { get; set; }
 
         public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
 
+        [Required(ErrorMessage = "Need Summary")]
+        [StringLength(10, MinimumLength = 2, ErrorMessage = "2~10")]
         public string? Summary { get; set; }
     }
 }

BlazorApp/BlazorServerApp/Data/WeatherForecastService.cs

@@ -7,14 +7,14 @@ namespace BlazorServerApp.Data
         "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
     };
 
-        public Task<WeatherForecast[]> GetForecastAsync(DateTime startDate)
+        public Task<List<WeatherForecast>> GetForecastAsync(DateTime startDate)
         {
             return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast
             {
                 Date = startDate.AddDays(index),
                 TemperatureC = Random.Shared.Next(-20, 55),
                 Summary = Summaries[Random.Shared.Next(Summaries.Length)]
-            }).ToArray());
+            }).ToList());
         }
     }
 }

BlazorApp/BlazorServerApp/Pages/FetchData.razor

@@ -9,7 +9,7 @@
 
 <p>This component demonstrates fetching data from a service.</p>
 
-@if (forecasts == null)
+@if (_forecasts == null)
 {
     <p><em>Loading...</em></p>
 }
@@ -25,7 +25,7 @@ else
             </tr>
         </thead>
         <tbody>
-            @foreach (var forecast in forecasts)
+            @foreach (var forecast in _forecasts)
             {
                 <tr>
                     <td>@forecast.Date.ToShortDateString()</td>
@@ -36,13 +36,74 @@ else
             }
         </tbody>
     </table>
+
+    <button class="btn btn-primary" @onclick="AddNewForecast">
+        Add New Forecast
+    </button>
+
+    if (_showPopup)
+    {
+        <div class="modal" style="display:block" role="dialog">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h3 class="modal-title">Add Forecast</h3>
+                        <button type="button" class="btn-close" @onclick="ClosePopup"/>
+                    </div>
+                    <div class="modal-body">
+                        <EditForm Model="_addForecast" OnValidSubmit="SaveForecast">
+                            @* Validation 기능 on *@
+                            <DataAnnotationsValidator/>
+                            @* 에러 메세지 출력 기능 on *@
+                            <ValidationSummary/>
+
+                            <label for="TemperatureC">Temperacure(℃)</label>
+                            <InputNumber class="form-control" placeholder="Temperacure(℃)" @bind-Value="_addForecast.TemperatureC" />
+                            <label for="Summary">Summary</label>
+                            <InputText class="form-control" placeholder="Summary" @bind-Value="_addForecast.Summary" />
+                            <br />
+                            <button class="btn btn-primary" type="submit">Save</button>
+                        </EditForm>
+
+                        @* <label for="TemperatureC">Temperacure(℃)</label>
+                        <input class="form-control" type="text" placeholder="Temperacure(℃)" @bind="_addForecast.TemperatureC"/>
+                        <label for="Summary">Summary</label>
+                        <input class="form-control" type="text" placeholder="Summary" @bind="_addForecast.Summary" />
+                        <br/>
+                        <button class="btn btn-primary" @onclick="SaveForecast">Save</button> *@
+                    </div>
+                </div>
+            </div>
+        </div>
+    }
 }
 
 @code {
-    private WeatherForecast[]? forecasts;
+    private List<WeatherForecast>? _forecasts;
+
+    private bool _showPopup = false;
+    private WeatherForecast _addForecast;
 
     protected override async Task OnInitializedAsync()
     {
-        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
+        _forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
+    }
+
+    private void AddNewForecast()
+    {
+        _showPopup = true;
+        _addForecast = new WeatherForecast();
+    }
+
+    private void ClosePopup()
+    {
+        _showPopup = false;
+    }
+
+    private void SaveForecast()
+    {
+        _addForecast.Date = DateTime.Now;
+        _forecasts.Add(_addForecast);
+        _showPopup = false;
     }
 }

BlazorApp/BlazorServerApp/Pages/_Imports.razor

@@ -1 +1 @@
-@layout MainLayout2
+@layout MainLayout