NET 6 - Tag Helper

In this part, we are going to discuss the Tag Helpers list below. A Tag Helper allows to modify or add the HTML element from server-side code.

• Input Tag Helper
• Label Tag Helper
• Textarea Tag Helper
• Radio Button Tag Helper
• Select Tag Helper
• Form Tag Helper

asp-for assign the "name" and "Id" of a input.

Input Tag Helper

<input asp-for="Location" class="form-control" />

The following HTML is generated for Input Location

<input type="text" id="Location" name="Location" value="">

Label Tag Helper

<label asp-for="Name" class="control-label"></label>

The following HTML is generated for Input Label

<label class="control-label" for="Name">Name</label>

Textarea Tag Helper

<textarea asp-for="Description"></textarea>

The following HTML is generated for Description textarea

<textarea name="Description" id="Description" ></textarea>

Radio Button Tag Helper

<input type="radio" asp-for="Gender"/>Male

The following HTML is generated for Gender Radio Button

<input type="radio" name="Gender" value="Male" />

Select Tag Helper

<select asp-for="EventId" class="form-control" asp-items="@(new SelectList(Model.Events,"Id","Name"))"> <option value="">Please select one</option> </select>

The following HTML is generated for EventId Select Tag Helper

<select class="form-control" id="EventId" name="EventId"> <option value="">Please select one</option> <option value="b67ffb74-b92e-414c-98ee-94b647be9b3b">Event 1</option> </select>

Form Tag Helper

asp-action indicate which method to post to in the controller.

<form asp-action="Create"> <div class="form-group"> <input type="submit" value="Create" class="btn btn-primary" /> </div> </form>

The following HTML is generated for Form Tag Helper

<form action="/EventBooking/Create" method="post" novalidate="novalidate"> <div class="form-group"> <input type="submit" value="Create" class="btn btn-primary"> </div> <input name="__RequestVerificationToken" type="hidden" value="CfDJ8GMqD0ErPRBPrFRVCOJwbNix9l8LJPo3gbH4YSx3-OeT3t-NQmuL-nyvt6jee_4CM9aYohl8ZeDeICIWw6S7dQiaeodWObx7_1COltVmctKrHz-bqiGBBAoHsgeeKL_9iW8-lfZ6T1zvgwbyL0390OW2pLNu3vwejlI_lowebZ1-V8crb8DxgF8K1fApUrYWLA"></form>