Warm tip: This article is reproduced from stackoverflow.com, please click
asp.net-mvc c# razor daterangepicker

DateRangePicker MVC razor

发布于 2020-03-30 21:16:34

I am trying to pass selected date-range to the controller from View using Razor syntax. How it can be achieved?

I am using this daterangepicker http://www.daterangepicker.com.

I can use viewBag to pass the values but I want to know the right way to pass the values using Razor Syntax.

I have tried the @Html.TextBox("Model.Date", null, new { @id="reservationtime", @class = "form-control pull-left" }) but it is also not setting the daterange values.

<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)
{
    //
}
Questioner
plural
Viewed
81
Przemysław 2020-01-31 19:36

You can do it using JQuery like below. Just passing it to controller using POST but you would need to have change Index() parameters to match.

$.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'
});

Other way would be to create hidden inputs for your data. When you pick date range from datepicker then you should set values of this hidden fields with JS and on form submit they will be passed with the model.

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