Calling script from Blazor with parameters

Question

I've been given a script function and would like to partially translate it to C# in a Blazor app

<script> 
    function pay() {
                    var token = document.getElementById('token').value;
                    var card = document.getElementById('card').value;
                    var exp = document.getElementById('exp').value;
                    var cvv = document.getElementById('cvv').value;
                   var paymentData = {
                        ssl_txn_auth_token: token,
                        ssl_card_number: card,
                        ssl_exp_date: exp ,
                        ssl_cvv2cvc2: cvv
                    };

                    ConvergeEmbeddedPayment.pay(paymentData);
                    return false;
                }
        </script>

I want to call the script (that is inside the script above)

 ConvergeEmbeddedPayment.pay(paymentData);

Directly from c# . Like so

await JsRuntime.InvokeVoidAsync("ConvergeEmbeddedPayment.pay", paymentData);

There is some good information here:

https://learn.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-3.1
But it stops short of helping me.

What kind of variable should I pass in the paymentData parameter? And how should I pass it? I've tried var , object and string and also tried JsonSerializer.Serialize( ); but no luck Based on suggestion from @BurningKarl I tried Dictionary and object[] but I get an error saying the content is missing or "Expected BEGIN_OBJECT but was STRING "

At the docs learn.microsoft.com/en-us/dotnet/api/… it specifies that args is a list of "JSON-serializable arguments". Have you tried a list with a single Dictionary<string, string> filled with the required data? — BurningKarl
– BurningKarl, Commented May 19, 2020 at 22:11

Roman Simuta · Accepted Answer · 2020-05-20 08:26:35Z

6

Looks like you have to create your own c# class that mimics the payment data object in your Javascript. Something like this

public class PaymentData
{
    public string ssl_txn_auth_token {get; set;}
    public string ssl_card_number{get; set;}
    public string ssl_exp_date{get; set;}
    public string ssl_cvv2cvc2{get; set;}
}

Then you have to create an instance of this class and pass it to InvokeVoidAsync as an argument.

var data = new PaymentData ()
    {
       ssl_txn_auth_token = "authtokenvalue",// you have to get it from control
       ssl_card_number = "card number",
       ssl_exp_date: "date", // probably it should be daytime or similar
       ssl_cvv2cvc2 = "111"
    }
await JsRuntime.InvokeVoidAsync("ConvergeEmbeddedPayment.pay", data);

answered May 20, 2020 at 8:26

Roman Simuta

964 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tony horn Over a year ago

I had originally made a class such as this, but it didn't work. I even tried to serialize the class and pass it that way. I tried your code and it works! It turns out that I forgot the {get;set} on one of the elements and so it couldn't be serialized/deserialized. THANK YOU!

Collectives™ on Stack Overflow

Calling script from Blazor with parameters

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related