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

Reply

igorbaldacci

Member

38 Points

217 Posts

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

Feb 18, 2021 03:57 PM|igorbaldacci|LINK

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.

my web: www.igorbaldacci.it - my book: www.giornidifollia.it

Reply

bruce (sqlwo...

All-Star

58124 Points

15641 Posts

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

Feb 18, 2021 04:35 PM|bruce (sqlwork.com)|LINK

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

bruce (sqlwork.com)

Reply

igorbaldacci

Member

38 Points

217 Posts

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

Feb 18, 2021 06:03 PM|igorbaldacci|LINK

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.

my web: www.igorbaldacci.it - my book: www.giornidifollia.it

Reply

Jerry Cai

Participant

940 Points

313 Posts

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

Feb 19, 2021 06:34 AM|Jerry Cai|LINK

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

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

Reply

igorbaldacci

Member

38 Points

217 Posts

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

Feb 19, 2021 07:52 AM|igorbaldacci|LINK

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

my web: www.igorbaldacci.it - my book: www.giornidifollia.it

Reply

igorbaldacci

Member

38 Points

217 Posts

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

Feb 19, 2021 07:53 AM|igorbaldacci|LINK

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.

my web: www.igorbaldacci.it - my book: www.giornidifollia.it