diff --git a/.idea/.idea.BlazorApp/.idea/git_toolbox_prj.xml b/.idea/.idea.BlazorApp/.idea/git_toolbox_prj.xml new file mode 100644 index 0000000..02b915b --- /dev/null +++ b/.idea/.idea.BlazorApp/.idea/git_toolbox_prj.xml @@ -0,0 +1,15 @@ + + + + + + + \ No newline at end of file diff --git a/.idea/.idea.BlazorApp/.idea/inspectionProfiles/Project_Default.xml b/.idea/.idea.BlazorApp/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..198f37d --- /dev/null +++ b/.idea/.idea.BlazorApp/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,21 @@ + + + + \ No newline at end of file diff --git a/BlazorApp.sln.DotSettings.user b/BlazorApp.sln.DotSettings.user index ef6ba05..6b0943b 100644 --- a/BlazorApp.sln.DotSettings.user +++ b/BlazorApp.sln.DotSettings.user @@ -1,3 +1,5 @@  + ForceIncluded ForceIncluded - ForceIncluded \ No newline at end of file + ForceIncluded + ForceIncluded \ No newline at end of file diff --git a/BlazorApp/BlazorApp.csproj b/BlazorApp/BlazorApp.csproj index f516d3e..2dd14a9 100644 --- a/BlazorApp/BlazorApp.csproj +++ b/BlazorApp/BlazorApp.csproj @@ -14,4 +14,10 @@ + + + Validation.razor + + + diff --git a/BlazorApp/Components/Layout/NavMenu.razor b/BlazorApp/Components/Layout/NavMenu.razor index c13f211..b8b9b9d 100644 --- a/BlazorApp/Components/Layout/NavMenu.razor +++ b/BlazorApp/Components/Layout/NavMenu.razor @@ -31,5 +31,11 @@ Todo + + \ No newline at end of file diff --git a/BlazorApp/Components/Pages/ValidationPage/LoginModel.cs b/BlazorApp/Components/Pages/ValidationPage/LoginModel.cs new file mode 100644 index 0000000..2a0b529 --- /dev/null +++ b/BlazorApp/Components/Pages/ValidationPage/LoginModel.cs @@ -0,0 +1,17 @@ +using System.ComponentModel.DataAnnotations; + +namespace BlazorApp.Components.Pages.ValidationPage; + +public class LoginModel +{ + [Required(ErrorMessage = "ID는 필수 입력사항입니다.")] + public string Id {get; set;} + + [Required(ErrorMessage = "비밀번호는 필수 입력사항입니다.")] + public string Pw {get; set;} + + [Required(ErrorMessage = "이메일 설정은 필수 입력사항입니다.")] + [EmailAddress(ErrorMessage = "이메일 설정이 올바르지 않습니다.")] + public string Email {get; set;} + +} \ No newline at end of file diff --git a/BlazorApp/Components/Pages/ValidationPage/Validation.razor b/BlazorApp/Components/Pages/ValidationPage/Validation.razor new file mode 100644 index 0000000..afa3a30 --- /dev/null +++ b/BlazorApp/Components/Pages/ValidationPage/Validation.razor @@ -0,0 +1,55 @@ +@page "/validation" +@rendermode InteractiveServer + +

Validation

