2015-09-21 14 views
5

programu ASP.NET Rdzeń TagHelper documentation podaje następujący przykład:zagnieżdżanie TagHelpers w ASP.NET MVC rdzenia 6

public class WebsiteContext 
{ 
    public Version Version { get; set; } 
    public int CopyrightYear { get; set; } 
    public bool Approved { get; set; } 
    public int TagsToShow { get; set; } 
} 

[TargetElement("website-information")] 
public class WebsiteInformationTagHelper : TagHelper 
{ 
    public WebsiteContext Info { get; set; } 

    public override void Process(TagHelperContext context, TagHelperOutput output) 
    { 
     output.TagName = "section"; 
     output.Content.SetContent(
      [email protected]"<ul><li><strong>Version:</strong> {Info.Version}</li> 
      <li><strong>Copyright Year:</strong> {Info.CopyrightYear}</li> 
      <li><strong>Approved:</strong> {Info.Approved}</li> 
      <li><strong>Number of tags to show:</strong> {Info.TagsToShow}</li></ul>"); 
     output.TagMode = TagMode.StartTagAndEndTag; 
    } 
} 

ten może być następnie wykorzystane w Razor .cshtml następująco:

<website-information info="new WebsiteContext { 
    Version = new Version(1, 3), 
    CopyrightYear = 1790, 
    Approved = true, 
    TagsToShow = 131 }"/> 

Spowoduje to wygenerowanie następującego kodu HTML:

<section> 
    <ul> 
     <li><strong>Version:</strong> 1.3</li> 
     <li><strong>Copyright Year:</strong> 1790</li> 
     <li><strong>Approved:</strong> true</li> 
     <li><strong>Number of tags to show:</strong> 131 </li> 
    </ul> 
</section> 

To jest dość brzydka składnia znacznika pomocnika. Czy jest jakiś sposób na zagnieżdżenie innego pomocnika znacznika i uzyskanie pełnego intelli-sense, tak aby jedynym dozwolonym dzieckiem informacji na stronie był kontekst? Zobacz poniższy przykład:

<website-information> 
    <context version="1.3" copyright="1790" approved tags-to-show="131"/> 
</website-information> 

w moim przypadku użycia, element strona informacyjna ma już wiele atrybutów i chcę dodać jeden lub więcejoddzielne elementy zagnieżdżone.

UPDATE

mam podniesione this sugestię na stronie ASP.NET GitHub do wdrożenia tej funkcji dla TagHelpers.

+1

Dlaczego po prostu nie dodawać oddzielnych parametrów do helpera tagu "informacja o stronie internetowej" zamiast pojedynczego parametru "info"? Możesz zagnieździć pomocników tagów, ale nie będziesz mógł wymusić, że 'pomocnicy są zagnieżdżeni wewnątrz' 'helper –

+0

@ DanielJ.G. Istnieje wiele powodów, aby to zrobić. 1. Masz już wiele atrybutów na '' 'informacji o stronie''' 2. Jeśli kontekst jest bardziej logiczny, jako element potomny 3. Jeśli właściwości' '' context''' są logicznie pogrupowane razem. 4. Możesz mają wiele elementów '' 'context'''. –

Odpowiedz

8

Z pewnością można zagnieździć pomocników tagów, chociaż być może inne opcje, takie jak komponenty widoku, widoki częściowe lub szablony wyświetlania, mogą lepiej pasować do scenariusza opisanego w PO.

To może być bardzo proste dziecko tag pomocnik:

[HtmlTargetElement("child-tag", ParentTag="parent-tag")] 
public class ChildTagHelper : TagHelper 
{ 
    public string Message { get; set; } 

    public override void Process(TagHelperContext context, TagHelperOutput output) 
    { 
     // Create parent div 
     output.TagName = "span"; 
     output.Content.SetContent(Message); 
     output.TagMode = TagMode.StartTagAndEndTag;  
    } 
} 

I może to być także inny prosty rodzic tag pomocnik:

[HtmlTargetElement("parent-tag")] 
[RestrictChildren("child-tag")] 
public class ParentTagHelper: TagHelper 
{ 
    public string Title { get; set; } 

    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output) 
    {    
     output.TagName = "div"; 

     // Add some specific parent helper html 
     var header = new TagBuilder("h1"); 
     header.Attributes.Add("class", "parent-title"); 
     header.InnerHtml.Append(this.Title); 
     output.PreContent.SetContent(header); 

     // Set the inner contents of this helper(Will process any nested tag helpers or any other piece of razor code) 
     output.Content.SetContent(await output.GetChildContentAsync());    
    } 
} 

W widoku maszynki można było potem napisz:

<parent-tag title="My Title"> 
    <child-tag message="This is the nested tag helper" /> 
</parent-tag> 

który byłby wyświetlany jako:

<div> 
    <h1 class="parent-title">My Title</h1> 
    <span>This is the nested tag helper</span> 
</div> 

Można opcjonalnie egzekwować pomocników tagów być zagnieżdżone w szczególny sposób:

  • użytkowania [RestrictChildren("child-tag", "another-tag")] w pomocnika tag rodzic ograniczyć dozwoloną tag zagnieżdżony helpery
  • Parametr służy do deklarowania pomocnika znacznika potomnego do wymuszenia umieszczenia znacznika wewnątrz określonego znacznika nadrzędnego: [HtmlTargetElement("child-tag", ParentTag = "parent-tag")]
+0

Parametr ParentTag ma następującą postać: "Wymagana nazwa elementu HTML bezpośredniego rodzica. Wartość pusta oznacza, że ​​dozwolona jest jakakolwiek nazwa elementu HTML." Czy mogę zamiast tego użyć selektora CSS? Znacznik nadrzędny jest po prostu '', może po prostu dzieci z '