asp.net-core
Tag Helfer

Parameter

Form Tag Helper - Grundlegendes Beispiel

<form asp-action="create" asp-controller="Home">
     <!--Your form elements goes here--> 
</form>

Form Tag Helper - Mit benutzerdefinierten Routenattributen

<form asp-action="create" 
      asp-controller="Home" 
      asp-route-returnurl="dashboard" 
      asp-route-from="google">
     <!--Your form elements goes here--> 
</form>

Dadurch wird die folgende Markup generiert

<form action="/Home/create?returnurl=dashboard&amp;from=google" method="post">
    <!--Your form elements goes here--> 
</form>

Eingabemarke Helper

Angenommen, Ihre Ansicht ist stark typisiert für ein Ansichtsmodell wie

public class CreateProduct
{
   public string Name { set; get; }
}

Und Sie übergeben Ihrer Ansicht ein Objekt von Ihrer Aktionsmethode.

@model CreateProduct
<form asp-action="create" asp-controller="Home" >

    <input type="text" asp-for="Name"/>   
    <input type="submit"/>

</form>

Dadurch wird die folgende Markup generiert.

<form action="/Home/create" method="post"> 

    <input type="text" id="Name" name="Name" value="" />
    <input type="submit"/>
    <input name="__RequestVerificationToken" type="hidden" value="ThisWillBeAUniqueToken" />

</form>

Wenn das Eingabefeld mit einem Standardwert gerendert werden soll, können Sie den Namenseigenschaftswert Ihres Ansichtsmodells in der Aktionsmethode festlegen.

public IActionResult Create()
{
  var vm = new CreateProduct { Name="IPhone"};
  return View(vm);
} 

Formulareinreichung & Modellbindung

Die CreateProduct funktioniert CreateProduct wenn Sie CreateProduct als Parameterparameter für die HttpPost-Aktion / einen Parameter namens name

Wählen Sie Tag Helper aus

Angenommen, Ihre Ansicht ist für ein Ansichtsmodell wie dieses stark typisiert

public class CreateProduct
{       
   public IEnumerable<SelectListItem> Categories { set; get; }
   public int SelectedCategory { set; get; }
}

In Ihrer GET-Aktionsmethode erstellen Sie ein Objekt dieses Ansichtsmodells, legen die Categories-Eigenschaft fest und senden an die Ansicht

public IActionResult Create()
{
    var vm = new CreateProduct();
    vm.Categories = new List<SelectListItem>
    {
        new SelectListItem {Text = "Books", Value = "1"},
        new SelectListItem {Text = "Furniture", Value = "2"}
    };
    return View(vm);
}

und aus deiner Sicht

@model CreateProduct

<form asp-action="create" asp-controller="Home">
    <select asp-for="SelectedCategory" asp-items="@Model.Categories">
        <option>Select one</option>
    </select>
    <input type="submit"/>
</form>

Dadurch wird die Markup-Funktion unten dargestellt ( nur relevante Teile des Formulars / der Felder enthalten ).

<form action="/Home/create" method="post">  
    <select data-val="true" id="SelectedCategory" name="SelectedCategory">
        <option>Select one</option>
        <option value="1">Shyju</option>
        <option value="2">Sean</option>
    </select>
    <input type="submit"/>
</form>

Abrufen des ausgewählten Dropdown-Werts bei der Formularübermittlung

Sie können dasselbe Ansichtsmodell als Parameter für die HttpPost-Aktionsmethode verwenden

[HttpPost]
public ActionResult Create(CreateProduct model)
{
  //check model.SelectedCategory value
  / /to do : return something
}

Legen Sie als Option eine Option fest

Wenn Sie eine Option als ausgewählte Option festlegen möchten, können Sie einfach den SelectedCategory Eigenschaftswert festlegen.

public IActionResult Create()
{
    var vm = new CreateProduct();
    vm.Categories = new List<SelectListItem>
    {
        new SelectListItem {Text = "Books", Value = "1"},
        new SelectListItem {Text = "Furniture", Value = "2"},
        new SelectListItem {Text = "Music", Value = "3"}
    };
    vm.SelectedCategory = 2;
    return View(vm);
}

Rendern einer Dropdown-Liste mit Mehrfachauswahl / ListBox

Wenn Sie ein Multi-Select-Dropdown-Menü rendern möchten, können Sie einfach Ihre Ansichtsmodelleigenschaft, die Sie für das asp-for Attribut in Ihrer Ansicht verwenden, in einen Arraytyp ändern.

public class CreateProduct
{       
   public IEnumerable<SelectListItem> Categories { set; get; }
   public int[] SelectedCategories { set; get; }
}

In der Ansicht

@model CreateProduct

<form asp-action="create" asp-controller="Home" >
    <select asp-for="SelectedCategories" asp-items="@Model.Categories">
        <option>Select one</option>
    </select>
    <input type="submit"/>
</form>

