Blazor Tutorial : JavaScript Interop | Calling JavaScript from C# - EP06

Hey Coders,

In this #Blazor video, I am exploring how you can call #JavaScript functions from #C# in our blazor apps.

Content -
1. How to inject IJSRuntime in blazor component
2. Call JS alert() function
3. Pass parameter to your JavaScript function
5. ElementReference
6. Call API from JS example

#CuriousDrive #WeLoveCoding

[CuriousDrive]

Thanks for watching, please share with your friends :)

[adedotunsalami]

Intuitive Videos. I love it. Even without writing code, i can understand everything you explained in the video.

[sigma_z]

Nice! Sweet and straight to the point, thank you 🙏

[chrisb]

Great Videos! They are really easy to follow along, they have a great pace, and are the perfect length. I have already learned a lot, and this one really helped me understand the JavaScript Interop, which I was struggling with when reading about it in other tutorials. The hands-on and seeing it in action and coding along really helps to understand what is going on.

The one downside I noticed with Blazor is it doesn't play well with third party JS and JQuery code. I would love to see a video on how to connect up third-party JavaScrip libraries to Blazor if there is an easy way to do that, or even if there is a way to do that at all.

Please keep up the great videos!

[broadshare]

Thanks a lot, always learning something new.

[Swoleasaurus]

For whatever reason, the first city in the dropdown (NY in this case) value is not being retained on save. If I put " <option value="">select city..</option>" ontop of the foreach loop, it'll work but I'm curious how to solve it for pre-selected values.

[Steve]

Where do I get the source code for this tutorial? The link below is for a bookstore, not this tutorial.

[learningacademixca]

I am part of a parent group preparing coding tutorials for high school students. It would be of great benefit to demonstrate some debugging techniques. For example at time <9:00> in your video, I have accidentally typed the .focus(); command with an uppercase .Focus();. This has caused an exception but the only message available was a vague one at the bottom of the page. It's useful to show debugging techniques such as Ctrl + Shift + J for this kind of error which is not discovered during the compilation time, these are difficult to find by newbies to web development.
Otherwise, the tutorial is fairly good.

[parisacarlborg]

Hi, Thank you for your great videos. I have a question. Im trying to do stepper in javascript and calling it in c# and using async method like you do, but I want it each time I click on "next button" page redirect to the next and at the same time shows that its going to the next label/input. tried using @ref but I wonder if I need different reference name for each click going to different page or do I need a loop in c#?
Thanks in advance,
Parisa

[oOserkanCakmakOo]

Thanks a lot for the useful information

[janvlcek]

Great video! One question though, you had to switch from the Blazor InputText component to the classic html one so that you can get a reference but that way you lost the option to show that "First name is required" and the color overlining when it has invalid input. Is there really not a way to bring into focus the InputText from Blazor component? I feel like it's kind of whacky solution.

[austinmrakpor]

Hi your teaching is great and easy to understand, I haven't done much of web app, can think JS Interrupt be use in razor pages?

[MintOutdoors]

Did you disable the validation because the javascript doesn't understand if the form is valid or not?

[nwagt]

Thanks for the vid. Audio is really quiet.

[bennyadiwijaya]

Great tutorial, can you make tutorial how to invoke C# method from javascript?