How to uncheck a checked checkbox on load in Reactjs.Net? - reactjs.net

I am retrieving a record while a page is being loaded and based on its value I check the checkbox, like:
<div className="col-xs-12 col-sm-4 col-md-3 ">
<input type="checkbox" key={item.AttributeID} checked="checked" name={"Value" + item.AttributeID} className={classs} onClick={() => that.selectCheckBox(value) } />
<label>{item.AttributeName}</label>
</div>
The checkbox is checked and working fine, now on the UI I'm not able to uncheck that checked checkbox:
if (item.IsChecked == true) { subControlAttributesRows.push( that.selectCheckBox(value) } /> {item.AttributeName}); }

Related

How to set checkbox selected using two lists MVC

I have multiple checkboxes binded from ViewBag list. I have used this pattern while Add Record. But now I have situation of Edit . I have saved the selected checkbox IDs in different table. Now in Edit,how I can make them selected as per user selection done while adding that record?
#foreach (var item in ViewBag.Features)
{
<div class="form-group form-animate-checkbox col-md-4 col-sm-12">
<input type="checkbox" class="checkbox Amenities" value="#item.ID" name="#item.Name">
<label class="lblamenities">#item.Name</label>
</div>
}
In ViewBag.Features is list type variable, this contain the id and name, but in your requirement you need to select those check box previous you save.
So you can take another parameter or variable selected as bool type, those id are saved in our database the selected variable is true otherwise false.
In view page make check for checked or not, Plz see the below code....
#foreach (var item in ViewBag.Features)
{
<div class="form-group form-animate-checkbox col-md-4 col-sm-12">
<input type="checkbox" class="checkbox Amenities" value="#item.ID" name="#item.Name" checked='#(item.selected?"checked":"")'>
<label class="lblamenities">#item.Name</label>
</div>
}

aurelia-validation#0.14.0 not showing error message on UI

I have updated aurelia-validation package from from 0.6.0 to 0.14.0. Previously it will show error message on the label that closest to the input field. After updating package to latest version no error message is displaying on the label.
<form id="loginForm" class="form" role="form">
<div class="row">
<div class="form-group col-md-6">
<input class="form-control" value.bind="userName" type="text" id="userName" name="username" t="[placeholder]Account.UserName" />
<label t="Account.UserName" for="userName" class="control-label">User Name</label>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<input id="txtPassword" class="form-control" type="password" value.bind="password" name="password" t="[placeholder]Account.Password" />
<label for="txtPassword" t="Account.Password" class="control-label">Password</label>
</div>
</div>
<div class="form-group">
<button id="btnLogin" class="btn btn-material-teal btn-toolbar" disabled.bind="validationController.errors.length"
click.delegate="login()" t="Account.Login">Log in</button>
</form>
ValidationRules
.ensure('userName').required()
.ensure('password').required()
.on(this);
this.validationController.validate().catch(() => { });
I had the same problem, they have changed the way the validation information to render is being communicated.
The error object of the validation is now a result object. So in your renderer you must replace error by result.
The next difference is in the validation, in previous version this.controller.validate() was returning an array of validation objects, now it is also a result object, that has a valid property against which you must check.
More details can be found here.
Check out the Bootstrap Form Renderer on the Aurelia-Validation documentation page:
http://aurelia.io/hub.html#/doc/article/aurelia/validation/latest/validation-basics/8
This is the best way to display errors next to each input element on your form.
You'll need to import it like this:
import { inject } from 'aurelia-dependency-injection';
import { ValidationControllerFactory, ValidationRules } from 'aurelia-validation';
import { BootstrapFormRenderer } from '../common/bootstrap-form-renderer';
#inject(ValidationControllerFactory)
export class YourClassName {
constructor(validationControllerFactory) {
this.validationCtrl = validationControllerFactory.createForCurrentScope();
this.validationCtrl.addRenderer(new BootstrapFormRenderer());
}
}
ValidationRules
.ensure('fieldname').required()
.ensure('anotherfield').required.minlength(3).maxlength(20)
.on(this);
You'll want to save the code for BootstrapFormRenderer in a location that your whole app can access, since you'll need to import it into all of your viewmodels that will require validation.

Cordova&Ionic app: Content is not visibile if click event happens outside an input

