Complete Example of Html.Password and Html.PasswordFor – ASP.NET MVC 5

What is Html.Password Helper Class?

Html.Password Helper class generates password input fields in a web form that is used to ask and validate user password. The characters entered in password field is masked with special character * (asterisk) or whatever you set on it.

Difference between Html.Password and Html.PasswordFor Helper Class

Html.Password and Html.PasswordFor both generates the password input field but still, they are different in nature. Html.Password is a basic type, loosely typed Helper class that is not bounded with the model property. Html.PasswordFor is a strongly typed class that is bounded by the model property. It is always advisable to use Html.PasswordFor class because it is secure, error-free, check errors on compile time and easy to use.

Define

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

@Html.Password("BasicPassword")

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

@Html.PasswordFor(m => m.ConfirmPassword)

Complete Programming Example

using System.ComponentModel.DataAnnotations;

namespace HtmlHelperDemo.Models
{
    public class UserModel
    {
        public int UserId { get; set; }
        public string UserName { get; set; }

        [Required(ErrorMessage ="Password is Required.")]
        public string Password { get; set; }

        [Required(ErrorMessage = "Confirmation Password is Required")]
        [Compare("Password", ErrorMessage = "Password Must Match")]
        public string ConfirmPassword { get; set; }
    }
}

@using HtmlHelperDemo.Models
@model UserModel

<h1>Html.PasswordFor Example</h1>

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
    //Basic password Field Example
    @Html.Password("BasicPassword")
    <br />
    //Strongly Typed Hidden Field
    @Html.PasswordFor(m => m.Password)
    @Html.ValidationMessageFor(m=>m.Password, "", new { @class = "error"})
    <br />
    @Html.PasswordFor(m => m.ConfirmPassword)
    @Html.ValidationMessageFor(m => m.ConfirmPassword, "", new { @class = "error" })
    <br /><br />
    <input id="Submit" type="submit" value="submit" />
}

<hr />

<p><strong>Value:</strong> @ViewBag.BasicPassword</p><br />
<p><strong>Value:</strong> @ViewBag.StrongPassword</p><br />

using System.Web.Mvc;
using HtmlHelperDemo.Models;

namespace HtmlHelperDemo.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {            
             return View();
        }

        [HttpPost]
        public ActionResult Index(FormCollection fc, UserModel um)
        {
            if (ModelState.IsValid)
            {
                ViewBag.BasicPassword = fc["BasicPassword"];

                ViewBag.StrongPassword = um.ConfirmPassword;
                return View(um);
            }
            else
            {
                return View();
            }
        }
    }
}

<form action="/" method="post"><input id="BasicPassword" name="BasicPassword" type="password" />    <br />
<input data-val="true" data-val-required="Password is Required." id="Password" name="Password" type="password" /><span class="field-validation-valid error" data-valmsg-for="Password" data-valmsg-replace="true"></span>    <br />
<input class="input-validation-error" data-val="true" data-val-equalto="Password Must Match" data-val-equalto-other="*.Password" data-val-required="Confirmation Password is Required" id="ConfirmPassword" name="ConfirmPassword" type="password" /><span class="field-validation-error error" data-valmsg-for="ConfirmPassword" data-valmsg-replace="true">Password Must Match</span>    <br /><br />
    <input id="Submit" type="submit" value="submit" />
</form> 

Summary

In this tutorial, you learned how to user Html.Password Helper class for generating Password input box in a web form. You also learned how to validate password field and send data back to the controller. In the next chapter, you will learn Html.Display Helper Class.