将用户输入数据添加到DataTable中

Question

我为任务创建了一个选项卡，我希望用户在其中键入任务描述，状态等，并且当用户单击添加按钮时，我希望它显示带有输入信息的数据表。

在我的控制器中，有一个ActionResult函数，该函数接受Task表单作为参数，然后将输入中的值分配给新Task，然后将其添加到列表中。

后端：

    public IActionResult Status([FromBody]Task model)
    {
        List<Task> list = new List<Task>();
        try
        {
            Task tsk = new Task();
            tsk.Department = model.Department;
            tsk.Description = model.Description;
            tsk.Status = model.Status;
            list.Add(tsk);

            return StatusCode(200);
        }
        catch (Exception exception)
        {
            var errorResponse = new InternalServerErrorResponseModel();
            errorResponse.LogId = Guid.NewGuid().ToString();
            errorResponse.Message = exception.Message;
            errorResponse.StackTrace = exception.StackTrace;
            return StatusCode(500, errorResponse);
        }

    }

前面：

    <b>Department</b>
                                    <br />
                                    <select id="dep" class="btn btn-white dropdown-toggle">
                                        <option value="IT">IT</option>
                                        <option value="Finance">Finance</option>
                                        <option value="Project Managment">Project Managment</option>
                                    </select>
                                    <br />
                                    <b>Task description</b>
                                    <input id="desc" class="form-control" />
                                    <b>Task Status</b>
                                    <br />
                                    <select id="status" class="btn btn-white dropdown-toggle">
                                        <option value="Finished" style="background-color:#1ab394">Finished</option>
                                        <option value="Not Complete" style="background-color:#ed5565">Not Complete</option>
                                        <option value="No current tasks" style="background-color:rgb(137, 182, 255)">No current tasks</option>
                                    </select>
                                    <br />
                                    <table id="TaskTable" class="table-striped table-bordered table-hover dataTables-example">
                                        <thead>
                                            <tr>
                                                <th>Department</th>
                                                <th>Description</th>
                                                <th>Status</th>
                                            </tr>
                                        </thead>
                                        <tfoot>
                                            <tr>
                                                <th>Department</th>
                                                <th>Description</th>
                                                <th>Status</th>
                                            </tr>
                                        </tfoot>
                                    </table>
                                    <button class="btn btn-primary" onclick="addTask()">Add</button>
                                    <script>
                                        function addTask() {
                                            var stats = {
                                                Department: $("#dep").val(),
                                                Description: $("#desc").val(),
                                                Status: $("#status").val(),
                                            };

                                            $("#TaskTable").DataTable({
                                                "ajax": {
                                                    url: "@Url.Action("Status","Profile")",
                                                    contentType: "application/json",
                                                    type: "POST",
                                                    data: JSON.stringify(stats),
                                                    serverSide: true,
                                                    retrieve : true,
                                                    paging: false,
                                                    searching: false,
                                                    processing: true,

                                                    "columns": [
                                                        { "data": "Department", "name": "Department", "autoWidth": true },
                                                        { "data": "Description", "name": "Description", "autoWidth": true },
                                                        { "data": "Status", "name": "Status", "autoWidth": true },
                                                    ],
                                                },
                                            });
                                            $('#TaskTable').DataTable().clear().destroy();

                                            $('#TaskTable').DataTable();
                                        }

                                    </script>