I know this question has a lot of answers. I have looked through all the solutions to disable google autocomplete(the drop down of suggestions), like using autocomplete=0ff or autocomplete=false, but nothing has solved the issue.
I have created an MVC app that has views with dropdown lists and HTML EditorFor.
One solution to add a name to the HTML editor for, helped to remove autocomplete, however since I changed the name of the HTML EditorFor, I had an issue posting back the value.
<div class="col-md-10">
#Html.EditorFor(model => model.Address, new {htmlAttributes = new { #class = "form-control", #id = "show_address", Name = Guid.NewGuid().ToString(), autocomplete = "noped" } })
</div>
Does anybody have a solution for 2019 to disable the google autocomplete?
Update:
I tried using html.textboxfor(as given in the first solution below), however I have realised that autocomplete=off only works if there is one other textboxfor in the view. If there is multiple textboxfor in the same view, using autocomplete=off on any of the Html Textboxfor will not work for any of them to disable autocomplete! Can anyone please help?
EditorFor is having its own some disadvantages, it did not work in some scenarios, a better way to use TextBoxFor instead of EditorFor.Also, It did not affect Postback value.(For more details check here)
#Html.TextBoxFor(model => model.Address, new { #class = "form-control", #id = "show_address", autocomplete = "off" })
UPDATE: Check my updated demo DEMO
After adding autocomplete=off, still some browser ignores them and they try to show you some hint or autofill. More info check this
Add some random_value in autocomplete, so browsers consider as an off.
#Html.TextBoxFor(model => model.Address1, new { #class = "form-control", #id = "show_address", autocomplete = "some_random_value" })
I think I have found the answer. I give credit for #Mangesh Ati for this solution. I just wanted to summarise the solution for anyone else interested.
autocomplete=off works to disable google autosuggestions on all #htmlTextBoxFor, besides for the part of model called address, instead use autocomplete=randomn_string
Important:
If you are using a jquery autocomplete on the textboxfor..its important to add the attribute of autocomplete=randomn_string on .focus like below:
$('#show_address').autocomplete({
}).focus(function () {
$(this).attr('autocomplete', 'some_random_value');
});
Did you try?
<%= Html.TextBoxFor(
model => model.date,
new { #class = "aDatePicker", autocomplete = "off" }
)%>
It will generate markup that is close to the following:
<input type="text" id="date" name="date" class="aDatePicker" autocomplete="off" />
Also you can try:
//Disable autocomplete throughout the site
$(document).ready(function() {
$("input:text,form").attr("autocomplete","off");
})
In VB this worked for me (use C# converter):
#Html.EditorFor(Function(m) m.Password, New With {.class = "form-control text-center", .autocomplete = "new-password"})
<input type="any" readonly onfocus="this.removeAttribute('readonly');">
Related
How do I stop an Html.EditorFor element from displaying previous entered values in a drop down when I click in it. Below the html for this element I am using:
#Html.EditorFor(model => model.CreateDate,
new
{
htmlAttributes = new
{
#class = "form-control datepicker",
#id = "id-CreateDatePicker"
}
})
The automatic dropdown of previous values keeps covering the popup calendar which is preventing a user from selecting a date. The below picture shows the drop down of previous values that I need to stop showing when a user clicks in the box:
Thanks in advance.
When a user starts typing in an HTML form field, browsers, by default, enable the autocomplete feature. Numerous users let their browsers collect form data allowing using autocomplete in forms in the future.
To disable or enable autocomplete of text in forms, use the autocomplete attribute of <input> and <form> elements. This attribute contains two values:
on (specifies that autocomplete is enabled, this is the default
value)
off (specifies that autocomplete is disabled)
This can be done in a <form> for a complete form or for specific <input> elements:
Add autocomplete="off" onto the <form> element to disable autocomplete for the entire form.
Add autocomplete="off" for a specific <input> element of the form.
Example :
#Html.EditorFor(model => model.CreateDate,
new
{
htmlAttributes = new
{
#class = "form-control datepicker",
#id = "id-CreateDatePicker",
#autocomplete="off"
}
})
I am trying to generate a unique label and and input text box for a partial view that is being used to render a list of user input rows.
By unique I mean that each input text box should have its unique html "id" and "name" so that when is submitted each input can be identified
In the View I have
#model UserDataModel
#{
var inpName = "benefName" + #Model.Row;
var inpAge = "benefAge" + #Model.Row;
}
#Html.LabelFor(x => x.Name, new { #class="labelhalf"})
#Html.EditorFor(x => x.Name, new { id = #inpName, htmlAttributes = new { #class = "form-control animated" } })
When the view is being render this is what I am seeing
<label class="labelhalf" for="Name">Nombre (Opcional)</label>
<input class="text-box single-line" id="Name" name="Name" type="text" value="">
As you can see the "name" and "id" attributes of the text input is "Name" and "Name" and is not using the value of the #inpName variable ("benefName1" for example)
Also I am trying to assign some CSS classes to that same input using "htmlAttributes"
I had previously tried this with this approach
<label form="FormStep_01" for=#inpName class="labelhalf">Nombre (Opcional)</label>
<input form="FormStep_01" id=#inpName class="form-control animated" pattern="^[_A-z0-9]{1,}$" type="text" placeholder="" required="">
...but the content of the input fields with this approach are not being submited and that is the reason I am trying to use the #Html.EditorFor
UPDATE
I am now using the TextBoxFor which takes the "id" and the "class" fine but not the "name" which is used in the submit
#Html.LabelFor(x => x.Name, new { #class = "labelhalf" })
#Html.TextBoxFor(x => x.Name, new { #id = #inpName, name = #inpName, #class = "form-control animated" })
Please let me know how to achieve this in MVC4
Issue 1 (Using EditorFor())
You cannot add html attributes using EditorFor() in MVC-4. This feature was not introduced until MVC-5.1, and then the correct usage is
#Html.EditorFor(m => m.SomeProperty, new { htmlAttributes = new { someAttribute = "someValue" }, })
Issue 2 (Using TextBoxFor())
You cannot change the value of the name attribute using new { name = "someValue" }. The MVC team built in a safe guard to prevent this because the whole purpose of using the HtmlHelper methods to generate form controls is to bind to your model properties, and doing this would cause binding to fail. While there is a workaround, if you do discover it, don't do it! As a side note - the following line of the private static MvcHtmlString InputHelper() method in the source code
tagBuilder.MergeAttribute("name", fullName, true);
is what prevents you overriding it.
Issue 3 (Manual html)
You not giving the inputs a name attribute. A form posts back a name/value pair based on the name and value attributes of successful controls, so if there is no name attribute, nothing will be sent to the controller.
Side note: If your manually generating html, there is no real need to add an id attribute unless your referring to that element in javascript or css.
Its unclear why your trying to create a input for something that does not appear to relate to your model, but if your trying to dynamically generate items for adding items to a collection property in your model, refer the answers here and here for some options which will allow you to bind to your model.
I have a project written in C# MVC using Razor templates. On one of my pages I have several input fields that contain numeric values. The Razor code that sets the values of these input fields looks like this:
#Html.Editor(Model.DesignParams[i].ParamId,
new {
htmlAttributes = new
{
#Value = Model.DesignParams[i].DefaultValue,
#class = "form-control text-right",
#type = "text",
id = "_" + Model.DesignParams[i].ParamId,
uomid = Model.DesignParams[i].UOMId,
measureid = Model.DesignParams[i].MeasureId
}
})
The above code works fine using FireFox and Chrome and generates an input field that looks like this:
<input type="text" uomid="MBH" name="HeatOfRejection" measureid="HeatLoad"
id="_HeatOfRejection" class="form-control text-right text-box single-line"
value="5000.0">
But the same Razor code, identical #Model values viewed with IE generates this:
<input Value="5000" class="form-control text-right text-box single-line"
id="_HeatOfRejection" measureid="HeatLoad" name="HeatOfRejection"
type="text" uomid="MBH" value="" />
As you can see, there is a difference between the value= attribute generated for IE in that the value attribute that gets my actual value begins with an uppercase 'V' and the lowercase value is an empty string. I'm stumped on this...
Can anyone tell me why this is happening and possibly how to handle it?
This difference effects jQuery's ability to return the input's value with:
var value = $(inputfield).attr("value");
Maybe .val() will retrieve the input field value, but this is going to require a rewrite of core jQuery code that supports this page and others, so I wanted to ask if anyone can tell me why this 'Value=' gets created for IE only and if there is a way of overcoming the problem.
Update:
Changing #Value to #value (or just value) results in an empty value attribute in Firefox and IE:
<input type="text" value="" uomid="MBH" name="HeatOfRejection" measureid="HeatLoad"
id="_HeatOfRejection" class="form-control text-right text-box single-line">
As StuartLC points out, you are trying to get Html.Editor to do something it wasn't designed to do.
What happens when you pass a #value or #Value key to the htmlAttributes is that the rendering engine produces an attribute with that name in addition to the value attribute it's already generating:
<input type="text" name="n" value="something" value="somethingElse" />
or
<input type="text" name="n" value="something" Value="somethingElse" />
In both cases, you're giving the browser something bogus, so it can't be expected to exhibit predictable behavior.
As alluded above, Html.Editor has functionality to generate the value attribute based on the expression argument you pass to it. The problem is that you are using that incorrectly as well. The first argument to Html.Editor() needs to be an expression indicating the model property that the editor should be bound to. (e.g. the string value "DesignParams[0].ParamId") Nowadays, the preferred practice is to use the more modern EditorFor that takes a lambda function, as StuartLC showed in his post:
#Html.EditorFor(model => model.DesignParams[i].ParamId, ...)
You are "capitalising" the value html attribute. Change this to lower case...
#Value = Model.DesignParams[i].DefaultValue
as below ...
#value = Model.DesignParams[i].DefaultValue
IE is not the smartest of web browsers and there's definitely something wrong in the way Trident (they're parsing engine) validates elements' attributes as seen in these threads...
https://github.com/highslide-software/highcharts.com/issues/1978
Highcharts adds duplicate xmlns attribute to SVG element in IE
Also, as already noted somewhere else. What's the need for the Editor extension method? Isn't it simpler to just use TextBoxFor instead?
#Html.TextBoxFor(model => model.DesignParams[i].ParamId
, new
{
#class = "form-control text-right"
, uomid = Model.DesignParams[i].UOMId
, measureid = Model.DesignParams[i].MeasureId
})
Editor works with metadata. then you need to more about this,
http://aspadvice.com/blogs/kiran/archive/2009/11/29/Adding-html-attributes-support-for-Templates-2D00-ASP.Net-MVC-2.0-Beta_2D00_1.aspx
But the easiest way is go with
#model Namespace.ABCModel
#using (Html.BeginForm("Action", "Controller", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
#Html.TextBoxFor(model => model.DesignParams[i].ParamId, new { #class = "form-control text-right", uomid = Model.DesignParams[i].UOMId, measureid = Model.DesignParams[i].MeasureId })
}
You shouldn't be using invalid Html attributes in this way. Use the data- attributes in Html 5.
Also, your use of #Html.Editor(Model.DesignParams[i].ParamId (assuming ParamId is a string) deviates from the helper's purpose, which is to reflect the property with the given name off the Model, and use the value of this property as the Html value attribute on the input. (MVC will be looking for a property on the root model with whatever the value of ParamId is, which seems to silently fail FWR)
I would do the defaulting of Model.DesignParams[i].ParamId = Model.DesignParams[i].DefaultValue in the Controller beforehand, or in the DesignParams constructor.
#Html.EditorFor(m => m.DesignParams[0].ParamID,
new {
htmlAttributes = new
{
// Don't set value at all here - the value IS m.DesignParams[0].ParamID
#class = "form-control text-right",
#type = "text",
id = "_" + Model.DesignParams[i].ParamId,
data_uomid = Model.DesignParams[i].UOMId,
data_measureid = Model.DesignParams[i].MeasureId
}
Note that this will give the input name as DesignParams[0].ParamID, which would be needed to post the field back, if necessary.
Here's a Gist of some example code
(The underscore will be converted to a dash)
Use data() in jQuery to obtain these values:
var value = $(inputfield).data("uomid");
I have a collection of objects that I'm trying to display, however the span generated by the ValidationMessageFor does not include all the validation attributes:
<span class="field-validation-error">This field is required</span>
instead of:
<span class="field-validation-error" data-valmsg-replace="true" data-valmsg-for="Questions[0].SingleAnswer"></span>
This is how I'm generating the html:
<fieldset id="dr_profileUpdates">
#Html.EditorFor(model => model.Questions)
</fieldset>
And here is my editor template:
#Html.ValidationMessageFor(model => model.SingleAnswer)
#Html.TextBoxFor(model => model.SingleAnswer, new { #class = "textBoxDefault" })
The validation works, however the span does not dissapear after filling out the textbox and focusing out of it - I would assume this is because the span does not get generated correctly
Any help is appreciated.
EDIT: Actually it appears that after posting back to the server and returning the partial view (assuming the ModelState is invalid), those attributes do not get generated again - it only seems to affect the ValidationMessage. Any ideas?
Thanks,
Try add on top of your razor file
#{
Html.EnableUnobtrusiveJavaScript();
}
Trying to override the "id" attribute of Html.TextBoxFor (MVC 3) so that it should look like:
<input type="text" name="Password" id="#idPasswordTextBox" value="#Model.Password" />
where "idPasswordTextBox" is defined as:
string idPasswordTextBox = "passwordText_"+#Model.Key; in the same cshtml file.
This is working fine if I use as :
<input type="text" name="Password" id="#idPasswordTextBox" value="#Model.Password" />
but not working if I do it this way:
#Html.TextBoxFor(model => model.Password, new { id = "#idPasswordTextBox" })
Looks like the "id" attribute is getting messed up. What am I missing? Can anybody help? I am new bee in ASP.net.
Thanks in advance.
Sorry, i should've looked more carefully. You don't want quotes around #idPasswordTextBox in your TextBoxFor method. That is run on the server, so when you put quotes around the name it is being treated as a literal string. Remove the quotes, and remove the # sign in front of id, and it will work.
Its important to always remember what is running on the server, and what is running on the client.
#Html.TextBoxFor(model => model.Password, new { id = #idPasswordTextBox })