Dependency Injection WRECKED By Blazor Render Mode

in this video we're going to look at how the render mode in a Blazer application caus some headaches with dependency injection and wiring up event handlers for something as simple as a button hi my name is Nick centino and I'm a principal software engineering manager at Microsoft historically a lot of my frontend development has been for desktop applications like Wind forms and wpm but more recently I've been trying to focus on blazer because I think it's an awesome technology and finally I can feel comfortable making web front ends with C however I ran into a snag recently that was something very simple but not having a ton of experience with blazer made it pretty tricky to troubleshoot so I'm going to walk you through how I came across this problem what was actually happening and then how you can go about deciding how to solve it for yourself a quick reminder to check that pined comment for a link to my free newsletter and my courses on dome train let's head over to visual studio so I ended up starting with the sample applications that you get for just creating a new blazer project and this is going to have the Blazer backend project as well as a client frontend project so this page that I'm showing you is just one of the sample pages that came with the app but I've started to modify it because I wanted to show a collection of elements inside of a list and I started using mud Blazer so I'm using a mud list you can see mud list items here uh really enjoying that Library so far and when I wanted to start hooking up event handlers so I have a button that I'm showing on my list items I figured okay here's how you hook up the event handler right really cool we get this uh asyn O8 syntax so I was just trying out the difference between uh putting a sink and a weight on one of them versus not the other to see if that was going to have any difference when I was debugging this but really I thought you know as simple as this it should work and the reality is yes it does but there was something causing me an issue where my onclick events weren't triggering at all I originally thought maybe this is something uh incorrect about how I'm using mud Blazer um of course we start to use any other external libraries and things like that and immediately I start going oh no like am I just using this incorrectly uh turns out I'm not using mud Blazer incorrectly so this syntax that you see here works for an event handler and also this syntax if you wanted to drop a syn8 directly in here works but if I show you each of them down here right so I have both of these event handlers they have the same style so they're both marked as async task with a weight inside of them these are functionally identical I have break points inside of them so we can see when these will trigger cuz I'll run this in just a second but just to again show you like this doesn't matter if you put async A8 here or omit it but very simple setup it's just that it didn't work and I'm going to go show you the application running and we can start talking about what we expect to see and what's going on so just one more quick note because this is going to be important about when we go to debug this I'm injecting one dependency into this page and it's I items service so I have that passed in it's hooked up through the dependency injection framework and if we scroll back down you'll see that on initialized a sync we end up setting that items collection it's just calling a method that has like a start and end date range and then we get a set of items this will return currently just one item so if we see anything in the list show up it means that we must have been able to call this item service get items async let's go run this and see what happens okay so I have this web page pulled up I visited the items page which is the code that I was just showing you you can see that this is a list or maybe it's not so obvious but this is a list that has one item in it it has my approve and reject buttons so by definition us being able to see this on the screen right now means that that dependency was injected and we were able to call it to ask for the items collection and like I said it returns only one and we're seeing it right now this is the one item that comes back but if I go to press approve or reject it's not doing anything at all but those event handlers truly are wired up correctly initially when I was going through this I didn't know I figured I must have messed up how to handle those events properly and I spent a lot of time trying to figure out what was wrong with how I hooked up those events but that's not the issue the issue is if you see all the red text behind in Visual Studio something's going wrong and I started looking through this and I could see like object reference not set to an instance of an object these uh null reference exceptions I think are everyone's favorite so that was already kind of like oh crap what am I doing wrong here but something that's a little bit more interesting if we scroll up higher is that it's saying cannot provide a value for property item service and then it says on the type here it says there's no registered service for eye item service and this was something that caught me completely off guard because to me this doesn't make any sense at all coming from a dependency injection perspective like we know that that dependency was properly passed in right and if we go look at the code briefly here I said that the only way that we could ever show items in that list is when we populate items collection and that means that we must have been able to call an item service get items a sync so it was passed in at some point point right we must have had it because we got the item the single item pulled out from this method call so how could it be that we don't have any dependency passed into this page at some other point in time in the future right that doesn't really make sense but like I said originally too I was spending so much time debugging if this was set up properly these onclick events that I wasn't even paying attention to this originally so just trying to save you some time that if these aren't working then maybe you should go check the console output to see if there's some other exceptions coming up I figured once I saw those exceptions coming up that perhaps the rest of how my page was loading was not configured properly so um if we're getting exceptions at that point in time it's hard to trust anything else that comes after that at least from my perspective because I don't have a ton of experience with blazer to be able to know what's going to break after that so I dedicated all my attention basically to trying to figure out why this dependency was magically not being passed in anymore after spending some time searching around on the internet I realized that there's something kind of silly that I wasn't really paying attention to and that is the fact that Blazer is able to do pre-rendering and it's able to do this to speed up the client side loading so that it makes it look like to the client things are going much faster and then that way when it's able to it can use the server side to be able to populate things as it needs to but this posed a really difficult challenge for me and that challenge was that on the client side I don't want want to pass in those dependencies I want to make sure that I have my server side load up those dependencies I don't want to load like my business Logic on the client side I want that completely server side if I can help it so I started to play around with this and I realized that I could fix I'm using should use air quotes here I could fix the problem by basically registering a dummy implementation of that service on the client side and then I was thinking like this is not going to be a scalable thing like do I need to have a duplicate implement of every service I want to pass into a page that seems like maybe not the thing I want to be doing so I poked around a little bit longer on the internet and again I realized that it's going to be this this pre-render issue um what I was not aware of and I should have kind of clued into this sooner I'm going to go to the app Razer file and by default the way that this project was set up I pick the authentication option and to set it up with authentication uh Visual Studio will pick the template that has some of the the off pages and service is kind of hooked up for you so I wanted to be able to play around with that but we can see here from line 29 to 31 that it's checking to see like if we're on this account page then we're going to use a null value for the component render mode and that render mode for page ends up getting set up here you can see in these two spots here line 14 and on line 18 as well but right here is interactive Auto for the render mode and this is going to take place on every other page that's not SL account slash items which is where we were looking is one of the pages that's not/ account so it meant that we are using interactive Auto on everything else and I do think that this is probably something I want to use to be able to speed up page loading when it's necessary however not having all of the experience I need right now to fully understand the implications of this what I realize is that if I get rid of this here so if I comment this out and I switch it back to just fully server side this at least to get me started is going to make this work so I'm not saying that for you this will always be a solution but for me in this particular case right now moving away from interactive Auto to have no client side pre-rendering or anything like that this is going to make it so that my event handlers work now because it's never going to try to do Cent side dependency injection and then not be able to find the service okay I've relaunched the application and again looks just like it did before right we have this page with this single item loaded so with that commented out section and the other render mode us used we don't have any change to the dependency injection that was completely untouched but now if I go ahead and press approve or reject these two buttons that I hooked up the event handlers to if I press approve now we go hit that break point like it actually worked I didn't go touch these event handlers right if you don't believe me go take a screenshot of the video pause and Rewind like these are completely the same all that I did was change that spot for the server side render mode and if I scroll back down yeah like we're in this event handler if I go run this and I go press reject this one also works right so both of these break points get hit and all that I needed to do was switch that render mode if we check the output um there's another unrelated exception but you can see that I'm not getting that like big blast of exception uh like stack Trace printed out to the output here and it's because it's not trying to on the client's side do that dependency injection and then truly not be able to find a real dependency but that's just a quick video on how I was debugging event handlers on my mud Blazer list items that I was creating I started to go down the wrong path thinking that I had the wrong Syntax for my onclick event handler so hopefully if you're coming across this video and that's something that you were maybe questioning or struggling with like the syntax is quite straightforward it's as we might expect that's great news but if your page is not behaving as expected you might want to check that console output to make sure that it's not throwing exceptions as it's trying to load that page in my particular case this was just a misunderstanding about the client side and server side rendering especially with interactive Auto now again I'm not saying that switching to only server side is going to be the solution for you in my particular case this will probably allow me to keep going until I need to look for an optimization on the client side to have faster rendering but I'm going to hopefully make more videos about this in the future about better ways or more situational ways that we can handle this kind of thing if you found this interesting you can check out this video next for a Blazer build series thanks and I'll see you next time