I'm trying to add two date inputs to a jquery datatable that I can access from my controller. The goal is to filter the table by the Date Released column.
I've tried adding date inputs to the cshtml page and using document.getElementById("startDate").value in the .click function so the input values would be set when the users clicks search. But when I try to get the input date values in my controller using Request.Form, the value is null.
index.cshtml
<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
(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
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
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 stored procedure
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
I would expect the startDate and endDate variables in the VehiclesController to be set to whatever date the user selects like "07/09/2019", but only searchValue is populated when I select two dates, enter a vehicle make, and click search.
