I'm trying to render a radiobutton with some boolean attributes (required and disabled) using:
#Html.RadioButton("radio-name","false", new { id="test", required=Model.BooleanValue})
and
<input type="radio" name="radio-name" id="radio-name-no" value="false" class="radio" #if (!Model.BooleanValue) { <text>required</text> } disabled="#Model.BooleanValue" />
But the output is this:
<input id="test" name="radio-name" required="False" value="false" type="radio">
and
<input name="radio-name" id="radio-name-no" value="false" class="radio" disabled="True" type="radio">
MVC4 should render the boolean attributes as per HTML5 specs, so why it's outputting disabled="True" (or False) instead of disabled="disabled" or disabled (or nothing at all if the BooleanValue property is false)?
You can include conditionally rendered attributes like this:
<input
type="radio"
required="#(!Model.BooleanValue)"
disabled="#Model.BooleanValue" />
The solution was pretty strange. While doing some tests, I put an #if in the HTML input tag. This if was used to show the required attribute. After this #if, I put the disabled="#Model.BooleanValue" attribute.
It seems that this order disrupted the expected behaviour. Placing the disabled attribute before the #if solved the problem (later I have deleted the #if and converted it to required="#(!Model.BooleanValue)").
Related
I want to conditionally render a readonly attribute in an <input>. In the ASP.NET Core dialect of Razor the interpretation of attributes is a little different opposed to System.Web.Mvc.
In System.Web.Mvc I used to do:
<input name="Name" class="form-control" #(Model.MyCondition ? "readonly" : "") />
In ASP.NET Core, the same does not work: no error, but the attribute isn't rendered either.
<input asp-for="Name" class="form-control" #(Model.MyCondition ? "readonly" : "" ) />
Once the attribute is present in the HTML it is enforced, so I cannot do something with the value of the attribute. This snippet would cause the input to always be read-only:
<input asp-for="Name" class="form-control" readonly="#(Model.MyCondition ? "readonly" : "" )" />
Now, I can work around by creating a tag helper that would respond to the is-readonly tag, but that seems very convoluted for something so simple.
How do I conditionally render a no-value attribute without resorting to a custom tag helper?
If you set the value to null when your condition isn't matched (instead of an empty string) then the attribute will not be rendered, as follows:
<input asp-for="Name" class="form-control" readonly="#(Model.MyCondition ? "readonly" : null )" />
#{
var htmlAttributes = (MyModel.MyCondition == true) ? (object)new
{
##readonly = "readonly"
} : null;
}
#Html.TextBoxFor(m => m.Nom, htmlAttributes)
What I do is create an #if statement. I find it more transparent.
#if (Model.MyCondition)
{
<input asp-for="Name" class="form-control" readonly="readonly" />
}
else
{
<input asp-for="Name" class="form-control" />
}
I want to convert following HTML code to Angular code using *ngFor
<div>Children: <input type="radio" id="1" name="children" [value]="1" [(ngModel)]="this.children"/>1
<input type="radio" id="2" name="children" [value]="2" [(ngModel)]="this.children"/>2
<input type="radio" id="3" name="children" [value]="3" [(ngModel)]="this.children"/>3
You have {{this.children}} children
</div>
Angular code
<div>Children: <input *ngFor = "let option of selectOptions" type="radio" id=option name="children" [value]=option [(ngModel)]="this.children"/>{{option}}
You have {{this.children}} children
</div>
selectOptions is defined in Component's class as follows:
selectOptions:Array<number>=[1,2,3]
I can see error for {{option}} that Angular: Identifier 'option' is not defined. The component declaration, template variable declarations, and element references do not contain such a member
I also see error for id=option name="children" that tag start is not closed.
What am I doing wrong?
I used your code like this:
<div>Children: <input *ngFor = "let option of selectOptions" type="radio" id={{option}} name="children" [value]=option />{{option}}
You have {{this.children}} children
</div>
It worked with this result:
Generated this html:
It seems one issue is that option goes out of scope once input tag is closed. If I move *ngFor to div then I get the labels. But they are now displayed vertically, not horizontally. This code works but with vertical alignment <div *ngFor = "let option of selectOptions"> <input type="radio" [id]="option" name="children" [value]=option [(ngModel)]="this.children">{{option}} </div>
For horizontal alignment, this worked. Instead of repeating div, I repeated label. label wraps the input so option is in scope of input - <div > <label *ngFor = "let option of this.selectOptions; let ind=index"> <input type="radio" [id]="option" name="children" [value]=option [(ngModel)]="this.children"> {{option}} </label> </div>
I have previously successfully implement this behaviour but for some reason it's not working. I am fairly new to Vue.js and I might be missing something.
I have two radio buttons as such:
<div class="radio">
<label>
<input type="radio" name="loginRadio" id="frmLoginRadio" value="true" v-model="loginRadio" checked>
No, I am new to this site
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="loginRadio" id="frmRegisterRadio" value="false" v-model="loginRadio">
Yes, my password is:
</label>
</div>
They both have a v-model of loginRadio which is initially set to false. When the second radio button is clicked, the disabled input button below should be enabled again.
<input type="password" class="form-control" name="password" :disabled="loginRadio">
However, for some reason, the only thing that is happening is this (when I used Chrome Debug)
<input type="password" class="form-control" name="password" disabled="false">
and the element stays disabled. What am I doing wrong?
You did not use v-bind:for the value attribute of the input buttons
Therefore, loginRadio does not contain boolean values true or false (depending on selection), but strings: "true" and "false"
it should be enough to properly bind the value attribute on both input buttons:
:value="true"
:value="false"
I set up in backoffice the default sort type to : in stock. this works for all pages except SearchController template file : search.tpl.
What can be the causes behind such dysfunctionning? I really don't know what part of code to deal with. Thanks everyone who already met such issue for advices.
Edit:
I discovered that the link in the adress bar after click on search button is:
website/index.phpcontroller=search&orderby=position&orderway=desc&search_query=design+40&submit_search=Rechercher
When I remove orderby=position&orderway=desc, the default behaviour works. I just need to remove this action from controller but still don't know how.
In template file, I found:
<form method="get" action="{$link->getPageLink('search')|escape:'html'}" id="searchbox">
<p>
<label for="search_query_top"><!-- image on background --></label>
<input type="hidden" name="controller" value="search" />
<input type="hidden" name="orderby" value="quantity" />
<input type="hidden" name="orderway" value="desc" />
<input class="search_query" type="text" id="search_query_top" name="search_query" value="{$search_query|escape:'html':'UTF-8'|stripslashes}" />
<input type="submit" name="submit_search" value="{l s='Search' mod='blocksearch'}" class="button" />
</p>
</form>
As you see, I have already changed the value of the hidden input to quantity. Hope it helps.
i have this website im building, my client is using a template and the template has contact forms, now i cant seem to understand how to get the text fade on click for input fields to work on any additional fields i make on top of what was there on the template.
http://daniloportal.com/NPC2/contact.html
on that page take a look at the form, the values with *'s disappear but the clone EMAIL input i made doesnt cause i took the * off the value.
Ive been going crazy trying to figure out where this is being configured on the page, If any inspect elementors can take a look and let me know i would greatly appreciate it!
this is the code snip
<form id="ajax-contact-form" action="">
<input type="text" name="name" value="Name *" title="Name *" />
<input type="text" name="email" value="Email *" title="Email *" />
<input type="text" name="email" value="Email " title="Email *" />
<textarea name="message" id="message" title="Message *">Message *</textarea>
<div class="clear"></div>
<input type="reset" class="btn btn_clear" value="Clear form" />
<input type="submit" class="btn btn_blue btn_send" value="Send message!" />
<div class="clear"></div>
</form>
Search your code to find what makes the input's value disappear. E.g., look for behavior that clears the value of form fields (either element.value = '' if using plain javascript, or element.val('') if using jquery).
Then you can see what is the condition to clearing it. In your case, seems that the condition is that the input's value is equal to it's "title" attribute (you can edit both using "Inspect Element" in Chrome).