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.
In previous articles I explained asp.net create password textbox dynamically from model, jQuery 360 degree image view examples, fragment caching in asp.net with example, upload files in asp.net without postback example, Insert data from gridview to database in asp.net, bootstrap autocomplete textbox example in asp.net, Use mysql database in asp.net with examples and many
articles relating to
asp.net
mvc
, asp.net, c#,vb.net
.
Now I will explain how to create password textbox field using html helper
properties @Html.Password or @Html.Passwordfor in
asp.net
mvc
with example.
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
.
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
|
select Add
à
select Class
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
|
.
