I have a code similar to this, in the View of my Asp.Net Core app:
@model Color.Models.AM
<div class="container">
<div class="card level-3">
<h4>AM</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="Create">
<div>
<input id="txt" type="text" value="" />
<input id="btn" type="button" value="Search" />
</div>
<div class="form-group">
<input id="cboAll" type="checkbox" value="CheckAll / unCheck" />
ALL<br />
<div class="wrapper">
@foreach (var cm in Model)
{
<div><input id=@cm.Name type="checkbox" name="selectedCdos" value=@cm.Id class="tipoo" />@cm.Name Roo: @cm.Roo</div>
}
</div>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
</div>
</div>
</div>
<style>
.wrapper {
width: 500px;
height: 200px;
overflow-y: scroll;
overflow-x: hidden;
}
.card {
background-color: #fff;
border-radius: 10px;
margin: 10% auto;
position: relative;
padding: 34px;
color: #444;
cursor: pointer;
overflow-x: auto;
}
.card.level-3:hover:before {
box-shadow: 0 0 80px #999999;
}
</style>
The important thing is simply to understand that, this generates a quantity N of CheckBoxes equal to the quantity of AM entities in my Database, which uses the attribute Id of AM as the value of each CheckBox.
The Model's code is something like this:
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;
namespace Color.Models
{
public class AM
{
[key]
public int Id { get; set; }
[Required]
public string Name { get; set; }
[Required]
public int Roo { get; set; }
}
}
And finally here a pic of what the view looks like: pic of the view
All this works completely fine and without problems, the CheckBoxes that I check are sent to the Controller, which does things with the chosen values.
What I want help with, and I have problems, however, it is with the following JavaScript code that is at the end of the view:
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function () {
$("#cboAll").click(function () {
if ($(this).is(":checked")) {
$(".tipoo").prop('checked', true);
}
else {
$(".tipoo").prop('checked', false);
}
});
$("input[id*=btn]").click(function () {
var searchvalue = $("input[id*=txt]").val();
if (searchvalue != "") {
$(".tipoo").each(function () {
if ($(this).val() == searchvalue) {
$(this).show();
}
else {
$(this).hide();
$(this.nextSibling).wrap('<span style="display:none"></style>');
}
})
}
else {
$("#cboAll,.tipoo").show();
}
})
})
</script>
This code generates the ALL Checkbox that selects all the values, and the search button that allows filtering them, but it has the following problems (because basically the javascript code doesn't work the way I would like it to).
1) This filter the Checkboxes by its Value, when I would like it to filter it by Id, or another label from the Checkbox (since what I have in "value= " is what I need to send to controller, while "Id" can be the text which the view displays).
Now let's say I change "value=@cm.Id" to "value=@cm.Name" to test how the search filter works, in that case the following problems arise:
2) The code only filters the data under exact match, when that isn't what I would like.
Pic that shows that if I search for "Pabl" it finds nothing.
If for example write "Mateo" and press the search button; Ok the view only shows me the CheckBox for Mateo, the same if I write Pablo, but this doesn't find me either of the two if I write for example "Mat" or "Pabl"; When I would like that when I search for "Pabl" it shows to me all the CheckBox that contain something written with the sequence of characters "Pabl", the only exception to this is that the script considers spaces, so if I look for Jan, it finds me "Jan Dos", because there is a space separation between the words 'Jan' and 'Dos'. But as I said, the way I would like it to work, is to show me all the CheckBoxes that contain the sequence "Pabl" when I search for "Pabl".
3) The ALL button always selects everything.
The way the JavaScript code works now, is that if I filter the data, and I press ALL, all the Checkboxes are selected, even those which were hidden, when I would like that if click on ALL and the data is filtered, this only select all the Checkboxes, that went through the filter (the not hidden ones).
4) The text of the CheckBox disappears if I click the search button a Second time.
Could someone really help me solve these 4 problems, and improve my Javascript code?
I have looked for alternative Javascript codes on the Internet for do all this, but none include all the functions that I mention, and what I like about the simplicity of my original code is that it allows me an easy control of the data, since it is really easy for me to get the Checkbox value in the controller; If the Div code is like this.
