DateRangePicker MVC 剃须刀答案

【问题标题】：DateRangePicker MVC razorDateRangePicker MVC 剃须刀
【发布时间】：2020-01-31 19:36:49
【问题描述】：

我正在尝试使用 Razor 语法将选定的日期范围从 View 传递给控制器。如何实现？

我正在使用这个 daterangepicker http://www.daterangepicker.com。

我可以使用 viewBag 传递值，但我想知道使用 Razor 语法传递值的正确方法。

我尝试了@Html.TextBox("Model.Date", null, new { @id="reservationtime", @class = "form-control pull-left" })，但它也没有设置日期范围值。

<div class="box-body">
    <div class="form-group">
        @Html.DropDownListFor(m => m.employeeCode, Model.EmployeeList, "All",
       new { @class = "form-control select2", @id = "employeeCode", @name = "employeeCode"  })

    </div>
</div>

<div class="box-body">
    <div class="form-group">
        <div class="input-group date timepicker"
             data-date-format="HH:mm"
             data-date-useseconds="false"
             data-date-pickDate="false">
            <div class="input-group-addon">
                <i class="fa fa-clock-o"></i>
            </div>
            <input type="text" class="form-control pull-left" id="reservationtime">

        </div>
            <!-- /.input group -->
    </div>
</div>

@section Scripts {
    <script type="text/JavaScript">

        $(document).ready(
            function () {
                $("#employeeCode").select2();

                $('#reservationtime').daterangepicker({
                    //use24hours: true,
                    timePicker: true,
                    timePickerIncrement: 30,
                    format: 'MM/DD/YYYY HH:mm',
                    //showMeridian: false,
                    timePicker24Hour: true,

                })
                //Date range picker with time picker
                $('#reservationtime').on('apply.daterangepicker', function (ev, picker) {
                    //Model.startDate = picker.startDate.format('YYYY-MM-DD HH:mm');
                 //   Model.endDate = picker.endDate.format('YYYY-MM-DD HH:mm');
                  // PASS VALUE TO CONTROLLER HERE
                    console.log(picker.startDate.format('YYYY-MM-DD HH:mm'));
                    console.log(picker.endDate.format('YYYY-MM-DD HH:mm'));

                });
            }               

        );    

        function applyFilter() {    
            window.location.href = '@Url.Action("Index", "History")';     
        }   
    </script>
}


public ActionResult Index(HistoryModel model)
{
    //
}

【问题讨论】：

标签： c# asp.net-mvc razor daterangepicker

【解决方案1】：

您可以使用 JQuery 来完成，如下所示。只需使用 POST 将其传递给控制器，但您需要更改 Index() 参数以匹配。

$.ajax({
    url: '/Home/Index',
    type: 'POST',
    data: {
        startDate: picker.startDate.format('YYYY-MM-DD HH:mm'),
        endDate: picker.endDate.format('YYYY-MM-DD HH:mm'),
    },
    contentType: 'application/json; charset=utf-8'
});

另一种方法是为您的数据创建隐藏输入。当您从 datepicker 中选择日期范围时，您应该使用 JS 设置此隐藏字段的值，并在表单提交时将它们与模型一起传递。

@Html.HiddenFor(model => model.StartDate)
@Html.HiddenFor(model => model.EndDate)

【讨论】：