locked
How to call a c# method from javascript inside a razor page? RRS feed

  • Question

  • User1231912896 posted

    Hi all,

    I'm using a DateTimePicker inside my razor page, and I want to call a c# async method on the "changeDate" event of it.

    This is my javascript, I'm trying to use jQuery:

    <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({
                    async: true,
                    url: "myFunction()",
                    dataType: "json",
                    success: function (data) { ret = data; }
                });
    
            });
        });</script>

    This is my .cs code:

            public async Task MyFunction()
            {
                try
                {
                   [ ... my code ... ]
                }
                catch (Exception ex)
                {
                    errorMessage = ex.Message;
                }
            }

    It doesn't work.

    Some one could help me, please?

    I repeat that I'm in a razor page, not in Blazor component.

    Wednesday, February 17, 2021 2:42 PM

Answers

  • User-821857111 posted

    You are working with a "named handler". You pass in the name of the handler without the onpost or onget prefix or the async suffix, and you either pass that as a query string value named "handler" or you add an optional route parameter to your page named "{handler?}"

      $('.datetimepicker').on('dp.change', function (e) {
    
                $.ajax({
                    type: 'POST',
                    url: '/index?handler=MyFunction',
                    dataType: "json"
                });
    
            });

    Read all about it: https://www.learnrazorpages.com/razor-pages/handler-methods

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 17, 2021 6:00 PM

All replies

  • User-474980206 posted

    The function needs to be a razor page handlers. Handlers name must begin with On<verb> in you case OnPost, so the function is

    public Task<MyModel> OnPostMyFunction()
    {
       ....
    }

    The in Ajax you pass the url <page name>/myfunction

    Wednesday, February 17, 2021 4:00 PM
  • User1231912896 posted

    Thanks bruce,

    I have tried this, but it doesn't work:

            $('.datetimepicker').on('dp.change', function (e) {
    
                $.ajax({
                    type: 'POST',
                    url: '/index/onPostMyFunctionAsync',
                    dataType: "json"
                });
    
            });

    Any idea?

    Wednesday, February 17, 2021 5:17 PM
  • User-821857111 posted

    You are working with a "named handler". You pass in the name of the handler without the onpost or onget prefix or the async suffix, and you either pass that as a query string value named "handler" or you add an optional route parameter to your page named "{handler?}"

      $('.datetimepicker').on('dp.change', function (e) {
    
                $.ajax({
                    type: 'POST',
                    url: '/index?handler=MyFunction',
                    dataType: "json"
                });
    
            });

    Read all about it: https://www.learnrazorpages.com/razor-pages/handler-methods

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 17, 2021 6:00 PM
  • User-474980206 posted

    on reflection I find this just poor design (add Ajax handlers to a razor page). You should create a webapi controller for your Ajax calls.

    Thursday, February 18, 2021 12:35 AM
  • User1231912896 posted

    Thank you Mikesdotnett, especially for your link, it clarify me a lot of things.

    Your suggestion works, the only change I made was the use of GET instead of POST.

    Thursday, February 18, 2021 7:47 AM
  • User1231912896 posted

    Bruce maybe you are right.

    To simplify: I use a webapi to load data in my razor page, but I call it directly by "myFunction" method in c# code, and not in an Ajax call

    I think I have more changes to manipulate datas and variables that I need in the page. But this is only my opinion. I'm new in use of razor page.

    Thanks for your time.

    Igor.

    Thursday, February 18, 2021 7:50 AM