Set Up:
Cordova: 5.3.3
Ionic: 1.1
Cordova Plugins: Keyboard, statusbar.
My issue is as follows;
I have a form view, in it are several inputs of type text, tel, email, etc.
The problem occurs when the keyboard on iOS device appears. If a user hits any part of the screen that is not the input(and sometimes even on focus of an input) the elements inside of the content disappear.
Now this is tricky, because if a user taps on the "blank" parts of the screen they will get new keyboards in relation to the inputs. So, I suppose the inputs are still there, just not visible. Occasionally after enough tapping the inputs become visible again.
I have looked the problem up and saw things about setting hideKeyboardAccessoryBar to false and setting disableScroll to true. These fixes do nothing for me. In face not being able to scroll hinders the app more.
Here is the relevant code:
view html:
<ion-view>
<ion-content class="greyBG padding has-subheader">
<div id="feedback" class="center assertive" data-ng-show="feedback" data-ng-bind="feedback"></div>
<form>
<div class="list">
<label class="item item-input">
<input type="text" placeholder="FirstName" ng-model="firstName.value" />
</label>
<label class="item item-input">
<input type="text" placeholder="Last Name" ng-model="lastName.value" />
</label>
<label class="item item-input">
<input type="email" placeholder="E-mail" ng-model="email.value" />
</label>
<label class="item item-input">
<input type="tel" placeholder="Contact Number" ng-model="phoneNumber.value" />
</label>
<label class="item item-input">
<input type="text" placeholder="Employer/Benefit Provider" ng-model="employer.value" />
</label>
<ion-list>
<ion-checkbox ng-model="tcDate.checked">Accept the terms and conditions of PinnacleCare</ion-checkbox>
<h5 class="text-center"> PinnacleCare terms and conditions</h5>
</ion-list>
<button class="button button-large button-block goldbutton" ng-click="addAccount()">
Sign Up
</button>
</div>
</form>
</ion-content>
app.js keyboard code:
angular.module('quickConnect', ['ionic', 'quickConnect.controllers', 'quickConnect.services'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
window.StatusBar.overlaysWebView(false);
StatusBar.styleDefault();
window.StatusBar.backgroundColorByHexString("#f3f0ec");
}
});
})
...
I don't think there is a existing solution to this problem just yet, but if someone has a work around to at least make the screen reappear with previous entered info that would be phenomenal right now!

MVC 5 Html helper CheckBoxFor cannot be selected in Razor partial

So I've been given html from a digital agency that I need to convert to MVC. I understand that the Html.CheckboxFor(..) creates an additional hidden input field to capture non selection of the checkbox as false.
However on my page I can't select my checkbox. If I delete the <input type="hidden....> in Firebug I can select the checkbox. (As in I can't click on the checkbox and make it selected visually)
The generated html is:
(html provided to me)
<div class="terms well">
<div class="checkbox">
<label class="checkbox-inline">
<input type="checkbox" id="authorize" name="authorize">
<span class="checkbox-display"><span class="checkbox-display-inner fa fa-check"></span></span>
<span class="checkbox-label">I accept full responsibility for the information I provide on this form.</span>
</label>
</div>
</div>
(html generated by the html helper - I haven't bothered trying to use the label for as I'm not sure the styling will still work).
<div class="terms well">
<div class="checkbox">
<label class="checkbox-inline">
<input type="checkbox" value="true" name="AuthorisePayment" id="AuthorisePayment"><input type="hidden" value="false" name="AuthorisePayment">
<span class="checkbox-display"><span class="checkbox-display-inner fa fa-check"></span></span>
<span class="checkbox-label terms-credit" style="display: inline-block;">I accept full responsibility for information and authorisations I provide on this form.</span>
</label>
</div>
</div>
Anyone got any ideas? I'm not 100% what to include in this post to help find the answer.
The razor view contains:
<div class="terms well">
<div class="checkbox">
<label class="checkbox-inline">
#Html.CheckBoxFor(model => model.AuthorisePayment)
<span class="checkbox-display"><span class="checkbox-display-inner fa fa-check"></span></span>
<span class="checkbox-label terms-credit">#Editable(x => x.PaymentTemplate.CreditCardTerms)</span>
</label>
</div>
</div>
I could just get the value from the form in my action controller but I don't understand why the model binding way of doing it isn't working.
I had the same problem.
The Checkboxfor gets his name from the model.
The problem is:
WHEN 2 different models have the same property,
AND both have a Checkboxfor at the same page,
the described problem occurs.
in my case, an organisation model (1) and a contactperson model (2) have the same property:
public bool IsActive { get; set; }
SOLUTION
Give them an unique id, in my case:
(1): #Html.CheckBoxFor(model => model.IsActive).HtmlAttributes(new { id = "organisation_active" } )
(2): #Html.CheckBoxFor(model => model.IsActive).HtmlAttributes(new { id = "contact_active" } )

