首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >将html日期输入值添加到ajax post

将html日期输入值添加到ajax post
EN

Stack Overflow用户
提问于 2019-06-10 08:07:24
回答 1查看 1.2K关注 0票数 0

我正在尝试向jquery datatable添加两个日期输入,我可以从我的控制器访问它们。目标是按Date Released列筛选该表。

我尝试向cshtml页面添加日期输入,并在.click函数中使用document.getElementById("startDate").value,以便在用户单击search时设置输入值。但是,当我尝试使用Request.Form在控制器中获取输入日期值时,该值为空。

index.cshtml

代码语言:javascript
复制
<div class="container-fluid">
    <div class="row">
        <div class="col-sm pull-left">
            <label>start: <input type="date" id = "startDate"/></label>
        </div>
        <div class="col-sm pull-left">
            <label>end: <input type="date" id = "endDate"/></label>
        </div>
    </div>
</div>

<body>
    <div class="row">
        <table id = "vehicles" class="table table-striped" cellspacing="0">
            <thead class="thin-border-bottom">
                <tr>
                    <th>Make</th>
                    <th>Model</th>
                    <th>Engine</th>
                    <th>Date Released</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
            </tfoot>
        </table>
    </div>
</body>

vehicles.js

代码语言:javascript
复制
(function($) {
    var vehiclesTable = $("#vehicles")
        .dataTable({
            initComplete: function() {
                var input = $('.dataTables_filter input').unbind().attr('maxlength', 30),
                    self = this.api(),
                    $searchButton = $('<button class="btn btn-primary">')
                        .text('Search')
                        .click(function() {
                            var start = document.getElementById("startDate").value;
                            var end = document.getElementById("endDate").value;
                            self.search(input.val()).draw();
                        })

                $('.dataTables_filter').append($searchButton);
            },
            "searching": true,
            "processing": true,
            "serverSide": true,
            "responsive": true,
            "filter": true,
            "ajax": {
                "url": "/Vehicles/LoadVehicles",
                "method": "POST",
                "datatype": "json"
            },
            "columns": [
                {"data": "Make", "name": "Make", "autoWidth": true, "orderable": false},
                {"data": "Model", "name": "Model", "autoWidth": true, "orderable": false},
                {"data": "Engine", "name": "Engine", "autoWidth": true, "orderable": false},
                {"data": "DateReleased", "name": "DateReleased", "autoWidth": true, "orderable": false},
                {"data": "Price", "name": "Price", "autoWidth": true, "orderable": false},
            ],
            "ordering":false,
            "paging": true,
            "stateSave": false,
            "lengthMenu": [10, 25, 50, 100]
        });
})(jQuery);

VehiclesController.cs

代码语言:javascript
复制
public IActionResult LoadVehicles()
{
    string draw = HttpContext.Request.Form["draw"].FirstOrDefault();

    string start = Request.Form["start"].FirstOrDefault();

    string length = Request.Form["length"].FirstOrDefault();

    string sortColumn = Request.Form["columns[" + Request.Form["order[0]]"].FirstOrDefault() + "][name]"].FirstOrDefault();

    string searchValue = Request.Form["search[value]"].FirstOrDefault();

    string startDate = Request.Form["startDate"]; //null

    string endDate = Requst.Form["endDate"]; //null

    int pageSize = length != null ? Convert.ToInt32(length) : 0;
    int skip = start != null ? Convert.ToInt32(start) : 0;
    int recordsTotal = 0;

    List<Vehicle> VehicleData = new List<Vehicle>();
    VehicleData = objVehicle.GetVehicles(searchValue).ToList();

    recordsTotal = VehicleData.Count();

    var data = VehicleData.Skip(skip).Take(pageSize).ToList();

    return Json(new {draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data});

}

VehiclesDao.cs

代码语言:javascript
复制
public IEnumerable<Vehicle> GetVehicles(string searchValue) //add startDate and endDate
{
    List<Vehicle> lstVehicle = new List<Vehicle>();

    using (SqlConnection conn = new Sql Connection(connectionString))
    {
        SqlCommand cmd = new SqlCommand("VehicleSearch"), conn);
        cmd.Parameters.AddWithValue("@SearchValue"), searchValue);
        //cmd.Parameters.AddWithValue("@StartDate"), startDate);
        //cmd.Parameters.AddWithValue("@EndDate"), endDate);
        cmd.CommandType = CommandType.StoredProcedure;
        conn.Open();
        SqlDataReader rdr = cmd.ExecuteReader();

        while (rdr.Read())
        {
            Vehicle Vehicles = new Vehicle();
            
            Vehicles.Make = rdr["Make"].ToString();
            Vehicles.Model = rdr["Model"].ToString();
            Vehicles.Engine = rdr["Engine"].ToString();
            Vehicles.DateReleased = rdr["DateReleased"].ToString();
            Vehicles.Price = rdr["Price"].ToString();

            lstVehicle.Add(Vehicles);
        }
    }

    return lstVehicle;
}

VehicleSearch存储过程

代码语言:javascript
复制
BEGIN   

SELECT 
    Make,
    Model,
    Engine,
    DateReleased,
    Price
FROM
    [VehicleTable]
WHERE
    Make = @SearchValue
AND
    TRY_CAST(DateReleased AS DATE) >= @StartDate
AND 
    TRY_CAST(DateReleased AS DATE) <= @EndDate

END

我希望VehiclesController中的startDate和endDate变量被设置为用户选择的任何日期,比如"07/09/2019",但是当我选择两个日期,输入汽车制造商,然后单击search时,只有searchValue会被填充。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-06-10 08:16:35

用于您的html

代码语言:javascript
复制
<div class="container-fluid">
<div class="row">
    <div class="col-sm pull-left">
        <label>start: <input type="date" id = "startDate" name="startDate"/></label>
    </div>
    <div class="col-sm pull-left">
        <label>end: <input type="date" id = "endDate" name="endDate"/></label>
    </div>
</div>

对于您的ajax

代码语言:javascript
复制
"ajax": {
            "url": "/Vehicles/LoadVehicles",
            "method": "POST",
            "datatype": "json",
             data: function (d) {
                    d.startDate= $('input[name=startDate]').val();
                    d.endDate = $('input[name=endDate]').val();
                }
        }

在将日期传递给查询之前,您可能还需要进行一些日期转换

代码语言:javascript
复制
            double st = double.Parse(startdate);               
            double ed = double.Parse(enddate); 

            TimeSpan timest = TimeSpan.FromMilliseconds(st);
            TimeSpan timeed = TimeSpan.FromMilliseconds(ed);

            DateTime sdate = new DateTime(1970, 1, 1).AddHours(1) + timest;
            DateTime edate = new DateTime(1970, 1, 1) + timeed;
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56519237

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档