asp.net-core
Tag Helpers

Parametry

Form Tag Helper - Podstawowy przykład

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

Form Tag Helper - z niestandardowymi atrybutami trasy

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

Spowoduje to wygenerowanie poniższego znacznika

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

Input Tag Helper

Zakładając, że Twój widok jest silnie przypisany do takiego modelu widoku

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

I przekazujesz obiekt tego do widoku ze swojej metody akcji.

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

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

</form>

Spowoduje to wygenerowanie poniższego znacznika.

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

Jeśli chcesz, aby pole wejściowe było renderowane z wartością domyślną, możesz ustawić wartość właściwości Nazwa modelu widoku w metodzie akcji.

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

Złożenie formularza i wiązanie modelu

Wiązanie modelu będzie działać poprawnie, jeśli użyjesz CreateProduct jako parametru metody akcji HttpPost / parametru o nazwie name

Wybierz Tag Helper

Zakładając, że Twój widok jest silnie przypisany do takiego modelu widoku

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

W metodzie akcji GET tworzysz obiekt tego modelu widoku, ustawiasz właściwość Kategorie i wysyłasz do widoku

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

i twoim zdaniem

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

Spowoduje to wyświetlenie poniższego znacznika ( obejmującego tylko odpowiednie części formularza / pól )

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

Uzyskiwanie wybranej wartości rozwijanej w formularzu

Możesz użyć tego samego modelu widoku co parametr metody akcji HttpPost

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

Ustaw opcję jako wybraną

Jeśli chcesz ustawić opcję jako wybraną opcję, możesz po prostu ustawić wartość właściwości 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);
}

Renderowanie listy rozwijanej MultiBox / ListBox

Jeśli chcesz renderować menu rozwijane wielokrotnego wyboru, możesz po prostu zmienić właściwość modelu widoku, której używasz asp-for atrybutu asp-for w widoku, na typ tablicy.

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

W widoku

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

Spowoduje to wygenerowanie elementu SELECT z multiple atrybutami

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

Niestandardowy pomocnik tagów

Możesz tworzyć własne pomocniki tagów, implementując ITagHelper lub wywodząc się z klasy wygody TagHelper .

• Domyślną konwencją jest kierowanie na znacznik HTML zgodny z nazwą pomocnika bez opcjonalnego sufiksu TagHelper. Na przykład WidgetTagHelper będzie WidgetTagHelper tag <widget> .
• [HtmlTargetElement] można wykorzystać do dalszej kontroli [HtmlTargetElement] tagu
• Każda właściwość publiczna klasy może otrzymać wartość jako atrybut w znaczniku maszynek do golenia. Na przykład ciąg publiczny własności public string Title {get; set;} można podać wartość jako <widget title="my title">
• Domyślnie pomocnicy znaczników tłumaczą nazwy i właściwości klas C # pascal w przypadku pomocników znaczników na małe litery kebab. Na przykład, jeśli pominiesz użycie [HtmlTargetElement] a nazwa klasy to WidgetBoxTagHelper , wtedy w Razor napiszesz <widget-box></widget-box> WidgetBoxTagHelper <widget-box></widget-box> WidgetBoxTagHelper <widget-box></widget-box> .
• Process i ProcessAsync zawierają logikę renderowania. Oba otrzymują parametr kontekstu z informacją o renderowanym bieżącym tagu i parametr wyjściowy służący do dostosowania renderowanego wyniku.

Każdy zestaw zawierający pomocnicze znaczniki niestandardowe należy dodać do pliku _ViewImports.cshtml (Uwaga: rejestrowany jest zespół, a nie przestrzeń nazw):

@addTagHelper *, MyAssembly

Przykładowy niestandardowy pomocnik tagów

Poniższy przykład ilustruje tworzenie niestandardowego elementu pomocniczego znacznika widżetu, który będzie kierował znaczniki brzytwy, takie jak:

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

Które będą renderowane jako:

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

Kod potrzebny do utworzenia takiego pomocnika tagów jest następujący:

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

Pomocnik Tag Label

Pomocnika tagów etykiet można użyć do renderowania label właściwości modelu. Zastępuje metodę Html.LabelFor we wcześniejszych wersjach MVC.

Powiedzmy, że masz model:

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

W widoku możesz użyć elementu HTML label i pomocnika tagów asp-for :

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

Jest to równoważne z następującym kodem we wcześniejszych wersjach MVC:

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

Oba powyższe fragmenty kodu wyświetlają ten sam kod HTML:

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

Pomocnik tagu kotwicy

Pomocnik tagu kotwicy służy do generowania atrybutów href w celu połączenia z określoną akcją kontrolera lub trasą MVC. Podstawowy przykład

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

Czasami musimy określić dodatkowe parametry działania kontrolera, z którym się wiążesz. Możemy określić wartości tych parametrów, dodając atrybuty z prefiksem asp asp route.

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