I’m including jQuery mainly because some students has asked me about it.
With jQuery the above would be:
Then, in the Counter component we have the following:
Making a Reference to an HTML Element
With the above, if we click the button of the Counter component, it will change its text to “Hello”. A code similar to the one above works in jQuery:
Multiple Instances of a Component
If you run the application and go to the Index component, you will see that if you click the first button, apparently everything works, but it is not. There are two problems:
- The second button does not work (its text is not changed to Hello)
Why does the above happen? Well, because we are using the ID selector, which only selects the first element with the indicated ID. Since we have two buttons with the same ID, then only the first is selected, and the second is ignored.
In jQuery, the above doesn’t happen :), but the following is important for both JS and jQuery:
Now, we do the following change in the initializeCounterComponent:
With this we have solved our two previous problems. Now when we click on a button, only that button is edited, and not another. And no matter how many buttons we have on the screen, our functionality remains correct.
However, passing HTML elements individually to the initializeCounterComponent method doesn’t seem right to me. What happens if we have several HTML elements to initialize in a component? Do we have to pass each of those HTML elements to the initializeCounterComponent function? Personally, I don’t like this. I prefer to pass a container to the initializeCounterComponent and look for the HTML elements in it.
For example, let’s put a div that covers all the HTML of the Counter component, and put it @ref to be able to refer to this div from C#, and pass the div to the initializeCounterComponent function:
Then we can modify the initializeCounterComponent to take the references of any element inside the container div. For example, let’s say we want to take the references of the h1 and the counterClick button, we can do this as follows:
In the case of jQuery we have to do something similar to the above if what we want is to initialize all the elements of a component, since jQuery does not have a way to execute functionality when loading a specific HTML element (what we were doing previously it was to append a functionality to an event).
Now that we have all the information above, we can use certain libraries in a simple way in Blazor.
We will take the example of the ChartJS libraries and a DateTimePicker (calendar control) called Tempus Dominus.
Basically what we want is to initialize a component that will use these libraries. We must first add the references to these libraries in our index.html (_host.cshtml if you use Blazor Server):
If you want a step by step Blazor course that teaches you everything you need to know to build interactive web applications with C#, consider getting my Udemy course and start building awesome Blazor apps today: