Search icon
Arrow left icon
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletters
Free Learning
Arrow right icon
Mastering Blazor WebAssembly

You're reading from  Mastering Blazor WebAssembly

Product type Book
Published in Aug 2023
Publisher Packt
ISBN-13 9781803235103
Pages 370 pages
Edition 1st Edition
Languages
Author (1):
Ahmad Mozaffar Ahmad Mozaffar
Profile icon Ahmad Mozaffar

Table of Contents (21) Chapters

Preface 1. Part 1: Blazor WebAssembly Essentials
2. Chapter 1: Understanding the Anatomy of a Blazor WebAssembly Project 3. Chapter 2: Components in Blazor 4. Chapter 3: Developing Advanced Components in Blazor 5. Part 2: App Parts and Features
6. Chapter 4: Navigation and Routing 7. Chapter 5: Capturing User Input with Forms and Validation 8. Chapter 6: Consuming JavaScript in Blazor 9. Chapter 7: Managing Application State 10. Chapter 8: Consuming Web APIs from Blazor WebAssembly 11. Chapter 9: Authenticatiwng and Authorizing Users in Blazor 12. Chapter 10: Handling Errors in Blazor WebAssembly 13. Part 3: Optimization and Deployment
14. Chapter 11: Giving Your App a Speed Boost 15. Chapter 12: RenderTree in Blazor 16. Chapter 13: Testing Blazor WebAssembly Apps 17. Chapter 14: Publishing Blazor WebAssembly Apps 18. Chapter 15: What’s Next? 19. Index 20. Other Books You May Enjoy

Calling JavaScript from C# code

Now that we have learned why we need JS and the possible ways to reference it, it’s time to get some JS code executed by our Blazor app. We will cover three different scenarios:

  • Calling a basic JS method
  • Calling a JS method synchronously
  • Calling a JS method that returns data

Calling a basic JS method

In the previous section, we created the site.js file that contains the showAlert function. In the following exercise, we will call that function from the NavBar component where we will add a new Login button on the top-right side of our app.

For now, this button will show an alert, but later we will use it for authentication purposes:

  1. In the Shared folder, open the NavBar component and add a button with its own div, so by default, the button will show on the right-hand side of the page:
    <nav class="navbar navbar-expand-lg navbar-light bg-light">        .....
lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at €14.99/month. Cancel anytime}