Skip to main content

ASP.NET MVC HTML Helpers


ASP.NET MVC HTML Helpers

What are Html Helpers?

An HTML Helper is simply a method that returns a HTML string. The string can represent any type of content that you want. For example, you can use HTML Helpers to render standard HTML tags like HTML <input>, <button> and <img> tags etc.
                 
Helper class can create HTML controls programmatically. HTML Helpers are used in View to render HTML content. It is not mandatory to use HTML Helper classes for building an ASP.NET MVC application, but HTML Helpers helps in the rapid development of a view.

You can also create your own HTML Helpers to render more complex content such as a menu strip or an HTML table for displaying database data.

Categories of HTML Helpers?


1.     Built-in HTML Helpers
2.     Inline HTML Helpers
3.     Custom HTML Helpers

Built-in HTML Helpers are also categorized into three, these are;

a.     Standard HTML Helpers
b.     Strongly typed HTML Helpers
c.      Templated HTML Helpers

Standard HTML Helpers


Standard HTML Helpers are used to render the most common type of HTML controls like TextBox, DropDown, Radio buttons, Checkbox etc. Extension methods of HTML Helper classes have several overloaded versions. We can use any one according to our requirement. Let’s see some of the Standard HTML Helpers:

Form


This HTML Helper is used for creating form element, BeginForm and EndForm extension methods are mostly used for HTML form rendering.



From the above image, we can see that the form helper syntax as @HTML.BeginForm() with some arguments such as action method (Create), Controller (Documents), Form method (POST). It is enclosed in the using statement because it implements IDisposable interface.

Label

The Label method of HTML helper can be used for generating label element. Label extension method have 6 overloaded versions.


TextBox


The TextBox Helper method renders a textbox in View that has a specified name. We can also add attributes like class, placeholder etc. with the help of overloaded method in which we have to pass objects of HTML Attributes.


DropDownList


The DropDownList helper renders a drop down list.


Strongly Typed HTML Helpers

Strongly typed helpers are helpers that require lambda expression and strongly typed views as we can see below. Just like Standard Helper, we have several strongly typed methods.
Html.TextBoxFor(), Html.TextAreaFor(), Html.DropDownListFor(), Html.CheckboxFor(), Html.RadioButtonFor(), Html.ListBoxFor(), Html.PasswordFor(), Html.HiddenFor(), Html.LabelFor(), etc.


Template HTML Helpers

These methods are very flexible and generate the HTML element based on the properties of the model class.
The example of these helpers can be seen in the application we built in our previous articles where we scaffold our controller thereby creating action methods and views for us as can be seen below.

Inline HTML Helpers


These are create in the same view by using the Razor @helper tag. These helpers can be reused only on the same view. This is as shown below
 

Custom HTML Helpers

You can also create your own custom helper methods by creating an extension method on the HtmlHelper class or by creating static methods with in a utility class as shown below


Thank you


Comments

Popular posts from this blog

Classes in C# Explained

C# Class Explained A class is nothing but an encapsulation of properties and methods that are used to represent a real-time entity, as explained by Guru99 . For instance, if you want to work with Guest’s data as in our previous DataDriven Web application . The properties of the Guest would be the Id, GuestName, Address, Phone number etc of the Guest. The methods would include the entry and modification of Guest data. All of these operations can be represented as a class in C# as shown below. using System; namespace CsharpnaijaClassTutorial {     public class Guest     {         public int Id { get ; set ; }         public string GuestName { get ; set ; }         public string Address { get ; set ; }         public string WhomToSee { get ; set ; }     ...

ASP.NET MVC Routing

ASP.NET MVC Routing ASP.NET MVC routing is a pattern matching system that is responsible for mapping incoming browser requests to specified MVC controller actions. When the ASP.NET MVC application launches then the application registers one or more patterns with the framework's route table to tell the routing engine what to do with any requests that matches those patterns. When the routing engine receives a request at runtime, it matches that request's URL against the URL patterns registered with it and gives the response according to a pattern match. Routing pattern is as follows A URL is requested from a browser, the URL is parsed (that is, break into controller and action), the parsed URL is compared to registered route pattern in the framework’s route table, if a route is found, its process and send response to the browser with the required response, otherwise, the HTTP 404 error is send to the browser. Route Properties ASP.NET MVC routes are res...

Role-Based Authorization in ASP.NET MVC

Role-Based Authorization Explained The most challenge aspect of any web application is implementing its security. In traditional web development with ASP.NET (from version 2.0 onwards), we have been using Membership and Role providers. These providers allows us to define Roles, Users and assign roles to users which helps us to manage Authorization. But with an increase in social networking and global authentication providers, we needed an upgraded membership system. ASP.NET Identity is the new membership system for building ASP.NET web applications, phone, store, or hybrid applications using social identities for authentication and authorization. So we can now use Windows Live (e.g. Hotmail), Gmail, Facebook and Twitter for authentication before the user starts using our web application. For internal application, we need to create users and roles for providing users access to creating items, products or managing other users. Necessary references are provided by MVC 5 applicatio...