I have an ASP.NET MVC 5 application using Razor. When it loads, it displays saved data in input fields. This works fine in IE 11, but when viewing in Microsoft Edge 90.0.818.51, the values are not being displayed.
When I view the source I see the value is set, but am not sure why it's not displaying in Edge. Has anyone been experiencing this?
<input class="small-input form-control text-right" data-val="true" data-val-regex="The field must match the regular expression '^[-+]?(\d+(\.\d*)?|\.\d+)[%]?$'." data-val-regex-pattern="^[-+]?(\d+(\.\d*)?|\.\d+)[%]?$" id="SignificantActivityInputs" name="SignificantActivityInputs" type="number" value="10%" />
There are other fields that are displaying the text. The difference I can see with them are:
They have an associated field that is of type "hidden"
The "main" field is of type "text" where the ones that aren't displaying are of type "number" as shown above.
Has anyone else experienced this?
The type should be text, instead of number
<input class="small-input form-control text-right"
data-val="true"
data-val-regex="The field must match the regular expression '^[-+]?(\d+(\.\d*)?|\.\d+)[%]?$'."
data-val-regex-pattern="^[-+]?(\d+(\.\d*)?|\.\d+)[%]?$"
id="SignificantActivityInputs"
name="SignificantActivityInputs"
type="text"
value="10%" />
Related
I'm using a prevalue source in an Umbraco Form to render a list of options from a db table. I've noticed in the html markup that the Value Column is placed in both the list value and the label like so:
<input type="radio" name="3e56b737-c3db-4413-9099-844d002fc3c9" id="3e56b737-c3db-4413-9099-844d002fc3c9_4" value="Secondary">
<label for="3e56b737-c3db-4413-9099-844d002fc3c9_4">Secondary</label>
I'd expect the input value to be the Key Column and the label text to be the Value Column. So it appears that the Key Column is completely ignored when rendering the list. Has anyone else encountered this? Am I doing something wrong or is there some other way to retrieve the Key Column value of the selected list item?
Ok I found out how to fix this. Realised the markup is controlled by the partial view in Views\Partials\Forms\Themes\default\Fieldtypes\FieldType.RadioButtonList.cshtml and DropDownList.cshtml.
So the line that reads:
<input type="radio" name="#Model.Id" id="#string.Concat(Model.Id,"_",i)" value="#pv.Value"
needs to read:
<input type="radio" name="#Model.Id" id="#string.Concat(Model.Id,"_",i)" value="#pv.Id"
HOWEVER: this is great for field values from a db table, but won't work for fields where you've specified a hardcoded list of prevalues. Therefore to handle both scenarios the above line becomes:
var valueId = pv.Id == "0" ? pv.Value : pv.Id;
<input type="radio" name="#Model.Id" id="#string.Concat(Model.Id,"_",i)" value="#valueId"
So if the Id is 0, it uses the string value as before (hardcoded prevalue ids are always zero), otherwise it uses the Id from prevalue source Id field.
The caveat here is that this solution assumes you aren't populating any prevalues with a legitimate Id of 0.
If you've ever looked at what ASP.NET MVC actually renders when you use #Html.CheckBoxFor, then you've seen that each checkbox you request to be rendered actually results in the emission of not one but two input tags. One is the "true" value checkbox, and the other is for "false." The latter input is of type "hidden".
Generally this doesn't cause problems if you're using ASP.NET MVC correctly. You wouldn't notice the input doubling unless you tried to, for example, do something directly with Request.Form(e.g. Why does ASP.NET MVC Html.CheckBox output two INPUTs with the same name?)
My question, though, is how screen readers deal with this. For example, can they be relied upon to correctly report only the visible checkbox to the site user?
Screen readers will ignore hidden inputs.
Given the example you cite in your comment, it returns this code:
<div class="col pure-u-xl-1-3 pure-u-lg-1-3 pure-u-md-1 pure-u-sm-1 pure-u-xs-1">
<label>Home Club Newsletter</label>
<input checked="checked" … id="newsletter" name="JoinHomeClub" type="checkbox" value="true">
<input name="JoinHomeClub" type="hidden" value="false">
<span class="checkbox-label">Yes, please sign me Up!</span>
</div>
Right off the bat there is a problem here because the <label> is not associated with the control, and the visible text that is next to the checkbox is not associated with the field.
When I access the field in NVDA, all it says is "checkbox checked". There is no accessible name at all.
But to your question…
Your question was related to the <input type="hidden">. As #SLaks said, screen readers ignore <input type="hidden">. The fact that they have the same name value is no problem. If they had the same id value, then you would have a problem (how it would manifest in a screen reader depends on things and stuff).
I am using jQuery unobtrusive validation in ASP.NET MVC4 to validate an input contains digits only:
HTML
<input class="form-control"
data-val="true"
data-val-digits="This field may only contain digits."
data-val-range="This field must be between 0 and 25."
data-val-range-max="25"
data-val-range-min="0"
data-val-required="This field is required."
id="DaysHoliday"
name="DaysHoliday"
type="number"
value="">
When I enter "3.5" in the input I correctly get the validation message "This field may only contain digits."
When I enter "foo" in the input I would expect to see the digits validation message, but I actually get the required validation message "This field is required."
Why is the wrong message displayed?
Here is a demo that works fine for me in Safari, Firefox and Chrome, but NOT Explorer 10: http://jsfiddle.net/e0uz8nrs/
Your issue appears to be browser-specific and being caused by the type="number" designation of the field. It simply does not recognize text characters as anything, and therefore you get the same message as an empty field.
You could change the field to type="text" and it will behave more like you expect. I don't believe there's any other workaround for this.
Hi I tried adding a range from 1-10 to a field in my model and it caused 2 mini arrows to appear to the right of my editor field that increment and decrement the value inside by 1. I would like to know how to remove these arrows. Any advice would be great. Thanks
Instead of using #Html.Editor html helper, use #Html.TextBox, this will solve your problem.
Because the property type is integer, if you'r using #Html.Editor, it will generate html like below:
<input type="number" id="Data" />
Notice the input element type is number, if your browser support HTML 5, it will show two arrows to the right. It's an html 5 feature.
But, if you're using #Html.TextBox, it will generate html like below:
<input type="text" id="Data" />
This time the type is text, it will not show the arrows.
Simple question... Here is an example of some razor code:
#Html.TextBoxFor(c => c.RevisedEstimate)
#Html.TextBoxFor(c => c.RevisedEstimate)
Here is how this renders:
<input data-val="true" data-val-number="The field Revised Estimate must be a number." id="RevisedEstimate" name="RevisedEstimate" type="text" value="0" />
<input id="RevisedEstimate" name="RevisedEstimate" type="text" value="0" />
The obvious question you ask is, "Why are you doing that?". The razor view is actually building client side detail-row templates that are used in KendoUI grids. There are two similar grids and we use the same viewmodel server side. We actually do provide the id element for the template so each field in each row ends up with a unique id.
Why does the second input element not have the data-val and data-val-number elements?
Off the top of my head knowing what the JS does in the background, it seems to do this to prevent conflicts. The JS looks for the elements with the data- attributes to do it's validation, along with other functions, so it could possibly pick the wrong one if there are multiple instances of it.
since we were generating HTML for use in a client side template what we did was just create a variable to hold the HTML generated by the helper, and then render out that code in the Views..
Something like:
#{
var revisedEstimateInput = Html.TextBoxFor(c => c.RevisedEstimate)
}
Then later in the view:
#(revisedEstimateInput)
...in as many places as needed. This way the validation and other metadata attributes were in place in our client templates and all the kenodUI validation worked correctly.