Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Asp.Net MVC Html Helper Password Field (@Html.Password) with Example

Dec 6, 2016
Introduction

Here I will explain how to use html helper password textbox field in
asp.net mvc with example or @Html.passwordfor in asp.net mvc for textbox field with example or asp.net mvc create password textbox using html helper @Html.Passwordfor field with example or asp.net mvc html helper password field example. In asp.net mvc by using html helper properties @Html.Password or @Html.Passwordfor we can easily create password textbox field without using DataAnnotations Password property.


Generally in asp.net mvc by adding Data Annotation property Password to model properties we can easily convert normal textbox as password textbox instead of that directly by using html helper properties @Html.Password or @Html.Passwordfor we can easily implement password textbox in asp.net mvc .

By using @Html.Password we can create password textbox easily in asp.net mvc that would be like as shown below


@Html.Password("txtpassword")

When we execute above statement it will return HTML result like as shown below


<input type="password" name="txtpassword" id="txtpassword" />

In another way by using strongly typed property @Html.PasswordFor we can create password textbox that would be like as shown below


@Html.PasswordFor(model => model.Password)

When we execute above statement it will return HTML result like as shown below


<input id="Password" name="Password" type="password">


This is how we can create password textbox fields in asp.net mvc .

We will see how to implement Password textbox with example for that create asp.net mvc application and Open visual studio à Go to File à Select New à Project like as shown below.

Once we select Project new popup will open in that select Asp.Net Web Application and give name to application and click OK like as shown below

Once click OK new popup will open in that select Empty template and select folders and core reference as MVC and click OK like as shown below

Once we finished creating application our project structure will be like as shown below

Now right click on your Models folder à select Add à select Class like as shown below.

Once we add new model (UsersModel) open it and write code like as shown below.


using System.ComponentModel.DataAnnotations;

namespace MVCExamples.Models
{
public class UsersModel
{
[Key]
public int UserId { get ; set; }
[RegularExpression("^[a-zA-Z]*$", ErrorMessage = "Only Alphabets are Allowed")]
[Required(ErrorMessage="Please Enter Username")]
public string UserName { get ; set; }
[Required(ErrorMessage="Please Enter Password")]
public string Password { get ; set; }
[Required(ErrorMessage="Please Enter Confirm Password")]
[Compare("Password",ErrorMessage= "Both Password and Confirm Password Must be Same" )]
public string ConfirmPassword { get; set; }
[Required(ErrorMessage="Please Enter Location")]
public string Location { get ; set; }
}
}

If you observe above code we added DataAnnotations reference and added properties Required, Compare, RegularExpression, DataType properties to compare multiple properties, allow only alphabets in username field, create password textbox, etc. based on our requirements.

Now add new controller for that right click on your Controllers folder à select Add à select Controller like as shown below.

Once we click on Controller new popup will open in that select MVC 5 Controller - Empty and click Add like as shown below.

Once click on Add new window will open in that give name of controller and click Add button then new controller file will add to folder. Now open new controller (UserController) and write the code like as shown below


using System.Web.Mvc;

namespace MVCExamples.Controllers
{
public class UserController : Controller
{
// GET: User
public ActionResult Index()
{
return View();
}
public ActionResult UserRegistration()
{
return View();
}
}
}

Now right click on UserRegistration method and select Add View like as shown below

    
Once click Add View new template will open in that select Template type “Create” and Model class as our “UsersModel” and click Add like as shown below.
Once we create view open your view and modify password textbox fields like as shown in following code.


@model MVCExamples.Models.UsersModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>UserRegistration</title>
</head>
<body>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
<h4>UsersModel</h4>
<hr />
@Html.ValidationSummary(true, "" , new { @class = "text-danger" })
<div class="form-group">
@ Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.UserName, new { htmlAttributes = new { @class = "form-control" } })
@ Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@ Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.PasswordFor(model => model.Password, new { htmlAttributes = new { @class = "form-control" } })
@ Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@ Html.LabelFor(model => model.ConfirmPassword, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.PasswordFor(model => model.ConfirmPassword, new { htmlAttributes = new { @class = "form-control" } })
@ Html.ValidationMessageFor(model => model.ConfirmPassword, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@ Html.LabelFor(model => model.Location, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Location, new { htmlAttributes = new { @class = "form-control" } })
@ Html.ValidationMessageFor(model => model.Location, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
</body>
</html>

Now run your application and check the output that will be like as shown below

Asp.Net MVC Model Validations using Data Annotations Example

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

5 comments :

Unknown said...

very good

R V said...

I learned how to create the template with short way, It is very useful info and such a great work Suresh

Anonymous said...

provide download link please

Anonymous said...

awesome tutorial

Anonymous said...

i have learn lot from your tutorial.you give good examples by palani

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.