Tag Helper – przykłady użycia. DSP16 – część 16

Tag Helper ma pomóc w czytelności kodu i moim zdaniem jest to elegancka sprawa. Możemy wyróżnić kilka różnych Tag Helperów:

• Anchor Tag Helper
• Form Tag Helper
• Label Tag Helper
• Input Tag Helper
• Text Area Tag Helper
• Select Tag Helper
• Validation Tag Helper
• Environment Tag Helper
• Link and Script Tag Helpers
• Image Tag Helper
• Cache Tag Helper

Tag Helper – przykłady użycia.

<!-- Odpal widok "Index" z kontrolera "Venue" -->
<a asp-action="Index" asp-controller="Venue">All Venues</a>

<!-- Odpal widok "Chart" z kontrolera "Player" z argumentem 1.
Kod w kontrolerze: public IActionResult Chart(int? id) -->
<a asp-action="Chart" asp-controller="Player" asp-route-id="1">All Player</a>

Tworzenie pól w widoku na podstawie klasy i walidacja:

public class Player
{
	[Required]
	[MinLenght(5)]
	public string Name { get; set; }
	[Required]
	public string Surname { get; set; }
	public string Email { get; set; }
	public string Mobile { get; set; }
	public Player Friend { get; set; }
}

<!--Tworzenie labelu w cshtml -->
<label asp-for="Name"></label>
<!-- HTML -->
<label for="Name">Name</label>

<!-- Dodawanie klasy CSS --> 
<label asp-for="Name" class="col-md-2 control-label"></label> 
<!-- HTML -->
<label class="col-md-2 control-label" for="Name">Name</label>

<!-- Textarea -->
<textarea asp-for="Descrition" class="form-control"></textarea>
<!-- HTML -->
<textarea class="form-control" data-val="true" data-val-required="The Descrition field is required." id="Descrition" name="Descrition"></textarea>

<!-- Drop down list z Enumem z dniami tygodnia -->
<select asp-for="Day" asp-items="Html.GetEnumSelectList<DayOfWeek>()" class="col-md-10 form-control"></select>
<!-- HTML -->
<select class="col-md-10 form-control" data-val="true" data-val-required="The Day field is required." id="Day" name="Day">
<option value="0">Sunday</option>
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
</select>

<!-- Drop down list z dodatkową wartością -->
<select asp-for="Day" asp-items="Html.GetEnumSelectList<DayOfWeek>()" class="col-md-10 form-control">
   <option value="">Choose date</option>
</select>
<!-- HTML -->
<select class="col-md-10 form-control" data-val="true" data-val-required="The Day field is required." id="Day" name="Day">
 <option value="">Choose date</option>
 <option value="0">Sunday</option>
 <option value="1">Monday</option>
 <option value="2">Tuesday</option>
 <option value="3">Wednesday</option>
 <option value="4">Thursday</option>
 <option value="5">Friday</option>
 <option value="6">Saturday</option>
</select>

<!-- Formatowanie liczb --> 
<input asp-for="FloatNumber" asp-format="{0:N4}"/>

<!-- Walidacja danych. Pole 'Name' ma atrybut 'Required'. --> 
<span asp-validation-for="Name" /> 
<!-- HTML -->
<span class="text-danger field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true">
</span>

<!-- Wyświetlenie wyników walidacji --> 
<div asp-validation-summary="ValidationSummary.All" class="text-danger"></div> 
<!-- HTML -->
<div class="text-danger validation-summary-valid" data-valmsg-summary="true"><ul><li style="display:none"></li>
</ul></div>

<!-- W ramach walidacji można dodać jquery.
Na początku kod js jest pobierany z lokalizacji, która jest podana w src. Jeżeli nie powiedzie się ta operacja, to asp-fallback-src definiuje skąd następnie strona ma próbować pobrać dane--> 
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js" asp-fallback-src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script> 
<script src="//ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.js" asp-fallback-src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>

<!-- artybut asp-append-verision generuje unikalny link do obrazka przy każdym odświeżeniu strony. Dzięki temu kiedy będzie podmieniony obrazek mamy pewność, że użytkownik zobaczy "świeży" obrazek. -->
<img src="~/images/poker.png" alt="Poker" asp-append-version="true" />

<!-- Jest również możliwość poruszania się po właściwościach --> 
<label asp-for="Friend.Name" />

 

Linki

https://www.exceptionnotfound.net/tag-helpers-in-asp-net-core-1-0-an-overview/

http://www.jerriepelser.com/blog/using-enum-aspnet-5-select-taghelper

http://www.davepaquette.com/archive/2015/05/11/cleaner-forms-using-tag-helpers-in-mvc6.aspx