During this session of ASP.NET Core tutorial, we are going to talk about HTML Helpers in ASP.NET Core and MVC and describe its benefits. Generally, HTML Helper is a Class that we can use its method in View Razor Pages and it renders HTML Tag in our Views. On the other hand, we can use HTML Helper method in our Views instead of regular HTML Tags. Thus, we can say, @html class has different methods to render HTML Tags with variety of overloaded that can help us to serve better Front End view. For instance, below codes are the same result.
|
1 2 3 4 5 6 7 8 9 |
<label name="amount" id="amount" class="form-label">Amount</label> <input name="amount" id="amount" value="" class="form-control" /> @Html.Label("amount", "Amount", new { @class = "form lable" }) @Html.TextBox("amount", "", new { @class = "form-control" }) |
What is HTML Helper in ASP.NET Core?
HTML Helper is a Class that includes several methods with different overloaded version that are used in Razor View Pages instead of HTML Tags.
What are the benefits of using HTML Helper in ASP.NET Core?
- This class contains several overloaded methods same as IPostBackDataHandler that Pre-populate the values of html helpers(it works similar to as ViewStates)
- It has built-in validation capacity for Text Box.
- It has capacity of creating custom HTML Helper that can meet our requirement.
- ViewData/ViewBag data can be bound to View elements easily.
Moreover, using HTML Helper instead of HTML Tag in Razor View Pages has several advantages.
- @Html class contains several overloaded methods same as IPostBackDataHandler that Pre-populate the values of html helpers and it works similar to ViewStates
- It has built-in validation capacity for Text Box and facilitate form validation.
- HTML Helper has capacity of creating custom HTML Helper that can meet our requirement and able us to customize HTML Tags.
- ViewData/ViewBag data can be bound to View elements more easily than the way that we use HTML Tags.
Using HTML Helper in MVC Views
In this session we cover four HTML Helper methods as shown below and will continue this topic in further sessions:
- List()
- TextBox()
- TextArea()
- DropDownList()
We can use @Html class methods in our Razor Page Views and call their required overloaded version to meet our purpose. Also, we can customize element attributes same as Style, Redaonly, Class and etc. as shown below and in this session Video.
Below piece of code reveals the way that we can use mentioned Helper in Razor View Page.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
@model CreateCostViewModel @{ ViewBag.Title = "Create New Cost Record"; } <div class="row"> <div class="alert alert-primary col-lg-6 offset-lg-3 mt-5" role="alert"> <h2>Create Cost Record</h2> </div> <form class="col-lg-6 offset-lg-3 border border-1"> <div> @Html.Label("amount", "Amount", new { @class = "form lable" }) @Html.TextBox("amount", "", new { @class = "form-control" }) </div> <div> @Html.Label("date", "Date", new { @class = "form lable" }) @Html.TextBox("date", "", new { @class = "form-control" }) </div> <div> @Html.Label("category", "Category", new { @class = "form lable" }) @Html.DropDownList("category", new List<SelectListItem> { new SelectListItem{Text = "Grocery", Value = "Grocery" }, new SelectListItem{Text = "Bill", Value = "Bill" }, new SelectListItem{Text = "Rent", Value = "Rent" }, new SelectListItem{Text = "Home Appliance", Value = "Home Appliance" }, }, "Select Category", new { @class = "form-control" }) </div> <div> @Html.Label("comment", "Comment", new { @class = "form lable" }) @Html.TextArea("comment", "", new { @class = "form-control" }) </div> <div class="mt-2"> <button type="submit" class="btn btn-primary btn-block mb-1">Create</button> </div> </form> </div> |
and the result of below code is as shown in below figure.
If you need more details, watch this session video. Also, for being updated about our coming sessions, follow us on Instagram, Facebook, Telegram or YouTube. Also you can have access to list of all sessions HERE.
You can download this Session Slides form HERE