Accessing Class variable

[Brio]

I am writing a Blazor Server app and getting a CS1009 error on a Blazor Component

The information that I need was stored in the class (Fields) in a previous page.

On the page I am getting the error I successfully display an element of the class in the HTTP portion of this Blazor Component.

Yet in the code section all references to the Fields class fail. In the _imports.razor the folder containing this class is mentioned.

I am attaching a text file with the Component code

 

[jmcilhinney]

I am attaching a text file with the Component code

Please don't do that. Copy the code from the IDE and paste it directly into your post, formatted as code for the appropriate language.

 

[NoUserHere]

That error relates to using "\" instead of "\\" or @"\"

Double check your strings for the above or posts your code as asked above so we can see what you done.

 

[jmcilhinney]

In future, please also provide the error message rather than just the error code. Sure, we can search online for the code to see what it means but we shouldn't need to do that when you already have that information.

 

[Brio]

Thanks for the answers but they don't apply to my problem. I know now not to "attach" the code but copy/paste into the question.

I ask that only members that have Blazor experience answer.

I was not instantiating the Fields class in the components. Because I thought that a "new" instance would not carry on the existing values.

I needed to get access to the price code that was already in the Fields class. All I had to do is to declare the variable "Felds.priceid" as static and I got past this problem.

The problem that I have now (and this is Blazor specific) is that I need to invoke a Javascript function. Blazor requires that Javascript functions reside in the wwwroot\js folder. Then we have to invoke the call via an async Task function.. " await jsRuntime.InvokeVoidAsync("redirectToCheckout", sessionId);"

I have the sessionId populated and I have "injected" the Interface in the calling function "@inject IJSRuntime jsRuntime".

I have done this before in another project and it works but now I am getting the error.

Microsoft.JSInterop.JSException: Could not find 'redirectToCheckout' in 'window'.
Error: Could not find 'redirectToCheckout' in 'window'.
    at [URL]https://localhost:44352/_framework/blazor.server.js:8:35211[/URL]

Redirect to checkout function is in a file called script.js in the wwwroot\js folder

Here is the code for scripts.js (I just altered the key)

redirectToCheckout = function (sessionId) {
    var stripe = Stripe('pk_live_124AVCDASDjkjkjk36jkkOPPPP3466KLkkkkkkklllllllmmmmmm7878787878787');
    stripe.redirectToCheckout({
        sessionId: sessionId
    }).then(function (result) {
        if (result.error) {
            var displayError = document.getElementById("stripe-error");
            displayError.textContent = result.error.message;
        }
    });
};

Here is the full code for Checkout.razor component (which no longer gives me the original CS1009 error)

@page "/Checkout"

@using Stripe.Checkout
@using BrioCharge.Data
@using Microsoft.Extensions.Configuration;
@inject NavigationManager NavigationManager
@inject IJSRuntime jsRuntime

<p>
    Assessed cost for data processing is @Fields.priceFmt

</p>
<button class="btn btn-primary mx-3" @onclick="@(e => CheckoutHandler(Fields.prcid))">Accept Charge</button>


@code
{
        //   [Parameter]   // I no longer need to pass the price as a parameter
        //public string PrcCode { get; set; }

    public static string PrcCode = Fields.helper;  // contains Stripe client id
    private string str;
    private static string price;
    public string msg;
    public Fields localField = new Fields();   // Don't need this

    public Checkout()
    {
        PrcCode = Fields.prcid;

    }
    public IConfiguration Configuration { get; }
    public Checkout(IConfiguration configuration)
    {
        Configuration = configuration;
        var auxstr = Configuration.GetSection("ConfigMessage");
        msg = auxstr.ToString();
        // public string from = (string) auxstr;

    }
 
    private async Task CheckoutHandler(string prcid)
    {
        string sessionId = await CreateCheckoutSessionAsync(prcid); // PrcCode); // Fields.prcid);

        await jsRuntime.InvokeVoidAsync("redirectToCheckout", sessionId);
    }


    public async Task<string> CreateCheckoutSessionAsync(string PrcCode, string customerId = null) //PrcCode, string customerId = null)
    { 
      
        var options = new SessionCreateOptions
        {
            Customer = customerId,
            PaymentMethodTypes = new List<string>
            {
                "card",
            },
            LineItems = new List<SessionLineItemOptions>
            {
                new SessionLineItemOptions
                {
                    Price = PrcCode,
                    Quantity = 1
                },
            },
            Mode = "payment",
            SuccessUrl = $"{NavigationManager.BaseUri}success?session_id={{CHECKOUT_SESSION_ID}}",
            CancelUrl = $"{NavigationManager.BaseUri}checkout",

            //SuccessUrl = $"https://localhost:44367/success?session_id={{CHECKOUT_SESSION_ID}}",
            //CancelUrl = $"https://localhost:5001/checkout",
        };

        return (await new SessionService().CreateAsync(options)).Id;
    }
    protected override void OnInitialized()
    {
     //   PrcCode = localField.helper;
    }
}

The constructor is present because I had added a constructor to address a previous problem, and I no longer need the OnInitalized

 

[Brio]

Thanks to all that answered.

Posting here let me think over what I was doing wrong.

The code was complaining that I couldn't find the js file. Looking for a solution I came across this article

"Secure Stripe Checkout with Blazor JSInterop | C# Tutorials Blog"

All I needed to do was add a reference to the file in my _Hosts.cshtml page

<script src="https://js.stripe.com/v3/" defer></script>
<script src="js/scripts.js" defer></script>

And it is working now.

 

[Brio]

To Skydiver:

Check out blazorise.com/docs/usage/bootstrap/

 

[Skydiver]

I'm assuming you wanted to reply to the other thread that got off topic talking about getting Blazor to work with Bootstrap. If so, let me know and I can move the post.