asp.net-core
Помощники тегов

параметры

Помощник тега формы - основной пример

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

Помощник тега формы - с настраиваемыми атрибутами маршрута

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

Это создаст следующую разметку

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

Помощник тегов ввода

Предполагая, что ваше представление строго типизировано для модели представления, например

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

И вы передаете объект этого вида в ваш метод действий.

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

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

</form>

Это создаст следующую разметку.

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

Если вы хотите, чтобы поле ввода отображалось со значением по умолчанию, вы можете установить значение свойства Name вашей модели представления в методе действий.

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

Подача формы и привязка модели

Связывание модели будет работать нормально, если вы используете CreateProduct качестве параметра метода действия HttpPost / параметр с именем name

Выберите «Помощник тегов»

Предполагая, что ваше представление строго типизировано для модели представления, как это

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

И в вашем методе действия GET вы создаете объект этой модели представления, устанавливая свойство Categories и отправляя представление

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

и, на ваш взгляд

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

Это приведет к уменьшению разметки ( включая только соответствующие части формы / поля )

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

Получение выбранного выпадающего значения при отправке формы

Вы можете использовать ту же модель представления, что и параметр метода действия HttpPost

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

Задайте опцию как выбранную

Если вы хотите установить опцию в качестве выбранного параметра, вы можете просто установить значение свойства 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);
}

Отображение выпадающего списка Multi select / ListBox

Если вы хотите отобразить раскрывающийся список с несколькими выборами, вы можете просто изменить свойство модели представления, которое вы используете для asp-for атрибута в своем представлении для типа массива.

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

В представлении

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

Это создаст элемент SELECT с multiple атрибутами

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

Пользовательский тег-помощник

Вы можете создавать собственные тег- ITagHelper реализуя ITagHelper или получая из класса удобства TagHelper .

• Стандартом по умолчанию является таргетинг на тег html, который соответствует имени помощника без дополнительного суффикса TagHelper. Например, WidgetTagHelper будет WidgetTagHelper на <widget> .
• [HtmlTargetElement] может использоваться для дальнейшего контроля за назначением тега
• Любому общедоступному свойству класса может быть присвоено значение в качестве атрибута в разметке бритвы. Например, публичная public string Title {get; set;} может быть присвоено значение как <widget title="my title">
• По умолчанию тег-помощники переводит имена и свойства класса C # класса Pascal для тегов-помощников в нижний кебаб. Например, если вы [HtmlTargetElement] использование [HtmlTargetElement] а имя класса - WidgetBoxTagHelper , тогда в Razor вы напишете <widget-box></widget-box> .
• Process и ProcessAsync содержат логику рендеринга. Оба получают параметр контекста с информацией о текущем отображаемом теге и параметром вывода, используемым для настройки полученного результата.

Любая сборка, содержащая пользовательские тег-помощники, должна быть добавлена ​​в файл _ViewImports.cshtml (обратите внимание, что регистрируется сборка, а не пространство имен):

@addTagHelper *, MyAssembly

Пример виджета Custom Tag Helper

В следующем примере создается специальный помощник тега виджета, который будет нацелен на разметку бритвы, например:

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

Что будет отображаться как:

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

Кодировка, необходимая для создания такого помощника тега, такова:

[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 для свойства модели. Он заменяет метод Html.LabelFor в предыдущих версиях MVC.

Допустим, у вас есть модель:

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

В представлении вы можете использовать label HTML-элемент и asp-for tag helper:

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

Это эквивалентно следующему коду в более ранних версиях MVC:

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

Оба фрагмента кода выше отображают один и тот же HTML:

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

Якорный помощник тега

Якорный помощник тега используется для генерации атрибутов href для привязки к конкретному действию контроллера или MVC-маршруту. Основной пример

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

Иногда нам нужно указать дополнительные параметры для действия контроллера, к которому вы привязываетесь. Мы можем указать значения для этих параметров, добавив атрибуты с префиксом asp-route-prefix.

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