My Data table only shows

Here is what Data table Shows

This is my code on my EmployeeSettings Controller to get the data from the database table. I already try to convert it to string or datetime but error will appear like Cannot convert System.TimeSpan to String/DateTime

   public ActionResult GetData()
    {
        var employeesetting = (from es in db.EmployeeSettingss.ToList()
                              join e in db.Employees.ToList() on es.EmployeeId equals e.Id

                          select new EmployeeSettingsListModel
                          {
                              Id = es.Id,
                              EmployeeName = e.FirstName   " "   e.MiddleName   " "   e.LastName,
                              EmployeeIn = es.EmployeeIn,
                              EmployeeOut = es.EmployeeOut,
                          });

    return Json(new { data = employeesetting.ToList() }, JsonRequestBehavior.AllowGet);
}

This is my view where I declared some ajax for my table to load.

@using PayrollWeb.Models
@model PayrollWeb.Models.EmployeeSettingsFormModel
@{
    ViewBag.Title = "AddOrEdit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@using (Html.BeginForm("AddOrEdit", "EmployeeSettings", FormMethod.Post, new { onsubmit = "return SubmitFormEmployeeSettings(this)" }))
{
    @Html.HiddenFor(model => model.Id)

    <h1 style="text-align: center;"><span ></span>&nbsp;Settings</h1>

    <div >
        @*<div >
                @Html.LabelFor(x => x.EmployeeCode, new { @class = "form-label" })
                @Html.TextBoxFor(x => x.EmployeeCode, new { @class = "form-control", @id = "employeeid" })
            </div>*@

        <div >
            @Html.LabelFor(x => x.EmployeeId, new { @class = "form-label", @style = "color:white;" })
            @Html.DropDownListFor(x => x.EmployeeId, Model.Employees, "", new { @class = "form-control" })
        </div>

        <div >
            @Html.LabelFor(x => x.EmployeeIn, new { @class = "form-label", @style = "color:white;" })
            @Html.TextBoxFor(x => x.EmployeeIn, new { @class = "form-control", @type = "time", @id = "employeein" })
        </div>

        <div >
            @Html.LabelFor(x => x.EmployeeOut, new { @class = "form-label", @style = "color:white;" })
            @Html.TextBoxFor(x => x.EmployeeOut, new { @class = "form-control", @type = "time", @id = "employeeout" })
        </div>

        @*<div >
                @Html.LabelFor(x => x.AllowOT, new { @class = "form-label" })
                @Html.TextBoxFor(x => x.AllowOT, new { @class = "form-control" })
            </div>*@

        <div >
            <label  style="color:white;">
                Allowed OT
            </label>
            <div>
                <label >
                    @Html.CheckBox("YES", false, new { @class = "test" })
                    YES
                </label>
            </div>

        </div>

        <div >
            @Html.LabelFor(x => x.SalaryPerDay, new { @class = "form-label", @style = "color:white;" })
            @Html.TextBoxFor(x => x.SalaryPerDay, new { @class = "form-control" })
        </div>

        <div >
            @Html.LabelFor(x => x.WorkDays, new { @class = "form-label", @style = "color:white;" })
            @Html.TextBoxFor(x => x.WorkDays, new { @class = "form-control" })
        </div>

        <div >
            <input type="submit" value="Submit"  />
            <input type="reset" value="Reset"  />
        </div>
    </div>

    <table id="EmployeeSettingsTable"  style="width: 100%">
        <thead>
            <tr>
                <th>Employee Name</th>
                <th>Employee In</th>
                <th>Employee Out</th>
                <th></th>
            </tr>
        </thead>
    </table>

    <a href="@Url.Action("Index", "Payroll")"><span ></span>&nbsp;&nbsp;Back to Dashboard</a>

}

<script type="text/javascript">
    //para hindi double check sa checkbox
    //$(document).ready(function () {
    //    $(".test").on('change', function () {
    //        $(".test").not(this).prop('checked', false);
    //    });
    //});

        var dataTable;
        $(function () {
            dataTable = $('#EmployeeSettingsTable').DataTable({
                "ajax": "@Url.Action("getdata", "EmployeeSettings")",
                "columns": [
                    { "data": "EmployeeName" },
                    { "data": "EmployeeIn" },
                    { "data": "EmployeeOut" },
                    {
                        "data": "Id", "render": function (data) {
                            return "<a class='btn btn-default btn-sm' onclick=PopUpForm('@Url.Action("AddOrEdit","EmployeeSettings")/"   data   "')><i class='fa fa-pencil'></i>Edit</a>&nbsp;<a class='btn btn-danger btn-sm' style='margin-left:5px;' onclick=Delete("   data   ")><i class='fa fa-trash'></i>Delete</a>"
                        },
                        "orderable": false,
                        "searchable": false,
                        "width": "150px"
                    }
                ],
                "language": {
                    "emptyTable": "No data found"
                }
         });
        });

    function SubmitFormEmployeeSettings(form) {
        $.validator.unobtrusive.parse(form);
        if ($(form).valid()) {
            $.ajax({
                type: "POST",
                url: form.action,
                data: $(form).serialize(),
                success: function (data) {
                    if (data.success) {
                        PopUp.dialog('close');
                        dataTable.ajax.reload();

                        $.notify(data.message, {
                            globalPosition: "top center",
                            className: "success"
                        })
                    }
                }
            });
        }
        return false;
    }
</script>

This is my model.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace PayrollWeb.Models
{
    public class EmployeeSettingsListModel : BaseModel
    {
        public string EmployeeName { get; set; }
        public TimeSpan EmployeeIn { get; set; }
        public TimeSpan EmployeeOut { get; set; }

    }
}

I didn't know why the datatable is only displaying Obj Obj when it comes to TimeSpan. Thank you!

CodePudding user response：

try :

....
            var rawData = mployeesetting.ToList().select (b=>new
            {
                Id = b.Id,
                EmployeeName = b.EmployeeName,
                EmployeeIn = b.EmployeeIn.ToString("g"),
                EmployeeOut = b.EmployeeOut.ToString("g"),

            });




            return Json(new { data = rawData }, JsonRequestBehavior.AllowGet);