Json 数据在 html table 中不流行 在 asp.net mvc 5 中使用 jQuery ajax

Question

我正在创建一个 ee 门户，用户在其中登录，一旦他登录..然后他就会来到报告页面.. 在报告页面中，他可以选择 select 日期范围来获取详细信息， 我想使用 jQuery 和 ajax 在 html table 中显示日期范围搜索数据， 当我尝试时它没有填充， 我尝试了每一种方法，但没有结果

我的控制器

[HttpGet]
    public ActionResult HwportalGetData(DateTime startDate, DateTime endDate)
    {
        SCAN_HW_PortalEntities db = new SCAN_HW_PortalEntities();



        try
        {

            string _startDate = startDate.ToString("dd-MMM-yyyy");
            string _endDate = endDate.AddDays(1).ToString("dd-MMM-yyyy");




            var result = db.Scan_HW_Terminal.Where(x => x.CreatDate >= startDate && x.CreatDate <= endDate).OrderBy(x => x.EmpID).ToList();

            if (result.ToList().Count > 0)
            {
                TempData["total"] = result.Count.ToString();
                return Json(result, JsonRequestBehavior.AllowGet);
            }
            else
                return Json("Invalid");
        }
        catch (Exception ex)
        {
            return Json(ex);
        }

        // return Json(db.Scan_HW_Terminal.ToList());
    }

}

}

我的cshtml查看

<div class="grid-container" id="DataShowGride">
                    <Table Class="table table-bordered" id="myTable">
                        <thead>
                            <tr>
                                <th>Employee ID</th>
                                <th>Create Date</th>
                                <th>City Name</th>
                                <th>Device Type</th>
                                <th>Status</th>
                                <th>Team Leader Name</th>
                                <th>Serial Number</th>
                            </tr>
                        </thead>

                    </Table>
                </div>

<script type="text/javascript">

$('#btnShow').click(function (e) {
    debugger;
    var mFromDate = $("#FromDate").val();
    var mToDate1 = $("#ToDate1").val();
    //$('#loader').show();
    $.ajax({
        url: '@Url.Action("HwportalGetData", "Home")',
        type: "GET",
        data: {startDate: mFromDate, endDate: mToDate1 },
        //startDate: mFromDate, endDate: mToDate1
        dataType: 'json',
        success: function (data) {
            var tr;
            //Append each row to html table  
            for (var i = 0; i < json.length; i++) {
                tr = $('<tr/>');
                tr.append("<td>" + json[i].EmpID + "</td>");
                tr.append("<td>" + json[i].CreatDate + "</td>");
                tr.append("<td>" + json[i].City + "</td>");
                tr.append("<td>" + json[i].DeviceType + "</td>");
                tr.append("<td>" + json[i].DeviceStatus + "</td>");
                tr.append("<td>" + json[i].TeamLeader + "</td>");
                tr.append("<td>" + json[i].TerminalSlno + "</td>");
                $('#myTable').append(tr);

            }
        },
        error: function () {

        }

    });
});

Answer 1

据我了解，您正在以 json 对象的形式发送开始日期和结束日期。 json 以非常不同的形式存储日期，它已经是一个字符串，因此转换为字符串不会改变格式。

手动将日期格式更改为 dd-mm-yyyy。也很难判断这是否是您的实际问题，所以在此之前我建议调试您的控制器代码并查看您的日期显示格式。

如果您的日期格式有误，您的代码将会中断，因为您使用了 try catch 并且 return 会出现异常消息而不是您要查找的实际数据，但您没有在你的看法。在这行代码上放置一个断点：

     var result = db.Scan_HW_Terminal.Where(x => x.CreatDate >= startDate && x.CreatDate <= endDate).OrderBy(x => x.EmpID).ToList();

并检查它是继续还是中断以捕获，在这种情况下，变量 ex 将显示错误消息。检查错误是什么。如果我没看错，用上面的方法应该可以解决你的问题。

我还建议将 ActionResult 更改为 JsonResult。由于您正在 returning Json 数据。