如何在数据 Table 中显示时间？仅显示 Obj obj 的数据表

Question

我的数据table只显示

Here is what Data table Shows

这是我在 EmployeeSettings Controller 上的代码，用于从数据库 table 获取数据。我已经尝试将其转换为字符串或日期时间，但会出现错误 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);
}

这是我的观点，我声明了一些 ajax 供 table 加载。

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

    }
}

我不知道为什么数据table在涉及到 TimeSpan 时只显示 Obj Obj。谢谢！

Answer 1

尝试：

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

如何在数据 Table 中显示时间？仅显示 Obj obj 的数据表

How Can I display Time in Data Table? Datatable only showing Obj obj

asp.net

asp.net-mvc

asp.net-mvc-3

asp.net-mvc-4