locked
Get the value of the Date in Bootstrap DateTimePicker in razor page RRS feed

  • 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.

    Thursday, February 18, 2021 3:57 PM

Answers

  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, February 19, 2021 6:34 AM

All replies

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

    Thursday, February 18, 2021 4:35 PM
  • 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.

    Thursday, February 18, 2021 6:03 PM
  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, February 19, 2021 6:34 AM
  • 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

    Friday, February 19, 2021 7:52 AM
  • 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.

    Friday, February 19, 2021 7:53 AM
  • User1231912896 posted

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

    Friday, February 19, 2021 10:55 AM