Я пытаюсь добавить два ввода даты в таблицу данных jquery, к которой я могу получить доступ с моего контроллера.Цель состоит в том, чтобы отфильтровать таблицу по столбцу Дата выпуска.
Я попытался добавить входные данные даты на страницу cshtml и использовать значение document.getElementById ("startDate"). В функции .click, чтобы вводзначения будут установлены, когда пользователь нажимает кнопку поиска.Но когда я пытаюсь получить значения даты ввода в моем контроллере, используя Request.Form, значение равно нулю.
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>
vehicle.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
BEGIN
SELECT
*
FROM
[VehicleTable]
WHERE
Make = @SearchValue
AND
TRY_CAST(DateReleased AS DATE) >= @StartDate
AND
TRY_CAST(DateReleased AS DATE) <= @EndDate
END
Я ожидаю, что переменные startDate и endDate в VehiclesControllerчтобы установить любую дату, которую пользователь выбирает, например «07/09/2019», но только searchValue заполняется, когда я выбираю две даты, вводу марку автомобиля и нажимаю кнопку поиска.