如何在数据表中显示时间?仅显示Obj对象的数据表

Question

我的数据表只显示

以下是数据表显示的

这是我在EmployeeSettings控制器上的代码，用于从数据库表中获取数据。我已经尝试将其转换为字符串或日期时间，但错误将显示为"无法转换系统"。字符串/日期时间的时间跨度

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);
}

在我的视图中，我声明了一些ajax供表加载。

@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 class="fa fa-gears"></span>&nbsp;Settings</h1>
<div class="employee-form">
@*<div class="form-group">
@Html.LabelFor(x => x.EmployeeCode, new { @class = "form-label" })
@Html.TextBoxFor(x => x.EmployeeCode, new { @class = "form-control", @id = "employeeid" })
</div>*@
<div class="form-group">
@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 class="form-group">
@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 class="form-group">
@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 class="form-group">
@Html.LabelFor(x => x.AllowOT, new { @class = "form-label" })
@Html.TextBoxFor(x => x.AllowOT, new { @class = "form-control" })
</div>*@
<div class="form-group">
<label class="control-label" style="color:white;">
Allowed OT
</label>
<div>
<label class="checkbox-inline">
@Html.CheckBox("YES", false, new { @class = "test" })
YES
</label>
</div>
</div>
<div class="form-group">
@Html.LabelFor(x => x.SalaryPerDay, new { @class = "form-label", @style = "color:white;" })
@Html.TextBoxFor(x => x.SalaryPerDay, new { @class = "form-control" })
</div>
<div class="form-group">
@Html.LabelFor(x => x.WorkDays, new { @class = "form-label", @style = "color:white;" })
@Html.TextBoxFor(x => x.WorkDays, new { @class = "form-control" })
</div>
<div class="form-group">
<input type="submit" value="Submit" class="btn btn-primary" />
<input type="reset" value="Reset" class="btn btn-primary" />
</div>
</div>
<table id="EmployeeSettingsTable" class="display table table-striped" 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 class="fa fa-backward"></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>

这是我的模型。

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; }
}
}

我不知道为什么当涉及到TimeSpan时，数据表只显示Obj Obj。非常感谢。

Answer 1

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);