Get the value of the Date in Bootstrap DateTimePicker in razor page

Question

User1231912896 posted

Hi,

I have inserted a Bootstrap DateTimePicker in my Index Razor Page. If I select a date, I call my c# method "OnGetMyFunctionAsync()".

I use Ajax to call the method and it start well, but I don't know how to get the value of the selected date.

Maybe I don't understand how Razor pages works.

This is my .cs file:

        //[BindProperty]
        public string strMyDate { get; set; }
        
        public async Task OnGetMyFunctionAsync()
        {
            try
            {
                // Get the Selected Date
                //
                //strMyDate = Request.Form["strMyDate"];
                strMyDate = Request.Query["strMyDate"];
                
                [ .. code .. ]

            }
            catch (Exception ex)
            {
                errorMessage = ex.Message;
            }
        }

I have tried to use the [BindProperty] to define mu "strMyDate" variable. And I have tried to get the value of the string using "Request.Form" and "Request.Query", but nothing.

This is my Index.cshtml page. Note that using "@Model.strMyDate" the value is regularly showed in the input box.

        @page "{handler?}"
        
        <input type="text" class="datetimepicker" name="strMyDate" value="@Model.strMyDate" />

                                <!--   DataPicker   -->
                                <script type="text/javascript">$(function () {
                                $('.datetimepicker').datetimepicker({
                                    icons: {
                                        time: "fa fa-clock-o",
                                        date: "fa fa-calendar",
                                        up: "fa fa-chevron-up",
                                        down: "fa fa-chevron-down",
                                        previous: 'fa fa-chevron-left',
                                        next: 'fa fa-chevron-right',
                                        today: 'fa fa-screenshot',
                                        clear: 'fa fa-trash',
                                        close: 'fa fa-remove'
                                    },
                                    inline: false,
                                    locale: 'it',
                                    minDate: '1930-01-01',
                                    format: 'DD/MM/YYYY'
                                });
                                $('.datetimepicker').on('dp.change', function (e) {

                                    $.ajax({
                                        type: 'GET',
                                        url: '/Index?handler=MyFunction',
                                        dataType: 'json'
                                    });

                                });
                            });</script>

Please, could someone help me to understand where I'm wrong.

Thanks.

Igor.

Answer 1

User-474980206 posted

several issues with your code. the handler should return an action result 

 public async Task<IActionResult> OnGetMyFunctionAsync()
 {
       ...
      return new JsonResult(...);
}

the property must be bound for get:

 [BindProperty(SupportsGet = true)]
 public string strMyDate { get; set; }
        

the jquery does not pass any values.

$.ajax({
        type: 'GET',
        data: {strMyDate : e.date},
        url: '/Index?handler=MyFunction',
        dataType: 'json'
});

Answer 2

User1231912896 posted

Hi bruce,

I'm trying your suggestione. Could you please specify me the "JsonResult(...)?

I have tried the follow but doesn't work, I receive the null value of "strMyDate":

        public async Task<IActionResult> OnGetMyFunctionAsync()
        {
            try
            {
                strMyDate = Request.Query["strMyDate"];
                
                return new JsonResult(strMyDate);

            }
            catch (Exception ex)
            {
                errorMessage = ex.Message;
            }
        }

And in the Ajax call, If I use "e.date" I receive an error, so I have tried this:

$('.datetimepicker').on('dp.change', function (e) {

    $.ajax({
        type: 'GET',
        data: {strMyDate : e.datetimepicker},
        url: '/Index?handler=MyFunction',
        dataType: 'json'
    });
});

Thank you.

Answer 3

User1312693872 posted

Hi,igorbaldacci

Where is the original post, could you please share your razor view?

I can get the data in this demo, you can check this:

<div class='input-group date'>
    <input type='text' id="datetimepicker" class="form-control datetimepicker" />
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

@section Scripts
{
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $('#datetimepicker').datepicker();
        $('.datetimepicker').on('change', function (e) {
            $.ajax({
                type: 'GET',
                data: { strMyDate: $('#datetimepicker').val()  },
                url: '/Index?handler=MyFunction',
                dataType: 'json'
            });
        });
    </script>
}

public async Task<IActionResult> OnGetMyFunctionAsync()
        {
            try
            {
                var str = Request.Query["strMyDate"];
                return new JsonResult(str);
            }
            catch (Exception ex)
            {
                var errorMessage = ex.Message;
                return new JsonResult(errorMessage);
            }           
        }

Result:

Best Regards,

Jerry Cai

Answer 4

User1231912896 posted

Hi Jerry,

thank you very much for your explanation. Now It works. Thank you for the high details of your answer.

I don't know where is my post! This is a real mystery! I'll repost it again, as a new answer. I don't know if some administrator could help me to adjust the things.

igorbaldacci

Answer 5

User1231912896 posted

Hi,

I have inserted a Bootstrap DateTimePicker in my Index Razor Page. If I select a date, I call my c# method "OnGetMyFunctionAsync()".

I use Ajax to call the method and it start well, but I don't know how to get the value of the selected date.

Maybe I don't understand how Razor pages works.

This is my .cs file:

//[BindProperty]
        public string strMyDate { get; set; }
        
        public async Task OnGetMyFunctionAsync()
        {
            try
            {
                // Get the Selected Date
                //
                //strMyDate = Request.Form["strMyDate"];
                strMyDate = Request.Query["strMyDate"];
                
                [ .. code .. ]

            }
            catch (Exception ex)
            {
                errorMessage = ex.Message;
            }
        }

I have tried to use the [BindProperty] to define mu "strMyDate" variable. And I have tried to get the value of the string using "Request.Form" and "Request.Query", but nothing.

This is my Index.cshtml page. Note that using "@Model.strMyDate" the value is regularly showed in the input box.

@page "{handler?}"
        
        <input type="text" class="datetimepicker" name="strMyDate" value="@Model.strMyDate" />

                                <!--  Impostazioni DataPicker   -->
                                <script type="text/javascript">$(function () {
                                $('.datetimepicker').datetimepicker({
                                    icons: {
                                        time: "fa fa-clock-o",
                                        date: "fa fa-calendar",
                                        up: "fa fa-chevron-up",
                                        down: "fa fa-chevron-down",
                                        previous: 'fa fa-chevron-left',
                                        next: 'fa fa-chevron-right',
                                        today: 'fa fa-screenshot',
                                        clear: 'fa fa-trash',
                                        close: 'fa fa-remove'
                                    },
                                    inline: false,
                                    locale: 'it',
                                    minDate: '1930-01-01',
                                    format: 'DD/MM/YYYY'
                                });
                                $('.datetimepicker').on('dp.change', function (e) {

                                    $.ajax({
                                        type: 'GET',
                                        url: '/Index?handler=MyFunction',
                                        dataType: 'json'
                                    });

                                });
                            });</script>

Please, could someone help me to understand where I'm wrong.

Thanks.

Igor.

Answer 6

User1231912896 posted

Hi Jerry, just a little questions: how to refresh the page to reload the new selected data?