MVC 6 .Net Core1 Erstellen benutzerdefinierter Tag Helper für Likert Scale

Question

Ich versuche, einen Tag-Helper für MVC 6 mit .Net Core RC1 zu erstellen. Ich habe ein paar gute sources aber nicht etwas ganz nah gefunden, war this in der Nähe fand ich und nahm Elemente Ich dachte, ich brauchte, um meine vorhandenen Code zu erstellen:

damit zu beginnen, ist mein Ziel HTML:

<span class="form-control"> 
       Highly Disagree 
       <input type="radio" name="MakingSense" value=1 /> 
       <input type="radio" name="MakingSense" value=2 /> 
       <input type="radio" name="MakingSense" value=3 /> 
       <input type="radio" name="MakingSense" value=4 /> 
       <input type="radio" name="MakingSense" value=5 /> 
       Highly Agree 
      </span> 

Im Moment versuche ich nur eines der Eingabe-Tags zu zeigen. Wenn ich das herausfinden kann, werde ich eine Schleife hinzufügen, um die anderen zu bekommen. Hier ist meine TagHelper

[HtmlTargetElement("input", Attributes = LikertForAttributeName)] 
public class LikertTagHelper : TagHelper 
{ 
    private const string LikertForAttributeName = "likert-for"; 

    [HtmlAttributeName(LikertForAttributeName)] 
    public string ModelField { get; set; } 

    public override void Process(TagHelperContext context, TagHelperOutput output) 
    { 
     var content = new StringBuilder(); 
     var input = new TagBuilder("input"); 
     input.MergeAttribute("type", "radio"); 
     input.MergeAttribute("name", ModelField); 
     input.MergeAttribute("value", "1"); 
     content.AppendLine(input.ToString()); 
     output.Content.SetContent(content.ToString()); 
     output.PreContent.SetHtmlContent("<span class=\"form-control\""); 
     output.PostContent.SetHtmlContent("</span>"); 
    } 

} 

Hier ist mein Rasiermesser cshtml:

<input likert-for="CharacterUnderstanding" /> 

Allerdings habe ich nur bekommen dies als meine HTML-Ausgabe:

<input /> 

So ist es Kommissionierung das Tag und Verarbeitung es aber nicht wie ich es erwarte. Hilfe, wo ich falsch gelaufen bin, wird sehr geschätzt.

Answer 1

Ihr Startpunkt für den Tag-Helper ist ein Eingabe-Tag, daher beginnt content als selbstschließendes Eingabe-Tag.

Das erste, was Sie tun möchten, ist, dass in einem span-Tag drehen, zum Beispiel:

//Replace initial output (an input tag) with a span 
var outerTag = new TagBuilder("span"); 
outerTag.AddCssClass("form-control"); 
output.MergeAttributes(outerTag); 
output.TagName = outerTag.TagName; 
output.TagMode = TagMode.StartTagAndEndTag; 

Da nun Ausgang ein span-Tag ist, dass Sie beginnen können, die inneren Inhalte hinzufügen:

• die Highly Zustimmen, Hoch Disagree Etiketten als Pre/Post-Inhalt hinzugefügt werden kann (noch innerhalb der Spanne):

• Der Radio-Buttons kann auf den Inhalt der Spanne angehängt werden:

  //Add the radio buttons 
  for(var x =0; x<5; x++) 
  { 
      var input = new TagBuilder("input"); 
      input.MergeAttribute("type", "radio"); 
      input.MergeAttribute("name", ModelField); 
      input.MergeAttribute("value", x.ToString()); 
      output.Content.Append(input); 
  } 
  

Mit diesem Tag Helfern an Ort und Stelle, die folgende Zeile in der Rasierer-Ansicht:

<input likert-for="CharacterUnderstanding" /> 

Wird wiedergegeben als:

<span class="form-control"> 
    Highly Disagree 
    <input name="CharacterUnderstanding" type="radio" value="0"> 
    <input name="CharacterUnderstanding" type="radio" value="1"> 
    <input name="CharacterUnderstanding" type="radio" value="2"> 
    <input name="CharacterUnderstanding" type="radio" value="3"> 
    <input name="CharacterUnderstanding" type="radio" value="4"> 
    Highly Agree 
</span> 

Als Randnotiz möchten Sie vorsichtig sein, wenn Sie Inhalte mit den Überladungen, die Zeichenfolgen akzeptieren, hinzufügen. In Ihrem ursprünglichen Code fügte die Zeile content.AppendLine(input.ToString()); tatsächlich Microsoft.AspNet.Mvc.Rendering.TagBuilder anstelle des Tag Builder-Inhalts hinzu.