Why do I get this warning: '#Model.property' is not a valid value of attribute 'checked'? - asp.net-core

I have several checkboxes that I use for display purposes of 'true' and 'false'. Each one will show me the above warning (I made the warning more generic for the purposes of searching. In reality, it reads #Model.Service_Request_Information.Servicelead, etc, instead of #Model.property)
<input class="custom-control-input" type="checkbox" checked="#item.Servicelead" disabled />
I have read that it is okay to write razor code like this, and the HTML will insert/leave out 'checked' from the attributes depending on the value. It works fantastically for how I want it, and it doesn't prevent my code from compiling. So, any ideas on why I am getting this warning?

Razor will render a boolean attribute if the expression you pass to it evaluates to true. If the expression evaluates to false, the attribute is not rendered at all. That is the Razor feature you are using in your example.
In HTML, valid values for the checked attribute are an empty string or "checked" (Specs) i.e. checked or checked="checked". Visual Studio reports HTML errors as warnings by default, which is what you are seeing. You can either ignore it, turn HTML validation off:
Tools > Options > Text Editor > Html > Validation
Or you can use a ternary expression as demonstrated by other answers:
#(item.Servicelead? "checked" : "")

The checked attribute does not have a value. It should only be set when #item.Servicelead is true.
Use this code instead:
<input class="custom-control-input" type="checkbox" #(item.Servicelead? "checked" : "") disabled />

Related

Dynamic Form in Vue - checkbox stays checked

I have a select input. and checkbox-list in vuejs form. Checkbox list depend on what is chosen in select. The problem is that if i check let's say 1 or 2 checkboxes, after I change select, 1 or 2 checkboxes will always stay checked despite the fact that values and labels of checkboxes have already changed. It looks like it doesn't build new checkboxes with new 'checked' attribute.
Select has onChangefunction() in which I change list of items to be checked in checkbox list. Checked() function in checkbox checks whether this exact element should be checked and returns true or false
<select #change="onChange" ...
<input type="checkbox" :checked="checked()" ...
The thing is that even if checked() function will always just return false, the checkbox will stay checked after I manually checked it on the page however many time I will change select input choice
To really give a good answer, I think a bit more information might be required. That being said, it looks like you're binding is incorrect. Your input line probably should be:
<input type="checkbox" :checked="checked" ...
So your checked function shouldn't have parens on it.
If that's not the issue, please post the rest of your component so we can see the script and data values.
Agreed with #DRich here but you can use #input method to call a method
<select #input="onChange" ...
I use this most of the time

Selenium XPath find element where second text child element contains certain text (use contains on array item)

The page contains a multi-select dropdown (similar to the one below)
The html code looks like the below:
<div class="button-and-dropdown-div>
<button class="Multi-Select-Button">multi-select button</button>
<div class="dropdown-containing-options>
<label class="dropdown-item">
<input class="checkbox">
"
Name
"
</label>
<label class="dropdown-item">
<input class="checkbox">
"
Address
"
</label>
</div>
After testing in firefox developer tools, I was finally able to figure out the xPath needed in order to get the text for a certain label ...
The below XPath statement will return the the text "Phone"
$x("(//label[#class='dropdown-item'])[4]/text()[2]")
The label contains multiple text items (although it looks like there is just one text object when looking at the UI) in the label element. There are actually two text elements within each label element. The first is always empty, the second contains the actual text (as shown in the below image when observing the element through the Firefox developer tool's console window):
Question:
How do I modify the XPath shown above in order to use in Selenium's FindElement?
Driver.FindElement(By.XPath("?"));
I know how to use the contains tool, but apparently not with more complex XPath statements. I was pretty sure one of the below would work but they did not (develop tool complain of a syntax error):
$x("(//label[#class='dropdown-item' and text()[2][contains(., 'Name')]]")
$x("(//label[#class='dropdown-item' and contains(text()[2], 'Name')]")
I am using the 'contains' in order to avoid white-space conflicts.
Additional for learning purposes (good for XPath debugging):
just in case anyone comes across this who is new to XPath, I wanted to show what the data structure of these label objects looked like. You can explore the data structure of objects within your webpage by using the Firefox Console window within the developer tools (F12). As you can see, the label element contains three sub-items; text which is empty, then the inpput checkbox, then some more text which has the actual text in it (not ideal). In the picture below, you can see the part of the webpage that corresponds to the label data structure.
If you are looking to find the element that contains "Name" given the HTML above, you can use
//label[#class='dropdown-item'][contains(.,'Name')]
So finally got it to work. The Firefox developer environment was correct when it stated there was a syntax problem with the XPath strings.
The following XPath string finally returned the desired result:
$x("//label[#class='dropdown-item' and contains(text()[2], 'Name')]")

Element Should Contain Text - for disabled field

I am working on automation tests using Appium and Robotframework. The keyword Element Should Contain Text seems to return empty if the input field is disabled. How to verify a disabled input field has a given value?
<input type="text" id="myId" name="myName" disabled />
I get the following error:
Element 'myId' should have contained text 'myValue' but its text was ''.
Make sure your code is correct and you are passing the correct id/classname. If this does not work please post the HTML code you are using. Adding some of the sample example which you can try out :-
If your tag is something like this below -
<input disabled="true" id='data'>
Your code should be -
WebElement webElement = driver.findElements(By.id('my-id'));
webElement.getAttribute("disabled")
or
WebElement.getAttribute("id")
For this tag -
<input id="j_idt93:j_idt93" type="text" disabled="disabled" maxlength="2000" value="Pārtraukts">
To get the value attribute -
String value = driver.findElement(By.id("j_idt93:j_idt93")).getAttribute("value");
If this does not work you may have to use the javascript executor -
String value = (String)((JavascriptExecutor) driver).executeScript("Java script query in here to return value","");
Your query should be -
return document.getElementById("j_idt93:j_idt93").getAttribute("value");
Let me know if this does not work.
Its true selenium returns empty if I assert text in disabled fields by using Element or page contains text... However we can compare the text in field by using Get Value and then comparing the field value with the value you want to assert by should be equal.
In your case what you can do is,
${valueInField} Get Value myId
should be equal ${valueInField} ${myValue}
I solved this problem.
*** Keywords ***
Should Not Be Empty
[Arguments] ${locator}
${getValueOfTextField}= Get Element Attribute ${locator} value
Should Not Be Empty ${getValueOfTextField}
I didn't get the value out, but I'm sure it's not empty.

Why Html.EditorFor renders hidden field?

I have a code on server side:
#Html.EditorFor(m => m.RememberMe)
RememberMe is a boolean field of my model.
And the rendered HTML:
<input class="check-box" data-val="true" data-val-required="The Remember Me ? field is required." id="RememberMe" name="RememberMe" type="checkbox" value="true" />
<input name="RememberMe" type="hidden" value="false" />
There is a hidden field with the same name="RememberMe". I don't know why and what is the purpose of this hidden field.
When I debug on server side with the checkbox checked, the model was mapped correctly. I got: myModel.RememberMe = true. But when I inspected the Request["RememberMe"]. I saw "true,false". The false must be from the hidden field as they have same name.
My questions are:
Will the false cause problems?
Why asp.net mvc renders a hidden field like this?
If the hidden field is not neccesary. How can I get rid of it? I think it's best to get only "true" for Request["RememberMe"].
Thank you
Will the false cause problems?
the false will not cause any problems but since you rendering not null that means that your RememberMe is set to bool and not nulabble bull therefore if the answer is not checked it will be false
Why asp.net mvc renders a hidden field like this?
because if you look at your html you can not have two values it either true or false but since null is not the answer hidden field was added to hold the value of false value="false"
If the hidden field is not neccesary. How can I get rid of it? I think it's best to get only "true" for Request["RememberMe"].
unless you really think it a problem you might gone have to write your own check-box helper because as far as i know check-box helper that used will not accept the null-able value as input

Refining my Dojo/Dijit NumberTextBox numeric validation

I have the following code:
<input type="text" dojoType="dijit.form.NumberTextBox" size=8
constraints="{min:0,max:100000,places:0}"
id="orgNumberOfStudents" name="orgNumberOfStudents"
required="true" invalidMessage="Integer between 0 and 100,000"
value="">
Questions:
1) How do I set the width of the box? Do I have to do it in a style tag or a CSS? Is the traditional "input size" tag ignored?
2) The above sample shows the error when I type in a non-numeric value. But if I tab over the field and don't fill in anything, it's still blank. Is there a quick way to enforce the validation when I click the submit button? Do I need a Dijit submitt button? Do I need to write more JavaScript to make this happen? How does the required="true" actually occur?
(One get-around is to set the value to 0, but I'd rather force the user enter a value rather than just defaulting it).
Thanks,
Neal Walters
You should be able to use both CSS and traditional INPUT attributes like "maxLength" on your NumberTextBox by passing them in to the Widget's constructor. maxLength is available on all dijit.form.TextBox subclasses, but is probably less useful here since you have control over things like min/max and the actual number format.
Yes, you can always write your own JS to test "isValid()" on your widget instance before submission, e.g. in an HTML FORM onSubmit handler, or you could use dijit.form.Form which will check validity for you. The widget itself is only responsible for visual representation of its own validity, according to the options chosen.
HTH