asp.net-core
Tagga hjälpare

parametrar

Form Tag Helper - Grundläggande exempel

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

Form Tag Helper - Med anpassade ruttattribut

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

Detta genererar nedanstående markering

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

Input Tag Helper

Förutsatt att din vy är starkt typad till en visningsmodell som

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

Och du överför ett objekt av detta till vyn från din handlingsmetod.

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

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

</form>

Detta genererar nedanstående markering.

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

Om du vill att inmatningsfältet ska återges med ett standardvärde kan du ställa in Namnegenskapens värde för din visningsmodell i åtgärdsmetoden.

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

Inlämning av formulär och bindande modell

Modellbindning fungerar bra om du använder CreateProduct som din HttpPost-handlingsmetodparameter / en parameter med name

Välj Tag Helper

Förutsatt att din vy är starkt typ till en visningsmodell som denna

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

Och i din GET-handlingsmetod skapar du ett objekt för den här visningsmodellen, ställer in egenskapen Kategorier och skickar till vyn

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

och enligt din åsikt

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

Detta kommer att göra nedanstående markering ( inkluderar endast relevanta delar av form / fält )

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

Hämta det valda rullgardinsvärdet i formulärinlämning

Du kan använda samma visningsmodell som din HttpPost-metodparameter

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

Ställ in ett alternativ som det valda alternativet

Om du vill ställa in ett alternativ som det valda alternativet kan du helt enkelt ställa in egenskapsvärdet 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);
}

Återge en dropdown / ListBox med flera välj

Om du vill göra en rullgardinsmeny med flera välj kan du helt enkelt ändra din visningsmodellegenskap som du använder asp-for attribut asp-for i din vy till en arraytyp.

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

I vyn

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

Detta genererar SELECT-elementet med multiple attribut

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

Anpassad taghjälpare

Du kan skapa dina egna taghjälpare genom att implementera ITagHelper eller härleda från bekvämlighetsklassen TagHelper .

• Standardkonventionen är att rikta in sig på en html-tagg som matchar hjälparens namn utan tillvalet TagHelper-tillägg. Till exempel kommer WidgetTagHelper att rikta in sig på en <widget> -tagg.
• [HtmlTargetElement] kan användas för att ytterligare kontrollera taggen som riktas
• Varje offentlig egendom i klassen kan ges ett värde som ett attribut i rakknivmarkeringen. Till exempel en offentlig public string Title {get; set;} kan ges ett värde som <widget title="my title">
• Som standard översätter tagghjälparna Pascal-cased C # klassnamn och egenskaper för tagghjälpare till lägre kebabfall. Om du till exempel utelämnar att använda [HtmlTargetElement] och WidgetBoxTagHelper är WidgetBoxTagHelper , kommer du i Razor att skriva <widget-box></widget-box> .
• Process och ProcessAsync innehåller renderingslogiken. Båda får en sammanhangsparameter med information om den aktuella taggen som ges och en utgångsparameter som används för att anpassa det återgivna resultatet.

Alla enheter som innehåller anpassade taghjälpare måste läggas till filen _ViewImports.cshtml (Observera att det är enheten som registreras, inte namnområdet):

@addTagHelper *, MyAssembly

Exempla widget Anpassad taghjälpare

Följande exempel skapar en anpassad widget-tagghjälpare som riktar sig till rakknivmarkering som:

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

Vilket kommer att ges som:

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

Den kodade som behövs för att skapa en sådan tagghjälpare är följande:

[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 användas för att återge label för en modellegenskap. Den ersätter metoden Html.LabelFor i tidigare versioner av MVC.

Låt oss säga att du har en modell:

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

I vyn kan du använda label HTML-element och asp-for tag helper:

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

Detta motsvarar följande kod i tidigare versioner av MVC:

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

Båda kodavsnitten ovan ger samma HTML:

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

Hjälp för ankare tagg

Ankare-tagghjälpare används för att generera href-attribut för att länka till en viss kontrollåtgärd eller MVC-rutt. Grundläggande exempel

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

Ibland måste vi ange ytterligare parametrar för den kontrolleråtgärd som du binder till. Vi kan ange värden för dessa parametrar genom att lägga till attribut med asp-route-prefixet.

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