asp.net core 새로운 기능 의 TagHelper 태그 조수

오늘부터 asp.net core 의 새로운 특성 에 대해 말씀 드 리 겠 습 니 다.오늘 은 TagHelper 태그 조수 에 대해 말씀 드 리 겠 습 니 다..net 을 공부 하 는 데 가장 도움 이 되 는 것 은 바로 microsoft 의 공식 설명 문서 입 니 다.그 안에 사용 설명 을 모두 명확 하 게 썼 지만 어떻게.net core 를 문서 마이크로소프트 에 넣 어 번역 하지 못 했 습 니 다.영 어 를 잘 못 하 는 사람 에 게 는 어렵 습 니 다.그래서 오늘 은 이 태그 조 수 를 배우 고 블 로그 원 어른 들 과 경험 을 나 누 러 왔 습 니 다.
Microsoft 공식 문서 와 Git 프로젝트 를 보 려 면 아래 전송 문 을 클릭 하 세 요~~
　　 asp.net 코어 공식 문서
　　 asp.net 코어 github 프로젝트
TagHelper 라 고 하면 asp.net form 의 서버 엔 드 컨트롤 같 기도 하고 Angular 나 Vue 의'구성 요소'백 엔 드 구현 버 전 같 기도 합 니 다.사용 자 는 html 태그 집합 을 사용자 정의 태그 로 변환 하여 html 코드 의 재 활용 을 실현 할 수 있 습 니 다.
그러면 본문 시작~~
우선,우 리 는 vs 2017 플러그 인:Razor Language Services 를 설치 해 야 합 니 다.이 플러그 인 은 html 에서 사용자 정의 태그 조 수 를 스마트 하 게 알려 줍 니 다.
　　 https://marketplace.visualstudio.com/items?itemName=ms-madsk.RazorLanguageServices
asp.net core 프로젝트 만 들 기

마이크로소프트 가 정의 하 는 탭 도 우 미 를 사용 합 니 다.플러그 인 을 설치 한 후 탭 도 우 미 를 사용 하면 하 이 라이트 가 표 시 됩 니 다.

위의 그림 에서 environment,link,a 라벨 은 모두 태그 도 우 미 를 사용 하여 각자 의 기능 을 실현 합 니 다.

<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">taghelpersample</a>

a 탭 에 서 는 asp-controller,asp-action 사용자 정의 속성 을 사용 하여 경로 접근 을 실현 합 니 다.
이 럴 때 나 도@Html 클래스 를 사용 해 같은 기능 을 수행 할 수 있 는데 왜 TagHelper 를 사용 해 야 합 니까?

@Html.ActionLink("taghelpersample", "Index", "Home",null, new { Class = "navbar-brand" })

확실히@Html 도움말 클래스 를 사용 하면 같은 기능 을 수행 할 수 있 지만 태그 도 우 미 를 사용 하 는 방식 은 html 태그 문법 에 더욱 부합 되 지 않 습 니까?강박 증 프로그래머 에 게 는 복음 입 니 다~또한 태그 의 기 존 속성 에 대한 추가,예 를 들 어 class,태그 조수 의 사용 도 더욱 편리 합 니 다.

<!--     form-->
<form asp-controller="Home" asp-action="Index" class="form-horizontal" method="post">

</form>
<!--Html    form-->
@using (Html.BeginForm("Index", "Home", FormMethod.Post,, new { Class = "form-horizontal" }))
{

}

그 밖 에 태그 조수 의 또 다른 특징 은 사용자 정의 가 가능 하 다 는 것 입 니 다.구체 적 인 절 차 는 다음 과 같 습 니 다.
(1)TagHelper 클래스 에서 파생 된 Class 만 들 기

 //       <text-collection></text-collection>
　　 public class TextCollectionTagHelper:TagHelper
 {
  public override void Process(TagHelperContext context, TagHelperOutput output)
  {
   base.Process(context, output);
  }
 }

(2)속성 과 기본 클래스 설정

public string Color { get; set; }

  public override void Process(TagHelperContext context, TagHelperOutput output)
  {
   output.TagName = "div";
   output.Attributes.Add("style", "color:" + Color);
   var text = "Hello,World";
   var h1 = new TagBuilder("h1");
   var h2 = new TagBuilder("h2");
   var h3 = new TagBuilder("h3");
   var h4 = new TagBuilder("h4");
   var h5 = new TagBuilder("h5");
   var h6 = new TagBuilder("h6");
   h1.InnerHtml.Append(text);
   h2.InnerHtml.Append(text);
   h3.InnerHtml.Append(text);
   h4.InnerHtml.Append(text);
   h5.InnerHtml.Append(text);
   h6.InnerHtml.Append(text);
   output.Content.AppendHtml(h1);
   output.Content.AppendHtml(h2);
   output.Content.AppendHtml(h3);
   output.Content.AppendHtml(h4);
   output.Content.AppendHtml(h5);
   output.Content.AppendHtml(h6);
  }

(3)재ViewImports.cshtml 가 져 오기 클래스 네 임 스페이스

@addTagHelper *,taghelpersample

(4)cshtml 에서 태그 도 우미 사용

<text-collection color="red"></text-collection>
<text-collection color="blue"></text-collection>
<text-collection color="#666"></text-collection>

(5)디 버 깅 효과

OK,오늘 TagHelper 에 대해 서 는 여기까지 공유 하 겠 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.