Question

我正在创建预订系统。用户从日期选择器中选择一个日期，根据该日期，我需要显示可用时间。像这样：https://ibb.co/NTChTdL。我只需要显示尚未预订的时间，并且每次用户选择其他日期时，我都需要更新并显示当天的可用时间。问题是，我不知道如何从视图中检索选定的日期并将其传递给控制器。

到目前为止，我有这个：

控制器：

task = loop.create_task(coro_fn())

# later
task.cancel()

视图：

async with foo() as bar:
   # is it possible to cancel before getting here,
   # while waiting to enter the context manager?
   await bar.baz()

# later
# How do I get a handle to the context manager for cancellation?

方法创建可用时间列表：

// 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);
}

您能帮我从视图中检索所选日期并显示可用时间吗？

Answer 1

在您的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获取日期，然后将其发布到控制器中的方法中。

Answer 2

问题是，我不知道如何从视图中检索选定的日期并将其传递给控制器。

我假设您模型中的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();
}

如何从日期选择器中检索日期

2 个答案: