On my Change Password form I have asterisks appearing in the New Password field. I assume they are appearing as a leftover from the password field from the Login Form?
Change Password form (partial):
<div class="form-group">
#Html.LabelFor(m => m.Password, new { #class = "col-md-3 control-label" })
<div class="col-md-9">
#Html.PasswordFor(m => m.Password, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.Password)
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.ConfirmPassword, new { #class = "col-md-3 control-label" })
<div class="col-md-3">
#Html.PasswordFor(m => m.ConfirmPassword, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.ConfirmPassword)
</div>
</div>
This behavior is probably browser-related due to a cookie from saving the password on login. I'm just wondering if there is anyway to overcome this without renaming the Password field?
#Html.PasswordFor (and all of the other xxxFor HtmlHelpers) will fill in the input field with whatever value the model has for the property when the page is rendered. In this case, Model.Password must already have a value, perhaps from when you fetched the user from the database. Note, if you are storing the user's password somewhere in plain text, this is bad practice.
Before the call to View in your Controller, clear out the Password property.
If that doesn't work and you've confirmed the Password property of the Model is empty when the page loads, then perhaps it is some browser autocompletion as you say. You can try adding autocomplete = "off" attribute to the input element.
Related
This question already has answers here:
Hyphenated html attributes with asp.net mvc
(2 answers)
Closed 6 years ago.
I have a basic password strength indicator.
<input type="password" id="myElement1" size="40" class="left" data-display="myDisplayElement1" />
<div class="left" id="myDisplayElement1"></div>
I have the JS Script which takes care of all the logic. And the data-display div shows the message whether the password is weak or strong. But I want to convert the above code into Razor. Below is what I have till now.
<div class="form-group">
#Html.LabelFor(model => model.NewPassword, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.NewPassword, new { htmlAttributes = new { #class = "form-control", id = "myElement1" } })
<div class="left" id="myDisplayElement1"></div>
#Html.ValidationMessageFor(model => model.NewPassword, "", new { #class = "text-danger" })
</div>
</div>
Question: Everything is working fine but I am not able to put data-display attribute in razor. Where do I need to place it. But as the data-display is not set, I am not able to display the user its password strength as the div.
I want to be able to do something like below
#Html.EditorFor(model => model.NewPassword, new { htmlAttributes = new { #class = "form-control", id = "myElement1" , data-display = "myDisplayElement1"} })
But data-display gives me error.
Error
Cannot resolve symbol data the error comes at the place where I have added data-display.
Hyphenation is not valid within an anonymous object. However, knowing that it would be necessary at times to add attributes with hyphenation, the Razor helpers will auto replace underscores with hyphens in attribute names. As a result, you can accomplish what you need by using data_display rather than data-display.
I am using the following EditorTemplate:
<div class="form-group">
#Html.LabelFor(m => m, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, htmlAttributes)
#Html.ValidationMessageFor(m => m, null, new { #class = "help-block" })
</div>
</div>
When attempting to save the form with a deliberate error, the page refreshes and correctly shows the validation error but the label completely disappears. It is not hidden it is completely gone from the html source.
Here is my EditorFor:
#Html.EditorFor(model => model.Description, new { htmlAttributes = new { #class = "form-control" } })
Is this a bug, or does anyone know what might be causing this?
This problem has been fixed with the latest asp.net core.
See here:
https://github.com/aspnet/Mvc/issues/2778
I created an Edit page in MVC and decided I did not want the ID to be editable, but I do want it to look like the rest, just greyed out preferably.
Here is my property:
<div class="form-group">
#Html.LabelFor(model => model.EvpId, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DisplayFor(model => model.EvpId, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.EvpId, "", new { #class = "text-danger" })
</div>
</div>
After doing some reading everyone seems to suggest using the #Html.DisplayFor which makes sense, even though it does not look like the rest.
However when swapping the EditorFor for the DisplayFor I notice that the label is not on the same line:
What is the simple way of having this on the same line as the corresponding label, I am using the standard out of the box bootstrap CSS.
View Source on page:
<div class="form-group">
<label class="control-label col-md-2" for="EvpId">Id</label>
<div class="col-md-10">
2
<span class="field-validation-valid text-danger" data-valmsg-for="EvpId" data-valmsg-replace="true"></span>
</div>
</div>
I have had the same issue.
Jasen answer did not help, because span does not put an element into the same horizontal line with label, but his later comment with the link to bootstrap doc solved the problem, we should use p tag instead of span.
So my final solution was:
<p class="form-control-static">#Html.DisplayFor(model => model.Contractor.Name) </p>
Thanks to Jasen!
When you use #Html.DisplayFor() the helper is selecting markup based on the type. Here it chose to output a bare string and this breaks the Bootstrap form-horizontal styling.
<div class="col-md-10">
2 <!-- no surrounding tags for EvpId value -->
...
</div>
The easiest thing to do is just use plain html to insert your own tags
<div class="col-md-10">
<span class="form-control-static">#Model.EvpId</span>
...
</div>
If you do this a lot or you have much more markup you can create a custom helper extension. This is a very simple example:
public static class HtmlHelperExtensions
{
public static HtmlString IdSpan(this HtmlHelper helper, string id)
{
return new HtmlString(String.Format("<span class=\"form-control\">{0}</span>", id));
}
}
Usage:
<div class="col-md-10">
#Html.Idspan(Model.EvpId)
#Html.ValidationMessageFor(model => model.EvpId, "", new { #class = "text-danger" })
</div>
Using Jasen's answer I was able to achieve what I wanted by altering the width of the <span> however this seemed abit messy:
<span class="form-control" style="width:280px;">#Model.EvpId</span>
The ultimate answer to my question was this as it is what I originally was looking for:
#Html.EditorFor(model => model.EvpId, new { htmlAttributes = new { #class = "form-control", #readonly = "readonly" } })
Hope this helps someone.
Instead of wrapping in a P tag or SPAN I just put the class directly into the exiting DIV, and that worked too.
<div class="col-md-10 form-control-static">
...
</div>
Problem Statement:
In one of my edit view I want make textbox as disabled, so for this i'm using DisplayFor instead of TextboxFor. But when I use Displayfor, alignment is not coming properly. You can see images attached for your reference. I'm using Bootstrap CSS 3.0
Any help would be appreciated. What inline CSS I should use to align properly??
Image1: In this image you can see that Acquire Status ID label and Textboxfor properly aligned.
Image2: When I use DisplayFor instead of Textboxfor, Acquire Status ID label and Displayfor are not aligned properly.
View:
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true)
<div class="form-group">
#Html.LabelFor(model => model.AcquirestatusID, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DisplayFor(model => model.AcquirestatusID,new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.AcquirestatusID)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Name, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.Name, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Name)
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
I solved my problem using readonly attribute to my Textboxfor.
#Html.TextBoxFor(model => model.AccessoriesID,new { #class = "form-control",#readonly="readonly" })
After applying above line of code my edit view looks:
It might be happening due to the style.css which is by default in your project.
Remove style.css from the project
Note: you might only need some of the validation classes inside it
I agree with csoueidi , check with developer tools on IE or inspect element on chrome to see which css is loading the styles for that textbox.
If you want to line up the text and not use a textbox, use the class "form-control-static"
<div class="col-md-10 form-control-static">#Html.DisplayTextFor(model => model.AcquirestatusID)</div>
I've MVC5 application and in the create view i have user and password fields.
I put values in the user and password field and when I enter to edit mode i see just the user value in the text box
and the password field is empty,why?
when I debug the code I see that in the end of the edit ( return View(UserPass); ) i got the object with the values and than it call to the view(razor) and I dont see the value in the pass text box ...
Any idea why the user is exist and password not?
I just want it to be field with asterisks in the edit mode...
In the edit and the create view I use:
<div class="form-group">
#Html.LabelFor(model => model.Password, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.PasswordFor(model => model.Password)
#Html.ValidationMessageFor(model => model.Password)
</div>
</div>
Passwords are not prepopulated to prevent accidential submits and not to have un encrypted passwords.
check below link.
ASP.Net MVC3 Html.PasswordFor does not populate
Use this:
#Html.PasswordFor(model => model.Password,new{#Value=Model.Password})
Notice that Value:v should be uppercase
Rendering the value of a password into the html source is a huge security risk. Its preventing you from leaking your passwords. Otherwise someone could view the page source and see:
<input type="password" value="password123" />
I would recommend doing the following:
#Html.PasswordFor(model => model.Password, new { placeholder = "********" })
This will put some 'visual' asterisks in the textbox which will disappear when the user starts entering an actual value. Its not supported by all browsers, but its something.