+ + + @* *@ + +
+ + + @if (isIdValid) + { +

Username is valid!

+ } + else + { + + } +
+ +
+ + + + @if (isPwValid) + { +

pass is valid!

+ } + else + { + + } +
+ +
+ + + + @if (isEmailValid) + { +

Email is valid!

+ } + else + { + + } + +
+ +
+ +
+
+
\ No newline at end of file diff --git a/BlazorApp/Components/Pages/ValidationPage/Validation.razor.cs b/BlazorApp/Components/Pages/ValidationPage/Validation.razor.cs new file mode 100644 index 0000000..a6f1c19 --- /dev/null +++ b/BlazorApp/Components/Pages/ValidationPage/Validation.razor.cs @@ -0,0 +1,50 @@ +using System.ComponentModel.DataAnnotations; +using BlazorApp.Components.Pages.ValidationPage; +using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Forms; + +namespace BlazorApp.Components.Pages.ValidationPage; + +public partial class Validation : ComponentBase +{ + private LoginModel login = new LoginModel(); + private EditContext editContext; + private bool isIdValid = false; + private bool isPwValid = false; + private bool isEmailValid = false; + + protected override void OnInitialized() + { + Console.WriteLine("Oninitialized"); + editContext = new EditContext(login); + Console.WriteLine(isPwValid); + // editContext.OnFieldChanged += HandleFieldChanged; + } + + private void HandlerInputChange() + { + Console.WriteLine("HandlerInputChange"); + + // 유효성 검사가 발생했다? = true + tryCheckValidate(); + StateHasChanged(); + } + + private void tryCheckValidate() + { + editContext.Validate(); + Console.WriteLine($"{isIdValid}, {isPwValid}, {isEmailValid}"); + Console.WriteLine(editContext.GetValidationMessages(() => login.Id).Any()); + Console.WriteLine(editContext.GetValidationMessages(() => login.Pw).Any()); + Console.WriteLine(editContext.GetValidationMessages(() => login.Email).Any()); + + isIdValid = !editContext.GetValidationMessages(() => login.Id).Any(); + isPwValid = !editContext.GetValidationMessages(() => login.Pw).Any(); + isEmailValid = !editContext.GetValidationMessages(() => login.Email).Any(); + } + private void HandleValidSubmit() + { + // 유효성 검사에 성공했을 때의 처리 + Console.WriteLine("Form submitted successfully"); + } +} \ No newline at end of file diff --git a/BlazorApp/Components/Pages/ValidationPage/Validation.razor.css b/BlazorApp/Components/Pages/ValidationPage/Validation.razor.css new file mode 100644 index 0000000..139b01e --- /dev/null +++ b/BlazorApp/Components/Pages/ValidationPage/Validation.razor.css @@ -0,0 +1,34 @@ + +.form-group { + display: flex; + flex-direction: row; + align-items: center; + margin-bottom: 10px; +} + + +.form-group label { + width: 100px; + text-align: right; + margin-right: 10px; + padding-right: 4px; +} + +.form-group input { + flex: 1; + width: 500px; +} + +.form-actions { + display: flex; + justify-content: center; + margin-top: 10px; +} + +.success-message { + color: blue; + font-weight: bold; + /*text-align: left;*/ + height: 100%; + margin-left: 10px; +} \ No newline at end of file diff --git a/BlazorApp/bin/Debug/net8.0/BlazorApp.dll b/BlazorApp/bin/Debug/net8.0/BlazorApp.dll index 8b9cb2b..7510867 100644 Binary files a/BlazorApp/bin/Debug/net8.0/BlazorApp.dll and b/BlazorApp/bin/Debug/net8.0/BlazorApp.dll differ diff --git a/BlazorApp/bin/Debug/net8.0/BlazorApp.pdb b/BlazorApp/bin/Debug/net8.0/BlazorApp.pdb index cd4f35c..9529a3a 100644 Binary files a/BlazorApp/bin/Debug/net8.0/BlazorApp.pdb and b/BlazorApp/bin/Debug/net8.0/BlazorApp.pdb differ diff --git a/BlazorApp/obj/Debug/net8.0/BlazorApp.AssemblyInfo.cs b/BlazorApp/obj/Debug/net8.0/BlazorApp.AssemblyInfo.cs index c7cd30c..98e8eac 100644 --- a/BlazorApp/obj/Debug/net8.0/BlazorApp.AssemblyInfo.cs +++ b/BlazorApp/obj/Debug/net8.0/BlazorApp.AssemblyInfo.cs @@ -13,7 +13,7 @@ using System.Reflection; [assembly: System.Reflection.AssemblyCompanyAttribute("BlazorApp")] [assembly: System.Reflection.AssemblyConfigurationAttribute("Debug")] [assembly: System.Reflection.AssemblyFileVersionAttribute("1.0.0.0")] -[assembly: System.Reflection.AssemblyInformationalVersionAttribute("1.0.0+e554ba22b3f3cdd8bd0ce3cb5c93355b57e25261")] +[assembly: System.Reflection.AssemblyInformationalVersionAttribute("1.0.0+4781a17b00b8e21414f02e947102acf72c5c6178")] [assembly: System.Reflection.AssemblyProductAttribute("BlazorApp")] [assembly: System.Reflection.AssemblyTitleAttribute("BlazorApp")] [assembly: System.Reflection.AssemblyVersionAttribute("1.0.0.0")] diff --git a/BlazorApp/obj/Debug/net8.0/BlazorApp.AssemblyInfoInputs.cache b/BlazorApp/obj/Debug/net8.0/BlazorApp.AssemblyInfoInputs.cache index 7b0d58f..f3f48c1 100644 --- a/BlazorApp/obj/Debug/net8.0/BlazorApp.AssemblyInfoInputs.cache +++ b/BlazorApp/obj/Debug/net8.0/BlazorApp.AssemblyInfoInputs.cache @@ -1 +1 @@ -0d413a05c0600afacbfef2252958fa268ae4252fd91bc9042018004bdc1236f9 +d6262563cb144b1b24689bcb852f66331e78b742afea34cc7526f77806d8fefb diff --git a/BlazorApp/obj/Debug/net8.0/BlazorApp.GeneratedMSBuildEditorConfig.editorconfig b/BlazorApp/obj/Debug/net8.0/BlazorApp.GeneratedMSBuildEditorConfig.editorconfig index b7578b6..c779905 100644 --- a/BlazorApp/obj/Debug/net8.0/BlazorApp.GeneratedMSBuildEditorConfig.editorconfig +++ b/BlazorApp/obj/Debug/net8.0/BlazorApp.GeneratedMSBuildEditorConfig.editorconfig @@ -57,3 +57,7 @@ build_metadata.AdditionalFiles.CssScope = b-zswk0q6kaa [/Users/seankim/1.Program/Project(ASP)/BlazorApp/BlazorApp/Components/Pages/TodoPage/Todo.razor] build_metadata.AdditionalFiles.TargetPath = Q29tcG9uZW50cy9QYWdlcy9Ub2RvUGFnZS9Ub2RvLnJhem9y build_metadata.AdditionalFiles.CssScope = b-n64y2ur3f8 + +[/Users/seankim/1.Program/Project(ASP)/BlazorApp/BlazorApp/Components/Pages/ValidationPage/Validation.razor] +build_metadata.AdditionalFiles.TargetPath = Q29tcG9uZW50cy9QYWdlcy9WYWxpZGF0aW9uUGFnZS9WYWxpZGF0aW9uLnJhem9y +build_metadata.AdditionalFiles.CssScope = b-z8q1q1jnjv diff --git a/BlazorApp/obj/Debug/net8.0/BlazorApp.csproj.CoreCompileInputs.cache b/BlazorApp/obj/Debug/net8.0/BlazorApp.csproj.CoreCompileInputs.cache index 20c7532..eec5051 100644 --- a/BlazorApp/obj/Debug/net8.0/BlazorApp.csproj.CoreCompileInputs.cache +++ b/BlazorApp/obj/Debug/net8.0/BlazorApp.csproj.CoreCompileInputs.cache @@ -1 +1 @@ -3607e99c4bc36a4bae6dfb6e1b940004d67160fc7f174a874004b6f7cde31fdd +50edfd86d0e1da31fa31883ae82e1f3520bbce7f4aabb52fd74698655be3fe0f diff --git a/BlazorApp/obj/Debug/net8.0/BlazorApp.csproj.FileListAbsolute.txt b/BlazorApp/obj/Debug/net8.0/BlazorApp.csproj.FileListAbsolute.txt index d95cdf3..b488e7c 100644 --- a/BlazorApp/obj/Debug/net8.0/BlazorApp.csproj.FileListAbsolute.txt +++ b/BlazorApp/obj/Debug/net8.0/BlazorApp.csproj.FileListAbsolute.txt @@ -32,3 +32,4 @@ /Users/seankim/1.Program/Project(ASP)/BlazorApp/BlazorApp/obj/Debug/net8.0/BlazorApp.genruntimeconfig.cache /Users/seankim/1.Program/Project(ASP)/BlazorApp/BlazorApp/obj/Debug/net8.0/ref/BlazorApp.dll /Users/seankim/1.Program/Project(ASP)/BlazorApp/BlazorApp/obj/Debug/net8.0/scopedcss/Components/Pages/TodoPage/Todo.razor.rz.scp.css +/Users/seankim/1.Program/Project(ASP)/BlazorApp/BlazorApp/obj/Debug/net8.0/scopedcss/Components/Pages/ValidationPage/Validation.razor.rz.scp.css diff --git a/BlazorApp/obj/Debug/net8.0/BlazorApp.dll b/BlazorApp/obj/Debug/net8.0/BlazorApp.dll index 8b9cb2b..7510867 100644 Binary files a/BlazorApp/obj/Debug/net8.0/BlazorApp.dll and b/BlazorApp/obj/Debug/net8.0/BlazorApp.dll differ diff --git a/BlazorApp/obj/Debug/net8.0/BlazorApp.pdb b/BlazorApp/obj/Debug/net8.0/BlazorApp.pdb index cd4f35c..9529a3a 100644 Binary files a/BlazorApp/obj/Debug/net8.0/BlazorApp.pdb and b/BlazorApp/obj/Debug/net8.0/BlazorApp.pdb differ diff --git a/BlazorApp/obj/Debug/net8.0/ref/BlazorApp.dll b/BlazorApp/obj/Debug/net8.0/ref/BlazorApp.dll index 5bf0834..ba887f5 100644 Binary files a/BlazorApp/obj/Debug/net8.0/ref/BlazorApp.dll and b/BlazorApp/obj/Debug/net8.0/ref/BlazorApp.dll differ diff --git a/BlazorApp/obj/Debug/net8.0/refint/BlazorApp.dll b/BlazorApp/obj/Debug/net8.0/refint/BlazorApp.dll index 5bf0834..ba887f5 100644 Binary files a/BlazorApp/obj/Debug/net8.0/refint/BlazorApp.dll and b/BlazorApp/obj/Debug/net8.0/refint/BlazorApp.dll differ diff --git a/BlazorApp/obj/Debug/net8.0/scopedcss/Components/Pages/ValidationPage/Validation.razor.rz.scp.css b/BlazorApp/obj/Debug/net8.0/scopedcss/Components/Pages/ValidationPage/Validation.razor.rz.scp.css new file mode 100644 index 0000000..307d81a --- /dev/null +++ b/BlazorApp/obj/Debug/net8.0/scopedcss/Components/Pages/ValidationPage/Validation.razor.rz.scp.css @@ -0,0 +1,34 @@ + +.form-group[b-z8q1q1jnjv] { + display: flex; + flex-direction: row; + align-items: center; + margin-bottom: 10px; +} + + +.form-group label[b-z8q1q1jnjv] { + width: 100px; + text-align: right; + margin-right: 10px; + padding-right: 4px; +} + +.form-group input[b-z8q1q1jnjv] { + flex: 1; + width: 500px; +} + +.form-actions[b-z8q1q1jnjv] { + display: flex; + justify-content: center; + margin-top: 10px; +} + +.success-message[b-z8q1q1jnjv] { + color: blue; + font-weight: bold; + /*text-align: left;*/ + height: 100%; + margin-left: 10px; +} \ No newline at end of file diff --git a/BlazorApp/obj/Debug/net8.0/scopedcss/bundle/BlazorApp.styles.css b/BlazorApp/obj/Debug/net8.0/scopedcss/bundle/BlazorApp.styles.css index cadc8a5..1538da2 100644 --- a/BlazorApp/obj/Debug/net8.0/scopedcss/bundle/BlazorApp.styles.css +++ b/BlazorApp/obj/Debug/net8.0/scopedcss/bundle/BlazorApp.styles.css @@ -208,7 +208,6 @@ main[b-fekawvbbds] { } /* _content/BlazorApp/Components/Pages/TodoPage/Todo.razor.rz.scp.css */ -/* todo 용 CSS */ .list-item[b-n64y2ur3f8] { display: flex; align-items: center; @@ -258,3 +257,38 @@ main[b-fekawvbbds] { .small-button:active[b-n64y2ur3f8] { background-color: #dddddd; } +/* _content/BlazorApp/Components/Pages/ValidationPage/Validation.razor.rz.scp.css */ + +.form-group[b-z8q1q1jnjv] { + display: flex; + flex-direction: row; + align-items: center; + margin-bottom: 10px; +} + + +.form-group label[b-z8q1q1jnjv] { + width: 100px; + text-align: right; + margin-right: 10px; + padding-right: 4px; +} + +.form-group input[b-z8q1q1jnjv] { + flex: 1; + width: 500px; +} + +.form-actions[b-z8q1q1jnjv] { + display: flex; + justify-content: center; + margin-top: 10px; +} + +.success-message[b-z8q1q1jnjv] { + color: blue; + font-weight: bold; + /*text-align: left;*/ + height: 100%; + margin-left: 10px; +} diff --git a/BlazorApp/obj/Debug/net8.0/scopedcss/projectbundle/BlazorApp.bundle.scp.css b/BlazorApp/obj/Debug/net8.0/scopedcss/projectbundle/BlazorApp.bundle.scp.css index cadc8a5..1538da2 100644 --- a/BlazorApp/obj/Debug/net8.0/scopedcss/projectbundle/BlazorApp.bundle.scp.css +++ b/BlazorApp/obj/Debug/net8.0/scopedcss/projectbundle/BlazorApp.bundle.scp.css @@ -208,7 +208,6 @@ main[b-fekawvbbds] { } /* _content/BlazorApp/Components/Pages/TodoPage/Todo.razor.rz.scp.css */ -/* todo 용 CSS */ .list-item[b-n64y2ur3f8] { display: flex; align-items: center; @@ -258,3 +257,38 @@ main[b-fekawvbbds] { .small-button:active[b-n64y2ur3f8] { background-color: #dddddd; } +/* _content/BlazorApp/Components/Pages/ValidationPage/Validation.razor.rz.scp.css */ + +.form-group[b-z8q1q1jnjv] { + display: flex; + flex-direction: row; + align-items: center; + margin-bottom: 10px; +} + + +.form-group label[b-z8q1q1jnjv] { + width: 100px; + text-align: right; + margin-right: 10px; + padding-right: 4px; +} + +.form-group input[b-z8q1q1jnjv] { + flex: 1; + width: 500px; +} + +.form-actions[b-z8q1q1jnjv] { + display: flex; + justify-content: center; + margin-top: 10px; +} + +.success-message[b-z8q1q1jnjv] { + color: blue; + font-weight: bold; + /*text-align: left;*/ + height: 100%; + margin-left: 10px; +} diff --git a/BlazorApp/ㅎNETCORE 학습/AspnetCore.md b/BlazorApp/ㅎNETCORE 학습/AspnetCore.md index 2305f4f..983215b 100644 --- a/BlazorApp/ㅎNETCORE 학습/AspnetCore.md +++ b/BlazorApp/ㅎNETCORE 학습/AspnetCore.md @@ -210,7 +210,7 @@ public class TodoItem • 목표: Blazor의 기본적인 컴포넌트 구조와 데이터 바인딩을 학습 • 포인트: • 컴포넌트 생성 및 렌더링 - • 데이터 바인딩 (@bind) + • 데이터 바인딩 (bind) • 이벤트 핸들링 • 설명: 사용자가 할 일을 입력하고, 목록에서 완료된 할 일을 삭제하는 간단한 애플리케이션 diff --git a/BlazorApp/ㅎNETCORE 학습/추가적으로 알게 되는 내용.md b/BlazorApp/ㅎNETCORE 학습/추가적으로 알게 되는 내용.md new file mode 100644 index 0000000..06b4668 --- /dev/null +++ b/BlazorApp/ㅎNETCORE 학습/추가적으로 알게 되는 내용.md @@ -0,0 +1,26 @@ +# 지식 +## 1. 코드 비하인드 패턴 +- .razor 파일과 .cs 파일을 분리해서 사용하는 방식 +- A.razor
+ ├ A.razor.cs
+ ⎿ A.razor.css +### 역할 +1. .razor 파일 : 주로 UI 마크업을 포함 +2. .cs 파일 : 관련 로직을 포함 - @code 블록을 대신해 서로 연결 됨 + +## 2. EditForm +- Blazor 제공하는 Form Compornents. +- 데이터 바인딩, 유효성 검사, 폼 제출 처리에 사용 +- 사용자 입력 수집하고, 입력 데이터 검증 후 서버나 클라이언트 제출하는 기능 제공 +### 1. InputText +- @bind-Value 로 변수와 엮어주기 +
+<선택사항> +- @oninput 은 입력시 수행할 이벤트 엮어주기 +- @onblur 는 포커스 해제시 수행할 이벤트 엮어주기 + +## 3. Attribute +- 변수나 클래스, 메서드 위에 [ ]를 사용해 속성을 추가 +- 코드에서 어떤 동작이나 정보를 제공하거나, 특정 조건에 따라 처리되는 방식을 지정할 수 있다. +- 이미 존재하는(Required, Range, Obsolte, 등) 속성들도 있지만, 사용자가 직접 정의해서 사용할 수 있다. +- 2의 EditForm과 엮으면 좋음 \ No newline at end of file