Magento 2.4 constructing controller URL admin(backend) in JavaScript

Question

I tried to make a simple ajax call to my controller, but I can't generate the url to make the request

 requirejs(['jquery', 'Magento_Ui/js/modal/confirm', 'mage/url'], function ($, confirmation, urlBuilder) {
    'use strict';

        var requestUrl = urlBuilder.build('/productpricequote/email/send');
        console.log(requestUrl);
    
});

Try using requirejs, define, it doesn't generate the url needed to make the request to the controller, replace "'/productpricequote/email/send'" with "'/admin/productpricequote/email/send'", in the same way you send an error why it does not generate the key from the url => 'key/28074ed334019dac321376c4729761d20c4b04a8cb7fe4c1a54a1fb7b6d3200b/"

For lack of the key, it sends error 302, otherwise, it sends error 404

Can anyone help me out? Please

Answer 1

You can use \Magento\Framework\UrlInterface to create the url, then set the url in the components DataProvider or in a Block + template.

I'll explain the DataProvider method. This assumes your javascript is (or extends from) a ui component.

In the components DataProvider, add:

private $_urlBuilder;

public function __construct(
    \Magento\Framework\UrlInterface $_urlBuilder
) {
    $this->_urlBuilder = $_urlBuilder;
}


public function getData()
{
    $route = 'productpricequote/email/send';
    $url = $this->_urlBuilder->getUrl($route);//additional url params go here as array
    $items = $this->collection->getItems();
    foreach ($items as $model) {
        $this->loadedData[$model->getId()] = $model->getData();
        $this->loadedData[$model->getId()]['sendEmailUrl'] = $url;
    }
    return $this->loadedData;
}

In this example, I've extended the ImageUploader with a mixin (defined in requirejs-config).

define([
    'jquery'
], function ($) {
    'use strict';
    return function (ImageUploader) {
        return ImageUploader.extend({
            defaults: {
                imports: {
                    data: '${ $.provider }:data'
                }
            },
            initialize: function () {
                this._super();
            },
            getLink: async function () {
                let url = this.data.sendEmailUrl
                let result = await $.ajax({
                    showLoader: true,
                    url: url,
                    data: {form_key: window.FORM_KEY},//add additional url params after form key
                    type: 'POST',
                    dataType: 'json',
                    success: function(response){
                        
                    }
                });
                if (result.url) {
                    return result.url;
                }

            },

        });
    }
});