set a value of checkbox while loading data from database using ajax

Question

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:

@page
@model BA_System.Pages.DataSharingModel
@{
}
<br />
<div class="container row p-0 m-0">
    <div class="col-12 border p-3 mt-3" style="background-color:white;">
        <table id="DataSharing_load" class="table table-striped table-bordered" style="width:100%">
            <thead>
                <tr>
                    <th>IsAnswerRequired</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

@section Scripts{
    <script src="~/js/DataSharingInfo.js"></script>
}

DataSharingInfo.js:

var dataTable;

$(document).ready(function () {
    loadDataTable();

});
function loadDataTable() {
    dataTable = $('#DataSharing_load').dataTable({
        "ajax": {
            "url": "/api/DataSharing",
            "type": "GET",
            "datatype": "json"
        },
        "columns": [
            {
                "data": "isAnswerRequired",
                "render": function (data) {
                    return `<div style='display:flex;justify-content:center;'>
                                  <div class='checkbox-rect'>
                                    <input type='checkbox' id='checkbox-rect1' name='checkboxname' onclick='UpdateAnswerRequired()' value=@'(${data} == 'true' ? 'checked' : null)'>
                                    <label for='checkbox-rect1'>Yes</label>
                                  </div>
                             </div>`;
                }, "width": "20%"
            }
        ],
        "language": { "emptyTable": "no data found" },
        "width": "100%"
    });
}

Answer 1

My code below worked for me, when I set the data as true the input checkbox will be checked.

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>
<div>
    <button id="btn1">load</button>
</div>
<div>
    <table id="DataSharing_load" class="table table-striped table-bordered">
    </table>
</div>

@section Scripts{
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

    <script>
        $("#btn1").click(function() {
            alert(1);
            loadDataTable();
        });
        function loadDataTable() {
            $('#DataSharing_load').dataTable({
                data:[
                    {
                        "isAnswerRequired": "false"
                    }
                ],
                columns: [
                    { 
                        data: "isAnswerRequired",
                        render: function (data) {
                            return data == "true" ? "<div><input type='checkbox' checked /></div>" : "<div><input type='checkbox' /></div>";
                        }
                    }
                ],
                "language": { "emptyTable": "no data found" },
                "width": "100%"
            });
        }
    </script>
}

or using ajax configuration:

my api:

public TestModel getData() {
            List<object> list = new List<object> {
                new { isAnswerRequired = "true" }
            };
            TestModel data = new TestModel { res = list };
            return data;
        }

ajax setting:

function loadDataTable() {
            $('#DataSharing_load').dataTable({
                //data:[
                //    {
                //        "isAnswerRequired": "true"
                //    }
                //],
                ajax: {
                    "url": "https://localhost:7108/home/getData",
                    "type": "GET",
                    "dataSrc":function (myJson) {
                        console.info(myJson)
                        return myJson.res;
                    }
                },
                columns: [
                    { 
                        data: "isAnswerRequired",
                        render: function (data) {
                            console.info(data);
                            return data == "true" ? "<div><input type='checkbox' checked /></div>" : "<div><input type='checkbox' /></div>";
                        }
                    }
                ],
                "language": { "emptyTable": "no data found" },
                "width": "100%"
            });
        }