asp.net-core
Taghelpers

parameters

Form Tag Helper - eenvoudig voorbeeld

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

Form Tag Helper - Met aangepaste route-attributen

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

Dit genereert de onderstaande markup

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

Helper voor invoertag

Ervan uitgaande dat uw weergave sterk is getypeerd in een weergavemodel zoals

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

En u geeft hiervan een object door aan het beeld van uw actiemethode.

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

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

</form>

Dit genereert de onderstaande markup.

<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>

Als u wilt dat het invoerveld wordt weergegeven met een standaardwaarde, kunt u de eigenschapsnaam Name van uw viewmodel instellen in de actiemethode.

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

Formulierverzending & modelbinding

CreateProduct werkt prima als u CreateProduct als uw HttpPost-actiemethode-parameter / een parameter met de naam name

Selecteer Tag Helper

Ervan uitgaande dat uw weergave sterk is getypeerd in een weergavemodel zoals deze

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

En in uw GET-actiemethode maakt u een object van dit viewmodel, stelt u de eigenschap Category in en verzendt u deze naar de view

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);
}

en naar jouw mening

@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>

Hiermee wordt de onderstaande markup weergegeven ( alleen relevante delen van formulier / velden opgenomen )

<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>

De geselecteerde vervolgkeuzewaarde ophalen bij het indienen van formulieren

U kunt hetzelfde weergavemodel gebruiken als uw parameter voor de HttpPost-actiemethode

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

Stel een optie in als de geselecteerde

Als u een optie als de geselecteerde optie wilt instellen, kunt u eenvoudig de eigenschapswaarde SelectedCategory instellen.

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);
}

Een Multi select dropdown / ListBox weergeven

Als u een vervolgkeuzelijst met meerdere selecties wilt weergeven, kunt u eenvoudig uw weergave-modeleigenschap die u gebruikt voor het asp-for attribuut in uw weergave wijzigen in een matrixtype.

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

In de weergave

@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>

Dit genereert het SELECT-element met multiple attributen

<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>

Aangepaste taghelper

U kunt uw eigen tag-helpers maken door ITagHelper implementeren of af te leiden van de TagHelper .

• De standaardconventie is om een HTML-tag te targeten die overeenkomt met de naam van de helper zonder het optionele achtervoegsel TagHelper. WidgetTagHelper zal bijvoorbeeld een <widget> -tag targeten.
• Het kenmerk [HtmlTargetElement] kan worden gebruikt om verder te bepalen welke tag wordt getarget
• Elke openbare eigenschap van de klasse kan een waarde krijgen als attribuut in de scheermesmarkering. Bijvoorbeeld een publieke public string Title {get; set;} kan een waarde krijgen als <widget title="my title">
• Standaard vertaalt tag-helpers namen en eigenschappen van C # -klasse met Pascal-omhulsel voor tag-helpers naar kleine letters van de kebab. Als u bijvoorbeeld het gebruik van [HtmlTargetElement] en de klassenaam WidgetBoxTagHelper is, WidgetBoxTagHelper u in Razor <widget-box></widget-box> .
• Process en ProcessAsync bevatten de renderinglogica. Beide krijgen een context parameter met informatie over de huidige tag wordt weergegeven en een uitgang parameter wordt gebruikt om de berekende resultaat aan te passen.

Elke assembly met aangepaste tag-helpers moet worden toegevoegd aan het bestand _ViewImports.cshtml ( merk op dat de assembly wordt geregistreerd, niet de naamruimte):

@addTagHelper *, MyAssembly

Voorbeeldwidget Aangepaste taghelper

In het volgende voorbeeld wordt een aangepaste widget voor het maken van widgets gemaakt die zich richt op scheermesmarkeringen zoals:

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

Die wordt weergegeven als:

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

De code die nodig is om zo'n taghelper te maken, is de volgende:

[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 Helper

Label Tag Helper kan worden gebruikt om een label voor een modeleigenschap te maken. Het vervangt de methode Html.LabelFor in eerdere versies van MVC.

Stel dat u een model hebt:

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

In de weergave kunt u het label HTML-element en asp-for tag helper gebruiken:

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

Dit komt overeen met de volgende code in eerdere versies van MVC:

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

Beide codefragmenten hierboven geven dezelfde HTML weer:

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

Anker tag helper

Anchor tag helper wordt gebruikt om href-attributen te genereren om te koppelen aan een bepaalde controlleractie of MVC-route. Basis voorbeeld

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

Soms moeten we aanvullende parameters opgeven voor de controlleractie waaraan u bent gebonden. We kunnen waarden voor deze parameters opgeven door attributen toe te voegen met het asp-route-prefix.

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