I’m using asp core and ajax to load a data table. When I got the data from the database and the value of isAnswerRequired=true, so the checkbox should be ‘checked’, I used the ‘question mark conditional’ to change the value, but nothing happened.
Please assist me in resolving the problem, I want the checkbox to be checked when the isAnswerRequired=true.
DataSharing.cshtml:
JavaScript
x
21
21
1
@page
2
@model BA_System.Pages.DataSharingModel
3
@{
4
}
5
<br />
6
<div class="container row p-0 m-0">
7
<div class="col-12 border p-3 mt-3" style="background-color:white;">
8
<table id="DataSharing_load" class="table table-striped table-bordered" style="width:100%">
9
<thead>
10
<tr>
11
<th>IsAnswerRequired</th>
12
</tr>
13
</thead>
14
</table>
15
</div>
16
</div>
17
18
@section Scripts{
19
<script src="~/js/DataSharingInfo.js"></script>
20
}
21
DataSharingInfo.js:
JavaScript
1
31
31
1
var dataTable;
2
3
$(document).ready(function () {
4
loadDataTable();
5
6
});
7
function loadDataTable() {
8
dataTable = $('#DataSharing_load').dataTable({
9
"ajax": {
10
"url": "/api/DataSharing",
11
"type": "GET",
12
"datatype": "json"
13
},
14
"columns": [
15
{
16
"data": "isAnswerRequired",
17
"render": function (data) {
18
return `<div style='display:flex;justify-content:center;'>
19
<div class='checkbox-rect'>
20
<input type='checkbox' id='checkbox-rect1' name='checkboxname' onclick='UpdateAnswerRequired()' value=@'(${data} == 'true' ? 'checked' : null)'>
21
<label for='checkbox-rect1'>Yes</label>
22
</div>
23
</div>`;
24
}, "width": "20%"
25
}
26
],
27
"language": { "emptyTable": "no data found" },
28
"width": "100%"
29
});
30
}
31
Advertisement
Answer
My code below worked for me, when I set the data as true
the input checkbox will be checked.
JavaScript
1
47
47
1
@{
2
ViewData["Title"] = "Home Page";
3
}
4
5
<div class="text-center">
6
<h1 class="display-4">Welcome</h1>
7
<p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
8
</div>
9
<div>
10
<button id="btn1">load</button>
11
</div>
12
<div>
13
<table id="DataSharing_load" class="table table-striped table-bordered">
14
</table>
15
</div>
16
17
@section Scripts{
18
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
19
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
20
21
<script>
22
$("#btn1").click(function() {
23
alert(1);
24
loadDataTable();
25
});
26
function loadDataTable() {
27
$('#DataSharing_load').dataTable({
28
data:[
29
{
30
"isAnswerRequired": "false"
31
}
32
],
33
columns: [
34
{
35
data: "isAnswerRequired",
36
render: function (data) {
37
return data == "true" ? "<div><input type='checkbox' checked /></div>" : "<div><input type='checkbox' /></div>";
38
}
39
}
40
],
41
"language": { "emptyTable": "no data found" },
42
"width": "100%"
43
});
44
}
45
</script>
46
}
47
or using ajax configuration:
my api:
JavaScript
1
8
1
public TestModel getData() {
2
List<object> list = new List<object> {
3
new { isAnswerRequired = "true" }
4
};
5
TestModel data = new TestModel { res = list };
6
return data;
7
}
8
ajax setting:
JavaScript
1
29
29
1
function loadDataTable() {
2
$('#DataSharing_load').dataTable({
3
//data:[
4
// {
5
// "isAnswerRequired": "true"
6
// }
7
//],
8
ajax: {
9
"url": "https://localhost:7108/home/getData",
10
"type": "GET",
11
"dataSrc":function (myJson) {
12
console.info(myJson)
13
return myJson.res;
14
}
15
},
16
columns: [
17
{
18
data: "isAnswerRequired",
19
render: function (data) {
20
console.info(data);
21
return data == "true" ? "<div><input type='checkbox' checked /></div>" : "<div><input type='checkbox' /></div>";
22
}
23
}
24
],
25
"language": { "emptyTable": "no data found" },
26
"width": "100%"
27
});
28
}
29