asp.net-core
Tag Helpers

Parametri

Form Tag Helper - Esempio di base

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

Form Tag Helper - Con attributi di percorso personalizzati

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

Questo genererà il markup sottostante

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

Input Tag Helper

Supponendo che la tua vista sia fortemente battuta su un modello di visualizzazione come

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

E stai passando un oggetto di questo alla vista dal tuo metodo di azione.

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

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

</form>

Questo genererà il markup sottostante.

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

Se si desidera eseguire il rendering del campo di input con un valore predefinito, è possibile impostare il valore della proprietà Nome del modello di vista nel metodo di azione.

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

Invio del modulo e associazione del modello

Il collegamento del modello funzionerà correttamente se si utilizza CreateProduct come parametro del metodo di azione HttpPost / un parametro denominato name

Seleziona Tag Helper

Supponendo che la tua vista sia fortemente digitata su un modello di visualizzazione come questo

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

E nel tuo metodo di azione GET, stai creando un oggetto di questo modello di vista, impostando la proprietà Categorie e inviando alla vista

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

e secondo te

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

Questo renderà il markup sottostante ( incluse solo le parti rilevanti del modulo / campi )

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

Ottenere il valore di dropdown selezionato nell'invio del modulo

È possibile utilizzare lo stesso modello di visualizzazione del parametro del metodo di azione HttpPost

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

Imposta un'opzione come quella selezionata

Se si desidera impostare un'opzione come opzione selezionata, è possibile semplicemente impostare il valore della proprietà SelectedCategory .

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

Rendering di un menu a discesa / selezione multi selezione

Se vuoi eseguire il rendering di un menu a discesa a selezione multipla, puoi semplicemente modificare la proprietà del modello di vista che utilizzi asp-for attributo asp-for nella tua vista su un tipo di matrice.

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

Nella vista

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

Questo genererà l'elemento SELECT con multiple attributi

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

Helper tag personalizzato

È possibile creare i propri helper di tag implementando ITagHelper o derivando dalla classe di convenienza TagHelper .

• La convenzione di default è di indirizzare un tag html che corrisponda al nome dell'helper senza il suffisso TagHelper opzionale. Ad esempio WidgetTagHelper avrà come target un tag <widget> .
• L'attributo [HtmlTargetElement] può essere utilizzato per controllare ulteriormente il tag che viene scelto come target
• A qualsiasi proprietà pubblica della classe può essere assegnato un valore come attributo nel markup del rasoio. Ad esempio una public string Title {get; set;} pubblica di proprietà public string Title {get; set;} può avere un valore come <widget title="my title">
• Per impostazione predefinita, tag helper traduce i nomi di classe C # Pascal e le proprietà per gli helper dei tag in caso di kebab inferiore. Ad esempio, se ometti di utilizzare [HtmlTargetElement] e il nome della classe è WidgetBoxTagHelper , in Razor scriverai <widget-box></widget-box> .
• Process e ProcessAsync contengono la logica di rendering. Entrambi ricevono un parametro di contesto con informazioni sul tag corrente da sottoporre a rendering e un parametro di output utilizzato per personalizzare il risultato del rendering.

Qualsiasi assembly che contiene helper di tag personalizzati deve essere aggiunto al file _ViewImports.cshtml (si noti che è stato registrato l'assembly, non lo spazio dei nomi):

@addTagHelper *, MyAssembly

Sample Tag Helper Tag personalizzati

L'esempio seguente crea un helper di tag widget personalizzato che targetizzerà il markup del rasoio come:

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

Che sarà reso come:

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

Il codice necessario per creare un tale tag helper è il seguente:

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

Etichetta Tag Helper

Label Tag Helper può essere utilizzato per rendere l' label per una proprietà del modello. Sostituisce il metodo Html.LabelFor nelle versioni precedenti di MVC.

Diciamo che hai un modello:

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

Nella vista puoi usare l'elemento HTML label e l'helper dei tag asp-for :

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

Questo è equivalente al seguente codice nelle versioni precedenti di MVC:

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

Entrambi i frammenti di codice sopra renderizzano lo stesso HTML:

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

Anchor tag helper

L'helper del tag di ancoraggio viene utilizzato per generare gli attributi href per il collegamento a una particolare azione del controller o una route MVC. Esempio di base

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

A volte, è necessario specificare parametri aggiuntivi per l'azione del controller a cui si sta vincolando. Possiamo specificare i valori per questi parametri aggiungendo attributi con il prefisso asp-route.

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