Как передать параметр в функцию JavaScript, которая заполняет div из модели страницы на его страницу Razor? - PullRequest
Новая
       10

Как передать параметр в функцию JavaScript, которая заполняет div из модели страницы на его страницу Razor?

0 голосов
/ 31 октября 2019

Я пытаюсь использовать DropinUI для оплаты Braintree, и для его настройки необходимо отправить сгенерированный токен в функцию javascript на моей странице. У меня есть следующая разметка на моей странице Razor: 

<div id="dropin-container"></div>
<button id="submit-button">Request payment method</button>
<script>
    function configureBraintreeClient(clientToken) {
        var button = document.querySelector('#submit-button');

        braintree.dropin.create({
            authorization: clientToken,
            container: '#dropin-container'
        }, function (createErr, instance) {
            button.addEventListener('click', function () {
                instance.requestPaymentMethod(function (requestPaymentMethodErr, payload) {
                    // Submit payload.nonce to your server
                });
        });
    });
}
</script>

div # dropin-container заполняется результатом функции configureBraintreeClient. Итак, мне нужно передать clientToken при загрузке страницы.

Моя модель страницы для генерации токена клиента: 

public class IndexModel : PageModel
    {
        private readonly IJSRuntime _jsRuntime;

        public IndexModel(IJSRuntime jsRuntime)
        {
            _jsRuntime = jsRuntime;
        }

        public IActionResult OnGet()
        {
            // Create gateway
            var gateway = new BraintreeGateway
            {
                Environment = Environment.SANDBOX,
                MerchantId = "xxxxxxx",
                PublicKey = "xxxxxxx",
                PrivateKey = "xxxxxxx"
            };

            var clientToken = gateway.ClientToken.Generate();

            JSRuntimeExtensions.InvokeVoidAsync(_jsRuntime, "configureBraintreeClient", clientToken);

            // Not sure if this is needed, doesn't work with return type of 
            // void and this line removed either.
            Page();
        }
    }

Это не работает. DIV никогда не заполняется.

Я могу вставить клиентский токен непосредственно в разметку, и он отлично работает , так что он как-то связан с передачей клиентского токена на страницу со страницы. модель. Разве я не должен использовать расширение JSRuntime?

Я попытался установить клиентский токен как свойство модели и вставить его в функцию с синтаксисом бритвы, например authorization: @Model.ClientToken, но он не работает.

Я пытался копатьчтобы лучше понять жизненный цикл страницы, но ничего, что я нашел, не помогло мне разобраться в этой проблеме.

Я не вижу ошибок в консоли разработчика моего браузера или в Visual Studio, но я не знаюмного об отладке javascript в ASP .NET Core.

Как правильно передать параметр в функцию javascript, которая обновляет div как этот?

1 Ответ

1 голос
/ 31 октября 2019

Поскольку у нас нет merchant ID, Public key и Private key, убедитесь, что вы сгенерировали правильный токен, тогда вы можете попробовать это:

1.IndexModel (): 

private readonly IJSRuntime _jsRuntime;

public IndexModel(IJSRuntime jsRuntime)
{
    _jsRuntime = jsRuntime;
}

[BindProperty]
public string clientToken { get; set; }

public void OnGet()
{
    // Create gateway
    var gateway = new BraintreeGateway
    {
        Environment = Braintree.Environment.SANDBOX,
        MerchantId = "xxxxxxx",
        PublicKey = "xxxxxxx",
        PrivateKey = "xxxxxxx"
    };

    clientToken = gateway.ClientToken.Generate();

    JSRuntimeExtensions.InvokeVoidAsync(_jsRuntime, "configureBraintreeClient", clientToken);
}

2.Razor Page (не нужно использовать функцию): 

<div id="dropin-container"></div>
<button id="submit-button">Request payment method</button>

<script src="https://js.braintreegateway.com/web/dropin/1.20.4/js/dropin.min.js">
</script>
    <script>
            var button = document.querySelector('#submit-button');
            braintree.dropin.create({
                authorization: '@Model.clientToken',
                container: '#dropin-container'
            }, function (createErr, instance) {
                button.addEventListener('click', function () {
                    instance.requestPaymentMethod(function (requestPaymentMethodErr, payload) {
                        // Submit payload.nonce to your server
                    });
            });
        });
    </script>

3.Test (Вы можете видеть, что токен заполнен в js): enter image description here Ссылка:

https://developers.braintreepayments.com/start/hello-client/javascript/v3

Я могу вставить клиентский токен непосредственно в разметку, и он отлично работает, поэтому он как-то связан с передачей клиентского токенана страницу из модели страницы. Разве я не должен использовать расширение JSRuntime?

Для этого, если вы хотите использовать клиентский токен, я предлагаю вам обратиться к: https://developers.braintreepayments.com/start/tutorial-drop-in-node

Для авторизации выможно также использовать ключ токенизации .

...