Как получить дату из DatePicker

Question

Я создаю систему бронирования. Пользователь выбирает дату из DatePicker и в зависимости от этой даты мне нужно отобразить доступное время. Как это: https://ibb.co/NTChTdL. Мне нужно отображать только то время, которое еще не было забронировано, и каждый раз, когда пользователь выбирает другую дату, которую мне нужно обновить, и показывать доступное время для этого дня. Дело в том, что я не знаю, как извлечь выбранную дату из представления и передать ее контроллеру.

Пока у меня есть это:

Контроллер:

// GET: Rooms/Details/5
public async Task<IActionResult> Details(Guid? id)
{
   if (id == null)
    {
        return NotFound();
    }
    var room = await _room.GetItemByIdAsync(id);
    if (room == null)
    {
        return NotFound();
    }
    var roomVM = new RoomInfoViewModel();
    roomVM.Date = DateTime.Today;
    roomVM.Name = room.Name;
    roomVM.Description = room.Description;
    return View(roomVM);
}

[HttpPost]
public async Task<IActionResult> Details(RoomInfoViewModel roomVM)
{
    if(ModelState.IsValid)
    {
        var list = _room.GetAvailableTimes(roomVM.Date, roomVM.RoomId);
        ViewBag.Reservations = list;
    }

    return View("Details", roomVM);
}

вид:

@model Escape.ViewModels.RoomInfoViewModel

@{
    ViewData["Title"] = "Details";
}

@section Scripts {

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $('#ReleaseDate').datepicker({
                minDate: 0
            });
        });
    </script>
    <script>
        $(function GetFeed() {

            $('#get_feed').click(function () {


                var Date = $('#date').val();
                var RoomID = $('#roomId').val();
                var _data = {
                    'Date': Date,
                    'RoomId': RoomID,
                }
                $.ajax({
                    url: 'rooms/details',
                    type: 'POST',
                    data: _data,
                    contentType: "application/json",
                    dataType: 'json',
                    success: function (s) {

                        console.log('success' + s)
                    },
                    error: function (e) { console.log('something went wrong!', e, Date) }
                });
            });
    </script>
}

<h1>Details</h1>

<div>
    <h4>Room</h4>
    <hr />
    <dl class="row">
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.Name)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.Name)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.Description)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.Description)
        </dd>
        <dt class="col-sm-2">
            @Html.EditorFor(m => m.Date, new { htmlAttributes = new { @id = "ReleaseDate", @class = "form-control", @required = "required", @value = @DateTime.Today } })
        </dt>
    </dl>
</div>
<div>
    <a asp-action="Index">Back to List</a>
</div>
<div>
    <a asp-action="Create" asp-controller="Reservations" asp-route-id="" class="btn btn-option3 btn-lg">Next</a>
</div>

Метод создания списка доступных времен:

public List<TimeSpan> GetAvailableTimes(DateTime SelectedDate, Guid RoomId)
{
    List<TimeSpan> availableDates = new List<TimeSpan>();
    var room = _context.Rooms.Find(RoomId);

    for (int i = room.ToTime - room.FromTime; i <= room.ToTime; i++)
    {
        availableDates.Add(new TimeSpan(0, i, 0, 0, 0));
    }

    if ((room.Reservations).Count == 0)
    {
        return null;
    }
    else
    {
        foreach (var reservationToCheck in room.Reservations)
        {
            int hour = (reservationToCheck.ReservationTime).Hour;
            int minute = (reservationToCheck.ReservationTime).Minute;

            if ((reservationToCheck.ReservationTime).Month == SelectedDate.Month 
                 && (reservationToCheck.ReservationTime).Day == SelectedDate.Day)
            {
                if (availableDates.Any(f => f.Hours == hour))
                {
                    int index = availableDates.FindIndex(f => f.Hours == hour);
                    availableDates.RemoveAt(index);
                }
            }
        }

        return availableDates;
}

Не могли бы вы помочь мне получить выбранную дату из просмотра и отображения доступного времени?

Answer 1

Дело в том, что я не знаю, как извлечь выбранную дату из представления и передать ее контроллеру.

Я предполагаю, что свойство Dateв вашей модели типа DateTime.Чтобы получить выбранную дату из вида:

var Date = $('#Date').datepicker('getDate');

Чтобы передать дату на сторону контроллера:

var Date = $('#Date').datepicker('getDate');
var RoomID = $('#roomId').val();
var _data = {
    'Date': Date.toISOString(),
    'name': RoomID,
}
$.ajax({
   //rooms controller and details action
    url: '/rooms/details',
    type: 'POST',
    data: _data,                
    dataType: 'json',
    success: function (s) {

        console.log('success' + s)
    },
    error: function (e) { console.log('something went wrong!', e, Date) }
});

Сторона сервера:

[HttpPost]
public async Task<IActionResult> Details(RoomInfoViewModel roomVM)
{
    if (ModelState.IsValid)
    {

    }

    return View();
}

Answer 2

В вашей модели RoomInfoViewModel включите поле, в котором будет храниться ваш Date из средства выбора даты. Например:

public DateTime yourDate {get;set;}

Тогда в вашем представлении:

Заменить эту строку:

<input class="datepicker" data-val="true" data-val-required="Date is required" id="ReleaseDate" name="Date" value="@DateTime.Today" onclick="" />

со строго типизированной привязкой модели:

@Html.EditorFor(m => m.yourDate, new { htmlAttributes = new { @id = "ReleaseDate", @class = "form-control", @required="required",@value=@DateTime.Today}})

И, наконец, в ваших сценариях это называется:

<script type="text/javascript">

   $(document).ready(function () {
        $('#ReleaseDate').datepicker({
           minDate: 0
        });
   });
</script>

Когда вы публикуете форму, выбранная вами дата будет отправлена ​​вашему контроллеру из вашей модели, поскольку вы строго привязали ее к своей модели. Если вы хотите отправить свою дату методу в вашем контроллере, то вы можете использовать AJAX для достижения этой цели. Получите вашу дату из id и затем опубликуйте ее в вашем методе в вашем контроллере.