AngularJS - Radio buttons in a loop?

We are using ASP.NET MVC and AngularJS (Newbie on Angular) and I'm really stuck with bloated html.
I have a bunch of radio button choices that are true/false but are bound to a nullable (bool?)
This works below just fine, but it's a lot of repeating code. Can it be shrunk using the wonders of Angular? (We're going to have a lot of these kinds of yes/no/no choice controls)
<div class="rdio rdio-primary col-xs-4 col-sm-4 col-md-2 col-lg-3">
<input type="radio"
name="#(Html.NameFor(x => x.IsUSAResident))"
id="resTrue"
ng-value="true"
required
ng-model="model.IsUSAResident">
<label for="resTrue" class="pull-left">Yes</label>
</div>
<div class="rdio rdio-primary col-xs-4 col-sm-4 col-md-2 col-lg-3">
<input type="radio"
name="#(Html.NameFor(x => x.IsUSAResident))"
id="resFalse"
ng-value="false"
required
ng-model="model.IsUSAResident">
<label for="resFalse" class="pull-left">No</label>
</div>
Yes, you can shrink it using ng-repeat:
<div ng-init="options = [{id:'resTrue',value:true,label:'Yes'},{id:'resFalse',value:false,label:'No'}]">
<div ng-repeat="option in options"
class="rdio rdio-primary col-xs-4 col-sm-4 col-md-2 col-lg-3">
<input type="radio"
name="#(Html.NameFor(x => x.IsUSAResident))"
id="{{option.id}}"
ng-value="option.value"
required
ng-model="model.IsUSAResident">
<label for="{{option.id}}" class="pull-left">{{option.label}}</label>
</div>
</div>
There are ways to improve this code further. One would be to create a controller to hold the options (to get rid of ng-init):
angular.module('myApp')
.controller('yesNoRadioCtrl',function($scope){
$scope.options = [
{id:'resTrue', value:true, label: 'Yes'},
{id:'resFalse', value:false, label: 'No'}
];
});
The corresponding markup:
<div ng-controller="yesNoRadioCtrl">
<div ng-repeat="option in options"
class="rdio rdio-primary col-xs-4 col-sm-4 col-md-2 col-lg-3">
<input type="radio"
name="#(Html.NameFor(x => x.IsUSAResident))"
id="{{option.id}}"
ng-value="option.value"
required
ng-model="model.IsUSAResident">
<label for="{{option.id}}" class="pull-left">{{option.label}}</label>
</div>
</div>
This can be made more compact and reusable with directives. Let me know if you'd like to see that.
Jonathan is right. You can save some space, with just ng-repeat'ing your radio-inputs.
Here's how you could create your own directive and implement some more radio inputs, with much smaller code:
ยป Demo on plunker
JS
angular.module('foobar', [])
.controller('Controller', ['$scope', function($scope) {
$scope.zuzu = "a value";
$scope.bars = [
{id:"one"},
{id:"two"},
{id:"three"}
];
for(i=0;i<$scope.bars.length;i++) {
$scope.bars[i]["name"] = 'just-a-radio-group';
}
}])
.directive('myRadio', function() {
return {
restrict: 'E',
scope: {
data: '=',
ngModel: '=ngModel'
},
templateUrl: 'template.html'
};
});
HTML (index.html)
<body ng-app="foobar">
<div ng-controller="Controller">
<h3>{{zuzu}}</h3>
<!-- they won't update the scope -->
<my-radio ng-repeat="bar in bars" ng-model="zuzu" data="bar"></my-radio>
<!-- they will update the scope -->
<my-radio ng-model="zuzu" data="bars[0]"></my-radio>
<my-radio ng-model="zuzu" data="bars[1]"></my-radio>
<my-radio ng-model="zuzu" data="bars[2]"></my-radio>
</div>
</body>
HTML (template.html)
<div class="rdio rdio-primary col-xs-4 col-sm-4 col-md-2 col-lg-3">
<input type="radio"
name="data.name"
id="data.id"
ng-value="data.id"
required
ng-model="ngModel">
<label for="data.name"
class="pull-left"
>
{{data.id}}
</label>
</div>
Additional note, why ng-repeating the custom-directive won't update ng-model:
https://github.com/angular/angular.js/issues/1913

Resources