How do I convert a textbox type to password in asp.net mvc?
Just write in Razor View i.e. in .cshtml file below line
#Html.PasswordFor(m=>m.Password)
Here m is model object and password is the password field name.
You mean <%=Html.Password("test")%>?
Either use the HTML helper function Password:
<%= Html.Password("Password") %>
or use the type parameter on an input field:
<input name="password" type="password" />
See listings 4 and 5 on this page
There are many types of using password-typed textboxes in ASP. NET MVC
With html controls it would be like;
<input type="password" name="xx" id="yy">
With Razor-syntax it would be like;
#Html.Password(name, value, html_attributes)
Or in a strongly typed view you could write
#Html.PasswordFor(model=>model.Password)
When using a strong-typed view and bootstrap, use the following code to make sure the password field is properly styled:
#Html.PasswordFor(model => model.Password, new { #class = "form-control" })
below is extention based on html helper:
before converting:
#Html.TextBox("mypass", null, new { style = "width: 200px;" })
After converting:
#Html.Password("mypass", null, new { style = "width:200px;" })
hope helps someone.
<div class="editor-field">
#Html.PasswordFor(model => model.Password, new { htmlAttributes = new { #class = "form-control", placeholder = "Password" } })
#Html.ValidationMessageFor(model => model.Password)
</div>
In .cshtml file:
#Html.PasswordFor(modal => modal.Password)
Another way is to add #type = password to your html.texbox() attributes like so:
before converting:
#Html.TextBox("mypass", null, new { #class = "" })
After converting:
#Html.TextBox("mypass", null, new { #class = "", #type = password })
This will mask your text box text with circles instead of text. It does this, because the #type = password attribute tells your text box that it is of type "password".
This method of converting your text box to type password is an easy quick way to to make the conversion from your standard razor form text box.
#Html.EditorFor(model => model.Password,
"Password",
new { htmlAttributes = new { #class = "form-control" } })
Convert textbox type to password in asp.net mvc
#Html.EditorFor(model => model.Password, new { htmlAttributes = new { #class = "form-control", placeholder = "Password", #type="Password" } })
Related
We tried to use Autocomplete attribute of textbox and dynamic value on name attribute of textbox but unable to disbale autocomplete option on Google Chrome but it work perfectly fine on IE, Firefox.
You can try this way
If the input is inside the form, you should do like this:
<form autocomplete="off">
And the input you should do
<input type="text" id="input_name" autocomplete="none"/>
This is a sample block using Razor
<div class="position-relative form-group">
#Html.LabelFor(m => m.EmailAddress, new { #class = "control-label" })
#Html.TextBoxFor(m => m.EmailAddress, new { #class = "form-control", #autocomplete = "off" })
#Html.ValidationMessageFor(m => m.EmailAddress, "", new { #class = "text-danger", #style = "font-style:italic;" })
</div>
Hope this one helps
How do I specify the Value that should be entered into the Textbox. I dont want to use dropdownlist. I want to accept only these three (3) values Nigeria, Ghana and Togo
If any other value is entered it should not save or hide or disable the Save button.
View
<div class="col-md-12">
<div>
#Html.LabelFor(model => model.COUNTRY_NAME, "Country Name")
#Html.TextBoxFor(model => model.COUNTRY_NAME, new { #style = "border-radius:3px;", #type = "text", #class = "form-control", #placeholder = "Country Name", #autocomplete = "on" })
#Html.ValidationMessageFor(model => model.COUNTRY_NAME, null, new { #class = "text-danger" })
</div>
</div>
Please how do I achieve this?
There are two Options
You can use Server side Custom Validator for Country_Name property.
Or Jquery validation on client side.
When you submit the form, you can validate textbox value by jQuery.
<button onclick="validateData();"></button>
Then write a validation method as follows.
function validateData() {
if (Nigeria, Ghana and Togo) {
//ajax post to your controller
} else {
//return error message
}
}
I am working an asp.net mvc in visual studio 2013 and one of the fields is a date input but when clicking in the field and having focus in the field the automatic HTML5 datepicker does not come up. If I put the field in manually it comes up but then it doesn't map to that particular field. In the data annotations I have included [DataType(DataType.Date)] but this doesn't bring up the HTML5 date picker. How do I achieve this in asp.net below is the code for the field in particular
<div class="form-group">
#Html.LabelFor(model => model.CustomerJoinDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CustomerJoinDate, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CustomerJoinDate, "", new { #class = "text-danger" })
</div>
</div>
Can't remember exactly when this was added but in older versions of ASP.NET MVC you could either modify the default editor template to add support for it or use TextBoxFor which allows you to specify any custom attributes:
#Html.TextBoxFor(model => model.CustomerJoinDate, new {
#class = "form-control",
type = "date"
})
If you want your DateTime model properties to use the same template without having to repeat the same Razor code over and over, define a partial view called DateTime.cshtml (or DateTime.vbhtml) in your Shared/EditorTemplates folder, with content similar to:
#model DateTime
#Html.TextBoxFor(
m => m,
"{0:MM/dd/yyyy}",
new { #class = "form-control date", type = "date" })
Then replace your Razor bindings with:
#Html.EditorFor(model => model.CustomerJoinDate)
and so on, for each date field which should use this template.
This uses an overload of TextBoxFor that allows you to specify a format string for the input, which is helpful for "masking" the time portion of the DateTime value (assuming you only want to enter a date).
Since not every browser supports a native datepicker, you could use the date class in this example to apply a polyfill as necessary (or simply use type=date as your selector).
MVC 5.1 now supports using html attributes directly like so. You should be able to put date into the type attibute.
<div class="form-group">
#Html.LabelFor(model => model.CustomerJoinDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CustomerJoinDate, new { htmlAttributes = new { #class = "form-control", type = "date" } })
#Html.ValidationMessageFor(model => model.CustomerJoinDate, "", new { #class = "text-danger" })
</div>
See Darin's answer regarding input type="date" via TextBoxFor
"...but when clicking in the field and having focus in the field the automatic HTML5 datepicker does not come up"
At the base level, not all browsers have "native" implementation of a "datepicker", so you'll likely need to implement a plugin to work across browsers (e.g. bootstrap datepicker and such)
Example:
<p>
See if you get a datepicker in Firefox (as of v40.0.2):
<br />
<input type="date" name="foo" />
</p>
Hth...
I want to know how to as would be add more attribute for a text box html element
Eg.
#Html.TextBoxFor(model => model.DBFIELDFROMTABLE, "CustomTemplate", new { #class = "form-control"})
i want add Maxlength
#Html.TextBoxFor(model => model.DBFIELDFROMTABLE, "CustomTemplate", new { #class = "form-control"})
Just add another item to the Html Attributes object. You can add as many as you like separated by command.
#Html.TextBoxFor(model => model.DBFIELDFROMTABLE, "CustomTemplate", new { #class = "form-control", maxlength = "10"})
I have the following inside my asp.net mvc web application :-
<div><span class="f">Data Center Name</span> #Html.EditorFor(model => model.Switch.TMSRack.DataCenter.Name, new { disabled = "disabled" })</div>
but the field will not be disabled ,, can anyone adivce please?
THanks
#Html.EditorFor() does not have an overload to support htmlAttributes. You could try #Html.TextBoxFor()
#Html.TextBoxFor(model => model.propertyName, new {disabled= "disabled" })
If you are using system key words such as class in htmlAttributes please add # before the attribute name.
Ex:
#Html.TextBoxFor(model => model.propertyName, new {#class = "disabledClass" })
Using MVC 5, #Html.EditorFor() supports htmlAttributes
#Html.EditorFor(model => model.x, new { htmlAttributes = new { #class = "form-control", #disabled = "disabled" } })
The above example shows how you can add a class and also the disabled attribute
Another alternative: surround the EditorFor with a div or a span with a certain id, and then use a bit of jquery/js:
<span id="editors">
#Html.EditorFor(x => x.ViewModelProperty)
</span>
<!-- Disable above editors. EditorFor doesn't allow html attributes unfortunately. -->
<script type="text/javascript">
$(function () { $('#editors :input').attr("disabled", true); });
</script>
For those that lose your text value : Disabled fields does not pass its value to the controller. Instead, use #readonly = "readonly"
#Html.EditorFor(model => model.EmployeeCode, new { htmlAttributes = new { #readonly = "readonly", #class = "form-control"} })
If you lose information when you accept the Edit-changes ...
You could try
<h3>#Model.x</h3>
#Html.HiddenFor(model => model.x, new { htmlAttributes = new { #class = "form-control" } })
You can also use EditorFor()
eg:
#Html.EditorFor(model => model.Nama, new { htmlAttributes = new { #disabled ="true", #class = "form-control" } })