Invoke JavaScript methods in a Razor component

- [Instructor] One of the great things about Blazor WebAssembly is that it can perform client-side functionality without the need for JavaScript. However, unlike JavaScript, Blazor WebAssembly is unable to access the browser's DOM directly. Mozilla defines the Direct Object Model, or DOM, as a programming interface for web documents. It represents the page, so the programs can change the document structure, style, and content. There are certain events that Blazor can't do, such as showin'' an alert box. However, one thing it can do is call JavaScript methods through the use of JavaScript Interlop. Using JavaScript Interlop involves injecting an instance of IJS Runtime into a Razor component. IJs Runtime represents an instance of a JavaScript runtime and has two methods. The InvokeAsync method allows you to call a JavaScript function and return a value. The InvokeVoidAsync method also calls the JavaScript function, but it doesn't return a value. In this JavaScript file, we have two functions. The first function gets the number of minutes the user is offset to UTC time. This will help us show the correct time, based on where the user is located. The second function displays an alert box. The goal of this function is to display an alert box, when a user adds a product to their shopping cart. In the header Razor component, there is a string property showing the time. Let's go ahead and set this when the component is initialized. First, we want to find out the number of minutes that user is offset from UTC. This will require calling the GetLocalOffsetMinutes function, from the JavaScript file. To do that, an instance of JS runtime has to be injected into the Razor component. Call the inject directive, giving it a type of IJS run time, and called it jsRuntime. Next, declare a variable called offsetMinutes. From the JS runtime instance, call await, jsRuntime, and the InvokeAsync method. The InvokeAsync method, it's best a generic type. This is the return type, where the JavaScript function is invoked. This will be set as double. Then set the JavaScript function that is being invoked. This is called GetLocalOffsetMinutes. Finally, set the time now property to the user's local time zone. Set the TimeNow property by calling DateTime dot UtcNow. To declare the UTC offset, call the Subtract function and paste in the offset as a parameter. This can be done by calling TimeSpan and the FromMinutes method. Paste it in the OffsetMinutes variable, that was just set as the parameter. Finally, convert it as a 24 hour clock formatted string. This is done by using the ToString method, and pastin' in HH colon mm as the parameter. The time zone has been set as UTC on the user's machine. Running the app, the time matches the one displayed in the user's date and time settings. Let's change the setting to UTC minus eight. The change should be reflected in the Blazor WebAssembly app. Restarting the app, the time on the website matches the same time set on the user's machine. When adding a product to the shopping cart we want to add an alert saying the product has been added. To do that, go into the product details Razor component. Once again, inject the jsRuntime instance by calling the at inject directive, setting the type as IJSRuntime and calling it jsRuntime. Afterwards, find the AddToCartAsync method. The alert will be displayed once a successful API call has been made to add the product to the cart. This is done by calling await, and then the jsRuntime instance. This time the InvokeVoidAsync method is called. The JavaScript function is called AddToCart, and it expects a product name as a parameter. Call the InvokeVoidAsync method, pasting in AddToCart as the parameter. There is an additional parameter, that allows for declaring the parameters of the JavaScript function. As we want to paste the product name in as a parameter, we do that by calling Product dot Name. In the product details page let's add an item to the shopping cart. An alert has been displayed, saying that the product has been added to the cart. Pressing okay to this redirects the user to the shopping cart, where the product has been successfully added.