Password Field and Hidden Field HTML Helper in ASP.NET MVC

In this article, I am going to discuss how to generate Password Field and Hidden Field in ASP.NET MVC Application using the HTML Helper method. Please read our previous article before proceeding to this article where we discussed how to use Editor HTML Helper in MVC application to generate input HTML elements. We are going to work with the same application that we worked in our previous article. As part of this article, we are going to discuss the following pointers.

Password HTML Helper in ASP.NET MVC:

The HtmlHelper class provides two extension methods which we can use to generate a password field of <input type=”password”> in an MVC view. These two extension methods are Password() and PasswordFor().

We are going to use the following Login model to understand the Password() and PasswordFor() HTML Helper method.

Create LoginModel within in the Models folder as shown below

namespace HTML_HELPER.Models
{
    public class LoginModel
    {
        public int LoginId { get; set; }
        [Display(Name = "Name")]
        public string loginName { get; set; }
        public string LoginPassword { get; set; }
    }
}

Create LoginController within Controllers Folder:

Copy and Paste the following code in LoginController

namespace HTML_HELPER.Controllers
{
    public class LoginController : Controller
    {
        public ActionResult Login()
        {
            return View();
        }
    }
}

The Password() HTML Helper method in MVC:

The Html.Password() HTML Helper method in MVC is used to generates an input password element with a specified name, value, and HTML attributes. The signature of Password() Helper Method is shown as below

MvcHtmlString Html.Password(string name, object value, object htmlAttributes)

Change the RouteConfig File, set the Login Action method of Login Controller as default Route.

namespace HTML_HELPER
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Login", action = "Login", id = UrlParameter.Optional }
            );
        }
    }
}

Create Login View and Copy and Paste the Following code

@model HTML_HELPER.Models.LoginModel
@Html.Password(“LoginPassword”)

Run the application and inspect the HTML for the password field text box. It will generate the following HTML for Password field.
<input id=”LoginPassword” name=”LoginPassword” type=”password”>

The PasswordFor() HTML Helper Method in ASP.NET MVC:

The PasswordFor() HTML helper method is the strongly typed extension method. This method is used to generate an element of type <input type=”password”>. The name should be specified using a lambda expression.

The PasswordFor() HTML Helper method binds a specified model object property to the password element. As a result, it automatically sets the value of the model property to the password field. The PasswordFor() HTML Helper Method Signature is shown below:

MvcHtmlString Html.PasswordFor(Expression<Func<dynamic, TProperty>> expression, object htmlAttributes)

Modify the Login View as shown below.
@model HTML_HELPER.Models.LoginModel
@Html.PasswordFor(m => m.LoginPassword)

It will generate the following HTML Code.
<input id=”LoginPassword” name=”LoginPassword” type=”password”>

In the above example, the first parameter of the PasswordFor() helper method is a lambda expression that specifies the model property to be bind with the password field textbox.

The Hidden Filed HTML Helper Method in ASP.NET MVC:

The hidden field HTML Helper method is used when we need to store the hidden values on a webpage. We need this when we don’t want to show the values to the end-users but we need these values to update the data when the form is submitted to the server. The HtmlHelper class in ASP.NET MVC provides two extension methods to generate a hidden field of type (<input type=”hidden”>) in an MVC razor view. The two methods are Hidden() and HiddenFor().

In this demo, we are going to use the following Student model to understand the Hidden() and HiddenFor() HTML Helper method. So, create the following Student Model within the Models folder of your application.

namespace HTML_HELPER.Models
{
    public class LoginModel
    {
        public int LoginId { get; set; }
        [Display(Name = "Name")]
        public string loginName { get; set; }
        public string LoginPassword { get; set; }
    }
}

The Hidden() HTML Helper method in MVC:

The Hidden() HTML Helper method is used to generate an input hidden field element with a specified name, value, and HTML attributes. the Signature of the Hidden HTML Helper Method is shown below:

MvcHtmlString Html.Hidden(string name, object value, object htmlAttributes)

The following example creates a hidden field for LoginId property of the Login model. It binds the LoginId with the hidden field so that it can assign the value of LoginId to the hidden field and visa-versa is also true.

Html.Hidden() in Razor View

@model HTML_HELPER.Models.LoginModel
@Html.Hidden(“LoginId”,1)

Html Result:
<input data-val=”true” data-val-number=”The field LoginId must be a number.”
data-val-required=”The LoginId field is required.” id=”LoginId”
name=”LoginId” type=”hidden” value=”1″>

HiddenFor() HTML Helper Method in ASP.NET MVC:

The HiddenFor() HTML Helper method is the strongly typed extension method which is used to generates an input element hidden for the model property which is specified by using a lambda expression. This HTML Helper method binds a specified model object property to <input type=”hidden”> element. So that it automatically sets the value of the model property to the hidden field and the visa-versa is also true. The HiddenFor() HTML Helper Method Signature is given below.

MvcHtmlString Html.HiddenFor(Expression<Func<dynamic, TProperty>> expression)

HiddenFor() in Razor View

@model HTML_HELPER.Models.LoginModel
@Html.HiddenFor(m => m.LoginId)

In the above example, the first parameter in HiddenFor() method is the lambda expression which specifies the model property to be bind with the hidden field. We have specified the LoginId property of the model object in our example.

In the next article, I am going to discuss the Template Helpers in ASP.NET MVC application with examples. Here, in this article, I try to explain how to generate Password Field and Hidden Field in ASP.NET MVC Application using the HTML Helper method. I hope this article will help you with your needs.