« Previous Next »

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

Password HTML Helper in ASP.NET MVC:

The HtmlHelper class offers two extension methods to create a password field (<input type="password">) in an MVC view. These methods are Password() and PasswordFor(). To understand how these methods work, we will use the following Login model as an example.

Create a LoginModel inside the Models folder as demonstrated 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 a LoginController inside the Controllers folder.

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 explained:

The Html.Password() HTML Helper method in MVC is used to create an input password field with a specified name, value, and HTML attributes. The method's signature is shown below.

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

Modify the RouteConfig file and set the Login action method of the LoginController as the 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 the Login view and insert the following code.

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

Execute the application and examine the HTML for the password field textbox. It will produce the following HTML for the password field.

<input id=”LoginPassword” name=”LoginPassword” type=”password”>

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

The PasswordFor() HTML helper method is a strongly typed extension method. It is used to create an <input type="password"> element, where the name is defined using a lambda expression.

The PasswordFor() HTML helper method is a strongly typed extension method. It is used to create an <input type="password"> element, where the name is defined using a lambda expression.

MvcHtmlString Html.PasswordFor(Expression<func<dynamic, tproperty>> expression, object htmlAttributes)

Update the Login view as demonstrated 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”>

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

The hidden field HTML Helper method is used to store values on a webpage without displaying them to the user. This is useful when certain values need to be retained and sent to the server upon form submission.

In ASP.NET MVC, the HtmlHelper class offers two extension methods to generate a hidden input field (<input type="hidden">) in an MVC Razor view:

  • Hidden()
  • HiddenFor()

In this demonstration, we will use the Student model to explore the Hidden() and HiddenFor() HTML Helper methods. To do this, create the following Student model inside 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 creates a **hidden input field** with a specified name, value, and HTML attributes. The method's signature is shown below.

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

The example below generates a hidden field for the LoginId property of the Login model. It links LoginId to the hidden field, allowing the value to be assigned both to and from the field.

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″>

In the example above, the first parameter of the HiddenFor() method is a lambda expression that defines the model property to be linked to the hidden field. In our case, we have specified the LoginId property of the model.

« Previous Next »