Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases now! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Mastering Blazor WebAssembly

You're reading from   Mastering Blazor WebAssembly A step-by-step guide to developing advanced single-page applications with Blazor WebAssembly

Arrow left icon
Product type Paperback
Published in Aug 2023
Publisher Packt
ISBN-13 9781803235103
Length 370 pages
Edition 1st Edition
Languages
Tools
Arrow right icon
Author (1):
Arrow left icon
Ahmad Mozaffar Ahmad Mozaffar
Author Profile Icon Ahmad Mozaffar
Ahmad Mozaffar
Arrow right icon
View More author details
Toc

Table of Contents (21) Chapters Close

Preface 1. Part 1: Blazor WebAssembly Essentials
2. Chapter 1: Understanding the Anatomy of a Blazor WebAssembly Project FREE CHAPTER 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

Developing a custom input component

Blazor contains a class called InputBase<T>, which is the base class for all the input components that we have seen so far. The great thing about this class is that we can use it to develop our own input component with the same specifications as the built-in ones.

InputBase<T> has a method called TryParseValueFromString, which is the main method that we need to override, and this is where we can locate the logic that processes the string of the input and translates it into something more meaningful. There is also a property called CurrentValue, which we can use to bind our insider input to.

Blazor already has an InputDate component that gets rendered to an input tag of the date type in HTML, so in the next example, we are going to create a custom component called InputTime, which will be translated to the input tag of the time type. We can bind a TimeOnly value to it. Let’s get started:

  1. Within the BooksStore.Blazor...
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 €18.99/month. Cancel anytime