Skip to content

Instantly share code, notes, and snippets.

@mota57

mota57/CheckboxExample.cs

Last active October 3, 2018 10:07
Show Gist options
  • Save mota57/78c3ac5998908d92dab677cafcbe60a6 to your computer and use it in GitHub Desktop.
Save mota57/78c3ac5998908d92dab677cafcbe60a6 to your computer and use it in GitHub Desktop.
Download ZIP
angularjs checkboxes submit post without ajax. asp.net mvc 4
Raw
CheckboxExample.cs
public class MenuItem
{
public int Id {get; set;}
public string Name {get; set;}
public IEnumerable<MenuItem> MenuItems {get;set;}
}
public class HomeController: Controller {
public ActionResult Create()
{
//load list of nodes...
return View(new List<MenuItem>()
{
new MenuItem
{
Id=1,
Name="foo",
IsSelectedItem=false,
MenuItems = new List<MenuItem>()
{
new MenuItem {
Id=1,
Name="a",
IsSelectedItem=false,
},
new MenuItem {
Id=2,
Name="B",
IsSelectedItem=false,
}
}
},
new MenuItem
{
Id=2,
Name="fee",
IsSelectedItem=false,
MenuItems = new List<MenuItem>()
{
new MenuItem {
Id=1,
Name="A",
IsSelectedItem=false,
},
new MenuItem {
Id=2,
Name="B",
IsSelectedItem=false,
}
}
}
});
}
[HttpPost]
public async Task<ActionResult> Create(IEnumerable<MenuItem> vm)
{
//debug and check the code that all the checkbox even false are posted back
return View();
}
//in razor
}
Raw
checkboxNodes.cshtml
@model IEnumerable<MenuItem>
<form action="Create">
<checkbox-list t nodes="@Html.Raw(Json.Encode(Model))"></checkbox-list>
</form>
<script>
(function () {
'use strict';
angular
.module('mainApp')
.component('checkbox-list',
{
template: `
<ul>
<li ng-repeat="item in vm.nodes track by $index">
<label><input type="checkbox" name="[{{$index}}].IsSelectedItem" value="{{item.IsSelectedItem}}" ng-change="vm.onSelectParent(item)" ng-model="item.IsSelectedItem"
/>{{item.Name}}</label>
<input type="hidden" name="[{{$index}}].IsSelectedItem" value="false" autocomplete="off"/>
<input type="hidden" name="[{{$index}}].Id" value="{{item.Id}}" autocomplete="off"/>
<input type="hidden" name="[{{$index}}].Name" value="{{item.Name}}" autocomplete="off"/>
<ul>
<li ng-repeat="child in item.MenuItems">
<label>
<input type="checkbox"
value="{{child.IsSelectedItem}}"
name="[{{$parent.$index}}].MenuItems[{{$index}}].IsSelectedItem"
ng-change="vm.onSelectChild(child, item)"
ng-model="child.IsSelectedItem" value="{{child.Id}}"> {{child.Name}}
<input type="hidden" name="[{{$parent.$index}}].MenuItems[{{$index}}].IsSelectedItem" value="false" autocomplete="off"/>
<input type="hidden" name="[{{$parent.$index}}].MenuItems[{{$index}}].Id" value="{{child.Id}}" autocomplete="off"/>
<input type="hidden" name="[{{$parent.$index}}].MenuItems[{{$index}}].Name" value="{{child.Name}}" autocomplete="off"/>
</label>
</li>
</ul>
</li>
</ul>
`,
controller: CheckboxController,
controllerAs: 'vm',
bindings: {
nodes: '<',
}
});
function CheckboxController() {
var vm = this;
vm.onSelectParent = onSelectParent;
vm.onSelectChild = onSelectChild;
vm.$onInit = function () {
console.log(vm.nodes);
}
function onSelectParent(nodeParent) {
var value = nodeParent.IsSelectedItem;
angular.forEach(nodeParent.MenuItems, function (child, index) {
child.IsSelectedItem = value;
});
}
function onSelectChild(child, nodeParent) {
if (child.IsSelectedItem === true && nodeParent.IsSelectedItem == false) {
nodeParent.IsSelectedItem = true;
} else if (child.IsSelectedItem == false && (nodeParent.MenuItems.filter(_ => _.IsSelectedItem == true).length === 0)) {
nodeParent.IsSelectedItem = false;
}
}
}
})();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment