29장 태그 헬퍼

      29장 태그 헬퍼에 댓글 없음

29. 태그 헬퍼

  • C# 코드 형식의 헬퍼 메서드 방식
  • HTML 친화적인 태그 헬퍼 방식
     

접두사 asp- 로 시작하는 어트리뷰트를 추가하는 방법으로 사용되어 진다.
Html에서 간단하게 어트리뷰트를 추가하여 커스터마이징하기 쉽고, 기존 태그 형식을 사용해 HTML 에디터에서 원활하게 작업할 수 있다.

ASP.NET Core에서 가장 중요하다.

29.1. 내장된 태그 헬퍼

Razor 뷰 페이지에 태그 헬퍼를 추가하려면 addTagHelper 키워드를 사용한다.
일반적으로 Views 폴더의 _ViewImports.cshtml 파일에서 관리한다.

내장된 태그 헬퍼의 주요 리스트

  • 링크 태그 헬퍼  : <a asp-action=”Index” asp-controller=”Home”>Home</a>
  • 폼 태그 헬퍼   : <form asp-action=”Create” asp-controller=”Board”></form>
  • 레이블 태그 헬퍼 : <label asp-for=”Name”></label>
  • TextArea 태그 헬퍼 : <textarea asp-for=”Content”></textarea>
  • Select 태그 헬퍼 : <select asp-for=”Encoding” asp-items=”EncodingLists”></select>
  • 유효성 검사 태그 헬퍼 : <span asp-validation-for=”Title”></span>
  • Enviroment 태그 헬퍼 : 개발 환경과 배포 환경에 따라 다른 기능 구현
  • Cache 태그 헬퍼  : 특정 시점까지 캐싱 기능을 적용 : <cache vary-by-user=”true”></cache>
  • 그 외 유용한 태그 헬퍼
    • Link 태그 헬퍼 : css 폴더의 모든 css 파일을 읽어서 한번에 link 태그로 만들어 준다.
      : <link asp-href-include=”~/css/*.css” rel=”stylesheet” />

 

28장 폼 유효성 검사와 모델 바인딩

      28장 폼 유효성 검사와 모델 바인딩에 댓글 없음

28.1. 폼 유효성 검사

다양한 입력값 Validation 방법

  • 순수 HTML 및 자바스크립트 사용
  • 태그 헬퍼 사용
  • System.ComponentModel.DataAnnotations 네임스페이스를 사용하여 모델 차원에서 유효성 검사를 지원한다.

28.2. 모델 메타데이터

자주 사용되는 모델 메타데이터

  • Required – 필수 입력요소, SQL 제약 조건의 NOT NULL
  • StringLength – 문자열의 길이제한
  • Display – 레이블 등에 표시할 텍스트
  • DataType – 암호 또는 이메일 형식을 지정
  • MinLength – 문자열 최소길이 지정
  • MaxLengh – 문자열 최대기이 지정
  • RegularExpression – 정규식을 사용해 제약 조건 부여
  • Range – 범위 지정
  • Compare – 특정값과 비교, 암호 확인 용도로 주로 사용

28.3. 강력한 형식의 뷰

@model 키워드를 사용하여 해당 뷰에서 사용할 모델 클래스를 지정한다.

28.4. 모델 바인딩

HttpPost로 전송된 데이터를 C#의 모델 클래스에 담아서 액션 메서드에 전달하는 기법.
폼 컬렉션과 쿼리 스트링을 분석해서 액션 메서드의 매개 변수에 매핑해주는 기능을 제공한다.

28.4.1. ModelState.IsValid 속성

HttpPost로 전송된 데이터가 모델에서 제시한 유효성 검사를 통과했는지 안했는지를 판단하는 속성. (서버측 유효성 검사)

28.5. 실습

모델 바인딩 : 각각의 매개 변수를 그와 이름이 같은 모델 클래스의 속성으로 자동으로 연결해 주는 기능

@Html.TextBoxFor() 헬퍼 메서드에 의해 data-val-required 처럼 data-로 시작하는 커스텀 속성이 추가된다. 이러한 속성은 클라이언트 기반 유효성 검사를 진행할 때 유용하다.

27장 헬퍼 메서드

      27장 헬퍼 메서드에 댓글 없음

27.1. 헬퍼 메서드

헬퍼 메서드를 호출하는 Html 개체는 폼, 링크, 입력 요소 등을 생성한다.
ASP.NET Core에서는 태그 헬퍼를 주력으로 사용한다.

27.2. 헬퍼 메서드의 종류

Form, Input, Label, Link, Select, TextArea, Validation

27.2.1. @Html.ActionLink()

27.2.2. @Html.BeginForm()

변경된 URL에 맞게 속성이 재지정된다 (???)

27.2.3. @Url.Action() :

27.2.4. 입력 요소 생성

Html.TextBox, Html.Password, Html.RadioButton, Html.CheckBox, Html.Hidden, Html.TextArea, Html.DropDownList, Html.ListBox

27.2.5. 데이터 표시

  • DisplayNameFor() : 모델 클래스에 지정된 DisplayNameAttribute와 DisplayAttribute.Name 속성의 영향을 받는다.
  • Label(), LabelFor() : <label />을 생성할 때 사용한다.

27.2.6. 유효성 검사(Validation)

  • ValidationMessageFor() : 특정 텍스트박스 다음에 에러 메세지 출력
  • ValidationSummary() : 모든 에러 메시지를 한곳에 모아서 출력

27.2.7. HtmlRaw()

HTML 코드를 인코딩하지 않은 원본 상태로 출력. 자바스크립트 코드를 출력할때 유용

27.2.8. 기타 헬퍼 메서드

  • Html.Encode() : 문자열을 인코딩해새서 출력.
  • Html.Partial() : 특정 부분 페이지를 출력한다.
     

27.3. 헬퍼 메서드로 CSS class와 같은 특정 속성 부여하기

27.4. 실습

헬퍼메서드를 알고만 있어라, 이후부터는 태그 헬퍼를 사용할 것이다.

– 참고자료

Loader Loading...
EAD Logo Taking too long?

Reload Reload document
| Open Open in new tab

Download [458.92 KB]

– ASP.NET Korea Study Group, 안지오

26장 모델, 뷰, 컨트롤러

      26장 모델, 뷰, 컨트롤러에 댓글 없음

26.1. MVC 패턴

  • Controller  : 로직처리
  • View   : 사용자 인터페이스
  • Model   : 데이터

26.2. 컨트롤러 클래스

Action 메서드를 구현하는 클래스.
요청 처리, 사용자 입력 처리, 로직수행

26.3. 액션 메서드

컨트롤러에서 뷰를 호출하거나 데이터를 전달하는 메서드
ViewData, ViewGag 개체를 View 페이지에 전달할 수 있다.

26.4. 실습

별거없음

26.5. 액션 반환값

주요 액션 반환값

  • View()   – 액션 메서드에 해당하는 뷰 페이지 실행. 액션 메서드 이름 = 뷰 페이지 이름
  • RedirectToAction(URL) – 특정 액션 메서드 실행(이동).
    RedirectToAction(“Index”, “Home”);
  • Content(“문자열”) – 특정 문자열 반환
  • ContentResult()  – HTML을 직접 반환
    return new ContentResult() { Content = html, ContentType = “text/heml;charset=utf-8” };

26.6. 실습

별거없음

26.6.4. Redirect로 시작하는 액션 메서드 반환값

액션 메서드를 실행하고 나서 새로운  액션 메서드 또는 URL로 이동하고자 할 때는 Redirect로 시작하는 액션 반환값을 사용한다.

26.7. 뷰페이지

26.7.1. 컨트롤러와 뷰에 대한 규칙

각각의 컨트롤러와 같은 이름의 서브폴더를 생성하고, 각각의 액션 메서드와 같은 이름의 cshtml 뷰페이지를 생성해야 한다.
공통 페이지는 Shared 폴더에 위치한다.

26.8. 레이저 표현식

26.8.2. 링크 경로 해결:

26.9. 실습

별거없음

26.10. MVC 프레임워크에서의 레이아웃

레이아웃은 Views/Shared 폴더에 _Layout.cshtml 파일로 존재

26.10.1. _Layout.cshtml

각 페이지의 제목은 각각의 페이지의 ViewBag.Title 속성을 사용한다.
Layout 프로퍼티를 통하여 각각의 페이지의 레이아웃을 지정할 수 있다.

26.10.2. <enviroment /> 태그 헬퍼

특정 CSS 또는 JS 파일에 대한 링크를 Dev, Staging, Prod 환경의 세가지 상태에 맞게 적용하고자 할 때 사용한다.

26.10.3. RenderBody() 메서드와 RenderSection(name, required) 메서드

  • RenderBody() : 각각의 뷰 내용이 표시됨
  • RenderSection(name, required) : Scripts, Banners, Sidebars 등 특정한 섹션을 추가할 수 있다.

26.10.4. _ViewStart.cshtml

모든 뷰가 렌더링 되기전에 제일 먼저 호출되는 페이지
_ViewStart.cshtml 파일은 Views폴더에 위치
공통 레이아웃은 반드시 이곳에 정의한다.

26.10.5. _ViewImports.cshtml

네임스페이스 공통사용시 정의
@addTagHelper <- 이건 뭐지??

26.10.6. 부분 뷰

Partial view
페이지에 표시하고자 할때는 Html.Partial() 메서드 사용
Html.PartialAsync() 비동기로 표시?

26.11. 모델 클래스

DTO (Data Transfer Object), Entity, Business Object, Domain Model, View Model, Presentation Model

26.11.1. 모델 작성 시 제약 조건 설정

모델 작성시 Attribute 를 사용하여 옵션을 줄 수 있다.
DataType, Display, Validation(Required, StringLength, RegularExpression, Compare, 등)

26.12. 뷰에 데이터 전송 방법

Model, ViewBag(ViewData), TempData

26.12.1. ViewBag과 ViewData

액션메서드를 이용하여 간단한 정보를 View에 전달할때 사용

26.12.2. 모델 개체 사용

모델 데이터를 View에 전달. 강력한 형식(Strongly Typed)의 뷰 페이지가 된다.

26.12.3. TempData

다음번 TempData를 요청하기 전까지 유효한 임시 저장소
Session 기반으로 동작하며, Microsoft.AspNetCore.SessionMicrosoft.Framework.Caching.Memory 의 참조가 필요하다.

26.13. 실습

View에서 @model 키워드를 사용하여 강력한 형식의 뷰를 만든다.

26.14. 실습

액션메서드에서 [HttpGet], [HttpPost] 어트리뷰트를 이용하여 Form 관련 실습

26.15. 실습

별거없음. 전체 실습

 

– 참고자료

Loader Loading...
EAD Logo Taking too long?

Reload Reload document
| Open Open in new tab

Download [535.60 KB]

– ASP.NET Korea Study Group, 안지오

25장 ASP.NET Core 1.0 MVC 프레임워크

      25장 ASP.NET Core 1.0 MVC 프레임워크에 댓글 없음

25.1. ASP.NET Core MVC

ASP.NET Core 웹 응용 프로그램 템플릿으로 프로젝트를 생성하면 MVC를 사용하는데 필요한 모든 구성요소가 갖추어져있다.
Empty 템플릿으로 프로젝트를 생성한 경우, NuGet 을 이용하여 Microsoft.AspNetCore.Mvc 패키지를 추가하면 된다.
그 이후 Startup.cs파일에 AddMvc()메서드와 UseMvc() 메서드를 호출하고, UseMvc() 메서드에서 라우팅 경로를 설정하면 모든 준비가 끝난다.

25.2. 라우팅

  • WebForm – 디스크상의 파일
  • MVC – 컨트롤러 액션(Controller Action)
경로 컨트롤러 클래스 액션(Action) 메서드 id 매개변수
http://asp.net/Home Home Index
http://asp.net/Home/Index Home Index
http://asp.net/Home/About Home About
http://asp.net/Note/Details/12345 Note Details 12345

[기본적인 URL 라우팅]

25.4. 실습

@inject 지시문은 DataFinder 클래스를 직접 컨트롤러에서 호출해서 뷰 페이지로 전달하는 게 아니라
뷰 페이지에 직접 주입해서 사용할 수 있게 하는 의존성 주입 방식이다.
이 코드를 사용하려면 DataFinder 클래스를 Startup.cs 에서 서비스 등록을 해주어야 한다.

  • services.AddTransient<DataFinder>(); – Transient : 트랜션트, 일시적인
  • services.AddInstance(); <= 뭔지 모르겠음.

모델에서 발생된 데이터를 컨트롤러가 가져다가 뷰 페이지에서 출력하는 형태가 MVC.
ViewComponent 라는 것도 있다.

의존성 주입 기능과 뷰 컴포넌트.

24장 ASP.NET Core 1.0 웹 응용 프로그램 프로젝트

24.1. 새로운 프로젝트 시스템 (더 새로워 져서…1.1 =_=)

로즐린(Roslyn)에 의하여 동적 컴파일이 가능하다. 수정 즉시 반영된다.

  • global.json – Core 1.1에서 변경됨
  • project.json – Core 1.1에서 변경됨
  • wwwroot – 웹 사이트의 root 폴더. 외부에서는 wwwroot에 올려진 파일들만 서비스가 된다.
  • Startup.cs – 응용프로그램의 시작점
  • appsettings.json – ASP.NET의 Web.config 파일과 동일한 기능으로, 환경 설정 파일. 주로 Startup.cs 에서 ConfigureServices() 메서드에서 사용되어 진다.
  • bundleconfig.json – Visual Studio의 확장도구인 Bundler & Minifier 에서 사용되어 진다. CSS 또는 javascript 파일을 축소하거나 합칠수 있다고 한다. 이러한 작업의 설정들이 이 파일에 저장된다.
  • 모던 웹 개발 도구들
    • NPM – Node.js 관련 패키지 매니저
    • Bower – CSS, javascript, Image, Font 등 정적인 파일 관련 패키지 매니저
    • Gulp – 태스크 러너. javascript 코드를 축소하거나 난독화 처리할때 사용

24.2. 실습 (뭐 없음…)

24.3. HTTP 파이프라인과 미들웨어

각종 미들웨어를 파이프라인에 등록해서 사용할 수 있다.

24.4. 정적 파일 실행을 위한 UseStaticFiles() 미들웨어 추가

wwwroot 폴더에 위치한 정적파일들을 실행하기 위한 미들웨어

이 메서드 호출로 인하여 wwwroot폴더가 루트폴더가 된다.

Startup.cs 파일의 Configure() 메서드에 IApplicationBuilder.UseStaticFiles()를 호출해야 한다.

IApplicationBuilder.UseFileServer()를 호출해도 된다. (좀 더 추가기능이 포함되어 있다.)

24.5. 실습

Microsoft.AspNetCore.StaticFiles 패키지가 설치되어 있는지 확인하려면 Visual Studio의 솔루션탐색기에서 해당 프로젝트의 Dependencies 하위 노드의 Nuget을 확인한다.
프로젝트면.csproj 파일을 텍스트편집기로 열어보면

가 있는것을 확인할 수 있다.

별도의 경로에 정적파일을 위한 폴더를 추가하려면,

24.6. 주요 미들웨어

  • UseDirectoryBrowser() – 디렉터리 목록 보기
  • UseDefaultFiles() – 기본 문서 제공
  • UseStatusCodePages() – 상태 코드 표시
  • UseWelcomePage() – 환영 페이지 출력
  • UseDeveloperExceptionPage() – 자세한 에러 메시지 표시
  • UseFileServer() – UseDefaultFiles(), UseStaticFiles(), UseDirectoryBrowser() 기능 모두를 한번에 호출하는 메서드

 

. 참고자료

– ASP.NET Korea Study Group

Loader Loading...
EAD Logo Taking too long?

Reload Reload document
| Open Open in new tab

Download [322.48 KB]

– ASP.NET Korea Study Group, 안지오

 

23장 ASP.NET Core 시작하기

      23장 ASP.NET Core 시작하기에 댓글 없음

23.1. 크로스 플랫폼을 위한 ASP.NET Core 1.0

ASP.NET Core는 Windows, Linux, OS X 등의 크로스플랫폼을 지원하는, 최신 웹 응용프로그램을 제작할 수 있는 오픈 소스 웹 프레임워크다.
ASP.NET Core는 .NET Core 런타임 및 Full .NET Framework 기반으로 실행된다. (프로젝트 생성시, 템플릿 선택)

23.2. ASP.NET Core 1.0 특징

  • 오픈소스 (https://github.com/aspnet/home)
  • 크로스 플랫폼
  • 최신 웹 기술 도입
  • 클라우드 친화적
  • 빠름 (?)
  • 하나의 웹 스택
  • 자체 웹 서버 제공
  • 모든 도구 사용 가능
  • 의존성 주입 기본 내장

23.4. 통합된 프레임워크인 ASP.NET Core MVC

23.6. ASP.NET Core 개발 환경 구축

http://www.visualstudio.com

 

. 참고자료

23.ASP.NET Core 시작하기, ASP.NET Korea Study Group – 한상훈

ASP.NET Core: Getting Started with ASP.NET MVC Core, Codeproject – Vincent Maverick Durano

 

 

Localization in WPF : Support Multi-Language

      Localization in WPF : Support Multi-Language에 댓글 없음

WPF에서 지역화 하는 방법에는 여러가지가 있다.

첫번째로, WPF 프로젝트에서 기본으로 제공되는 Resources.resx 파일에 문자열들을 추가하여 사용하는 방법.
두번째는 별도의 .resx파일을 추가로 생성하여 사용하는 방법.
세번째는 ResourceDictionary에 문자열을 추가하여 사용하는 방법.
그 외에도 별도의 csv 파일을 사용하는 방법 등 다양하다.

그 중에서 가장 기본인 Resources.resx 파일을 이용한 지역화 방법에 대해 소개하고자 한다.

1. Edit Resources.resx

솔루션탐색기

Visual Studio 에서 WPF 프로젝트를 생성하여 솔루션탐색기를 확인해보자.
생성된 WPF 프로젝트 아래에 Properties 노드가 있고, 이것을 펼쳐보면 Resources.resx 파일이 있다.

Resources.resx 파일을 더블클릭하면 문자열 리소스를 편집할 수 있는 창이 열린다.

문자열 리소스 에디터

‘HelloWorld’ 라는 이름(=키)를 가지는 문자열 리소스를 추가하고 그 값을 ‘Hello, World!’ 라고 설정하였다.
추후 사용시 이 리소스 명을 참조하게 된다.

화면에서 보듯이, 문자열 뿐만아니라 이미지, 아이콘, 오디오 파일 등의 리소스도 지역에 따라 구분하여 사용할 수 있다.

2. Addtional Locale

이젠 다국어 지원을 위하여 새로운 .resx 파일을 추가할 차례이다.

일반적으로 영어권의 리소스 문자열을 Resources.resx 파일에 설정하고,
그 외 지역명에 따라 Resources.ko-KR.resx, Resources.ja-JP.resx 와 같은 네이밍룰을 가지는 .resx 파일을 추가하여 사용한다.

솔루션탐색기에서 ‘새 항목 추가’ 버튼을 눌러 .resx파일을 생성해도 되지만, Resources.resx파일을 복사하여 붙여넣고 이름만 바꾸는 편이 더 수월하다.
복사하여 사용하면 리소스 명을 빼먹는 실수를 할 경우도 적어지며 실제 지역화된 값만 바꾸면 되기 때문이다.

솔루션탐색기에서 Resources.resx 파일을 선택 후, 우리가 자주 사용하던 Ctrl+C, Ctrl+V 를 누르자.
‘Resources – 복사본.resx’ 이라는 파일이 생성되었고, 이름을 ‘Resources.ko-KR.resx’로 변경한다.

그리고 ‘HelloWorld’ 라는 리소스의 값을 ‘안녕, 월드!’ 라고 변경한다.

이로써 지역화 문자열을 사용하기 위한 준비가 모두 끝났다.

다양한 지역을 추가하기 위해선 그저 Ctrl+C, Ctrl+V, F2(이름변경) 이 전부이다.

3. Using

사용할 문자열이 준비되었으면 이제 사용법을 확인할 차례이다.

WPF 에서는 기본적으로 System.Resources.ResourceManager 라는 클래스를 이용하여 Resources.resx를 사용할 수 있게 [프로젝트명].Properties.Resources 클래스를 제공한다.
이 클래스를 이용하여 Xaml 또는 C# 코드에서 지역화 문자열 리소스를 사용할 수 있다.

Xaml에서 Resources 를 참조하는 방법과 C#에서 사용하는 방법이 있다.

3.1. use in Xaml

xaml 파일, 즉 View에서 지역화된 문자열을 사용하는 방법이다.

일단 사용하고자 하는 Xaml파일(MainWindows.xaml)에 Namespace를 추가해야 한다. 나는 prop 라는 Namespace를 추가하였다. Xaml에서 Namespace를 추가하는 방법/형식은 MSDN을 참고하자.

그리고 지역화 문자열을 표시하기 위하여 TextBlock를 하나 추가하고, Text에 아래와 같이 작성한다.
Static 데이터인 prop네임스페이스를 가지는 Resources 클래스의 HelloWorld를 표시한다는 내용이다.

..아직 끝난게 아니다..

다시 Resources.resx 파일을 열어 확인해 보면 ‘엑세스 한정자‘가 ‘Internal’ 로 되어있다. 이 값을 ‘Public‘으로 변경해야 Xaml에서 정상적으로 동작한다.

엑세스 한정자 변경을 하지않아 엄청난 삽질을 한 경험이 있으니 반드시 기억하길 바란다.

3.2. use in C#

C# 코드에서 지역화된 문자열을 사용하는 방법은 더 간단하다. Resources.HelloWorld 속성이 static 이기 때문에 원하는 부분에 그대로 작성하면 된다.

 

4. 실행

이제 실행해보자. 현재 Windows의 지역설정에 해당하는 리소스가 로드되어 화면에 텍스트가 표시된다.

나는 한국어 버전의 Windows를 사용하고 있기 때문에 (정확히는 ‘제어판’-‘국가 또는 지역’에서 한국어로 설정되었기 때문에) ‘안녕, 월드!’ 라고 표시된다.

만약 내가 영어 버전의 Windows를 사용했었다면 ‘Hello, World!’ 라고 표시되었을 것이다.

해당 지역의 리소스가 포함되지 않았을 경우에는 기본 리소스인 Resources.resx의 문자열이 표시된다.

간단하게 확인해 보려면, Resources 클래스의 Culture 속성을 변경하면 된다.
정상적으로 영어가 나오는지 확인하기 위하여 ‘en-US’로 변경해 보겠다.

뭐, 정확히는 Resources.en-US.resx 파일이 없어서 기본 리소스인 Resources.resx의 문자열이 표시되었지만, 그래도 지역화가 정상적으로 동작한다는 사실을 알 수 있다.

Task에는 항상 CancellationToken을 함께 쓰자.

      Task에는 항상 CancellationToken을 함께 쓰자.에 댓글 없음

비동기 메서드를 사용할때, 취소를 항상 생각해 두자.

간단한 Task 외에는 대부분 취소를 해야하는 경우가 많다.

Task를 생성할때부터 CancellationToken을 추가해 놓지 않으면 나중에 손이 많이 간다.

일단 Task에 대해서 완벽히 이해한 다음에..;;

 

ref : https://msdn.microsoft.com/library/hh873175.aspx