Dadurch wird das SELECT-Element mit multiple Attributen generiert

<form action="/Home/create" method="post">
     <select id="SelectedCategories" multiple="multiple" name="SelectedCategories">
        <option>Select one</option>
        <option value="1">Shyju</option>
       <option value="2">Sean</option>
     </select>
    <input type="submit"/>
</form>

Benutzerdefinierter Tag-Helfer

Sie können Ihre eigenen Tag-Helfer erstellen, indem Sie ITagHelper implementieren oder von der Convenience-Klasse TagHelper .

• Die Standardkonvention besteht darin, ein HTML-Tag als Ziel festzulegen, das dem Namen des Hilfsprogramms ohne das optionale Suffix TagHelper entspricht. WidgetTagHelper beispielsweise auf ein <widget> -Tag.
• Das [HtmlTargetElement] -Attribut kann verwendet werden, um das Tag, auf das sich das Targeting bezieht, weiter zu steuern
• Jeder öffentlichen Eigenschaft der Klasse kann ein Wert als Attribut im Rasierer-Markup zugewiesen werden. Zum Beispiel eine öffentliche Eigenschaft public string Title {get; set;} kann ein Wert als <widget title="my title">
• Standardmäßig übersetzen Tag-Helfer Pascal-Cased C # -Klassennamen und -Eigenschaften für Tag-Helfer in einen Fall mit unterem Kebab. Wenn Sie beispielsweise [HtmlTargetElement] weglassen und der Klassenname WidgetBoxTagHelper , schreiben Sie in Razor <widget-box></widget-box> .
• Process und ProcessAsync enthalten die Rendering-Logik. Beide erhalten einen Kontextparameter mit Informationen zum aktuell gerenderten Tag und einen Ausgabeparameter zum Anpassen des gerenderten Ergebnisses.

Alle Assemblys, die benutzerdefinierte Tag-Helfer enthalten, müssen der Datei _ViewImports.cshtml hinzugefügt werden.

@addTagHelper *, MyAssembly

Beispiel Widget Benutzerdefinierter Tag-Helfer

Im folgenden Beispiel wird ein benutzerdefinierter Widget-Tag-Helfer erstellt, der auf Rasierer-Markup abzielt:

<widget-box title="My Title">This is my content: @ViewData["Message"]</widget-box>

Was wird gerendert als:

<div class="widget-box">
    <div class="widget-header">My Title</div>
    <div class="widget-body">This is my content: some message</div>
</div>

Um einen solchen Tag-Helfer zu erstellen, muss Folgendes codiert sein:

[HtmlTargetElement("widget-box")]
public class WidgetTagHelper : TagHelper
{
    public string Title { get; set; }

    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        var outerTag = new TagBuilder("div");
        outerTag.Attributes.Add("class", output.TagName);
        output.MergeAttributes(outerTag);
        output.TagName = outerTag.TagName;

        //Create the header
        var header = new TagBuilder("div");
        header.Attributes.Add("class", "widget-header");
        header.InnerHtml.Append(this.Title);
        output.PreContent.SetHtmlContent(header);

        //Create the body and replace original tag helper content
        var body = new TagBuilder("div");
        body.Attributes.Add("class", "widget-body");
        var originalContents = await output.GetChildContentAsync();
        body.InnerHtml.Append(originalContents.GetContent());
        output.Content.SetHtmlContent(body);
    }
}

Label-Tag-Helfer

Label Tag Helper kann verwendet werden, um das label für eine Modelleigenschaft wiederzugeben. Es ersetzt die Methode Html.LabelFor in früheren Versionen von MVC.

Nehmen wir an, Sie haben ein Modell:

public class FormViewModel
{
    public string Name { get; set; }
}

In der Ansicht können Sie das label HTML-Element und den asp-for Tag-Helfer verwenden:

<form>
    <label asp-for="Name"></label>
    <input asp-for="Name" type="text" />
</form>

Dies entspricht dem folgenden Code in früheren Versionen von MVC:

<form>
    @Html.LabelFor(x => x.Name)
    @Html.TextBoxFor(x => x.Name)
</form>

Die beiden obigen Codeausschnitte zeigen dasselbe HTML:

<form>
    <label for="Name">Name</label>
    <input name="Name" id="Name" type="text" value="">
</form>

Anker-Tag-Helfer

Anchor-Tag-Helper wird verwendet, um Href-Attribute für die Verknüpfung mit einer bestimmten Controller-Aktion oder MVC-Route zu generieren. Grundlegendes Beispiel

<a asp-controller="Products" asp-action="Index">Login</a>

In manchen Fällen müssen wir zusätzliche Parameter für die Controller-Aktion angeben, an die Sie binden. Wir können Werte für diese Parameter angeben, indem Sie Attribute mit dem Asp-Route-Präfix hinzufügen.

<a asp-controller="Products" asp-action="Details" asp-route-id="@Model.ProductId">
   View Details
</a>