Answered by:
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.
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