DateRangePicker MVC бритва - PullRequest
Новая
       10

DateRangePicker MVC бритва

1 голос
/ 31 января 2020

Я пытаюсь передать выбранный диапазон дат контроллеру из View с использованием синтаксиса Razor. Как это может быть достигнуто?

Я использую этот 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)
{
    //
}

1 Ответ

1 голос
/ 31 января 2020

Вы можете сделать это, используя 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'
});

Другой способ - создать скрытые входы для ваших данных. Когда вы выбираете диапазон дат из указателя даты, вы должны установить значения этих скрытых полей с помощью JS, и при отправке формы они будут переданы вместе с моделью. 

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