Hi All,

I am very new in Asp.Net Core MVC web application development.

How to Bind Datatables.net based on dropdown and checkbox selected value on click of button Asp.Net Core MVC

Index.cshtml

@model SLB.ETLWebApp.ViewModel.MappingStudyViewModel
@{
    Layout = "~/Views/Shared/_MappingLayout.cshtml";
    ViewBag.Title = "Mapping Study/Scenario/Project";
}

<link href="~/css/MasterStyle.css" rel="stylesheet" />

<div class="tab-content" id="myTabContent">
	<h1>Filter</h1>
	<table class="defaultTable">
		<tr>
			<td>
				<label class="control-label">Study</label>
			</td>
			<td>
				&nbsp;:&nbsp;
			</td>
			<td>
				<select id="ddlStudy" class="form-control col-md-8"
					asp-items="@(new SelectList(@Model.StudyList, "StudyId", "StudyName"))" onchange = "UserChanged();">
				</select>
			</td>
		</tr>
		<tr>
			<td>
				<label class="control-label">Scenario</label>
			</td>
			<td>
				&nbsp;:&nbsp;
			</td>
			<td>
				<select id="ddlScenario" class="form-control col-md-8"
					asp-items="@(new SelectList(@Model.ScenariosList, "ScenarioId", "ScenarioName"))">
				</select>
			</td>
		</tr>
		<tr>
			<td>
				<label class="control-label">Project</label>
			</td>
			<td>
				&nbsp;:&nbsp;
			</td>
			<td>
				<select id="ddlProject" class="form-control col-md-8"
					asp-items="@(new SelectList(@Model.ProjectList, "ProjectId", "ProjectName"))">
				</select>
			</td>
		</tr>
		<tr>
			<td>
				<label class="control-label">Active</label>
			</td>
			<td>
				&nbsp;:&nbsp;
			</td>
			<td>
				<input id="chkActive" type="checkbox" checked="checked" style="width: 20px; height: 30px;" />
			</td>
		</tr>
	</table>
	<button id="btnFilter" style="border: none;background-color: transparent;"><img src="@Url.Content("~/images/Apply.png")" style="height:30px;width:30px;" /></button>
</div>

<table id="DT_grdMappingStudy" class="display table table-bordered table-striped table-hover" style="width:100%">
    <thead>
        <tr>
            <th>Id</th>
            <th>Study</th>
            <th>Scenario</th>
            <th>Project</th>
            <th>Mapping Type</th>
            <th>Active</th>
            <th>Edit</th>
            <th>Delete</th>
        </tr>
    </thead>
</table>

@section Scripts{

	<script type="text/javascript">
        var gridDataOperation;
        var grdTable;

        $(document).ready(function () {
            GetGridData();
            bindGrid(gridDataOperation);
        })

        function GetGridData() {
            var actionUrl = "@Url.Action("LoadGridData", "Mapping")";
            $.ajax({
                type: 'GET',
                url: actionUrl,
                async: false,
                cache: false,
                success: function (responseData) {
                    gridDataOperation = responseData;
                    console.log(responseData);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                },
                beforeSend: function (jqXHR, settings) {
                },
                complete: function (jqXHR, textStatus) {
                },
            });
        }

        function bindGrid(gridData) {
            grdTable = $('#DT_grdMappingStudy').DataTable({

                data: gridData,
                order: [[2, 'desc']],
                columns: [
                    { title: "Id", data: 'id', "autoWidth": true },
                    { title: "Study", data: 'study', "autoWidth": true },
                    { title: "Scenario", data: 'scenario', "autoWidth": true },
                    { title: "Project", data: 'project', "autoWidth": true },
                    { title: "Mapping Type", data: 'mappingType', "autoWidth": true },
                    { title: "Active", data: 'status', "autoWidth": true }
                ],
                processing: true, //show progress bar
                filter: false, //disable filter (search box)
                searching: false, //Disable searching abilities in DataTables
                lengthChange: false, //Disable Record number per page
                info: false, //Will hide "1 to n of n entries" Text at bottom

                columnDefs: [
                    {
                        //hiding the Primary key of the table and also unsearchable.
                        targets: [0],
                        visible: false,
                        searchable: false
                    },
                    {
                        targets: [6],
                        orderable: false,
                        render: function (data, type, row) {

                            return '<a class="btn btn-info" href="/MappingStudy/Upsert?Id=' + row.Id + '"><i class="fas fa-pen"></i></a>';

                            //return '<a href = "/MappingStudy/OperationEdit?OperationId=' + row.DailyOperationId + '"><span style="cursor:pointer;">'
                            //    + '<i title="' + (row.IsEditable ? 'Edit Action' : 'View Action') + '" class="fas fa-pen"></i></span></a>'
                            //    + (row.AttachCount == 0 ? '' : '<i style="color: white;font-size: 20px;margin-left: 5px;" class="fa fa-paperclip fa-2x"></i>');
                        }
                    },
                    {
                        targets: [7],
                        orderable: false,
                        data: null,
                        render: function (data, type, row) {
                            return "<a href='#' class='btn btn-danger' onclick=DeleteData('" + row.Id + "'); ><i class='fas fa-trash-alt'></i></a>";
                        }
                    },
                ],
            });
        }
	</script>
}

Please Help me how to achieve this, I tried a code but seems I am doing it in a wrong way. Thank you in advance.