HTML helpers in MVC

HTML Helper methods are predefined methods in ASP.Net MVC to work with HTML forms.
HTML helper methods generate specific HTML tags on browser.

In this blog, we will see HTML Helpers in details.

For eg – HTML helper @Html.TextBoxFor(model=>model.ProductName) output is <input type=”text” name=”ProductName”>

Note – ProductName is a property in our Model.

Similarly for TextBoxArea, @Html.TextBoxAreaFor(model=>model.ProductDescription)

@Html.BeginForm() is rendered as <form> </form>

For Textbox, you may either use @Html.TextBox or @Html.TextBoxFor.
@Html.TextBoxFor is strongly typed HTMLHelper

You may use traditional HTML tags that will not cause any issue.
But, HTML helpers method make it easy and it is directly linked with our modal class.

Below are the few HTML helpers that I have used in my recent MVC application.

HTML Helper
For HTML inputs
Radio button

A basic form created with the help of HTML helper methods.

<div class="form-group">
                                    @Html.Label("Product/Service or anything")
                                    @Html.TextBoxFor(model => model.ReviewFor, new { placeholder = "Example: iPhone 7, Dell Laptop, Samsung TV" })
                                    @Html.ValidationMessageFor(model => model.ReviewFor, "", new { @class = "text-danger" })
                                <div class="form-group">
                                    @Html.Label("Review Title")
                                    @Html.TextBoxFor(model => model.ReviewTitle, new { placeholder = "Example: iPhone 7 is amazing. I love this product" })
                                    @Html.ValidationMessageFor(model => model.ReviewTitle, "", new { @class = "text-danger" })
                                <div class="form-group">
                                    @Html.Label("Product/Service Brand")
                                    @Html.TextBoxFor(model => model.ProductBrand, new{ placeholder = "Example: Apple" })
                                    @Html.ValidationMessageFor(model => model.ProductBrand, "", new { @class = "text-danger" })

Other blogs on MVC –

Please follow and like us:

Leave a Comment