Services, Dependency Injection & Page Parameters with Blazor WebAssembly | Blazor Blog Series #2

hello and welcome to the second part of the blazer blog series i know it has been a while but in the meantime i finished the blazer web assembly full stack boot camp so if you're interested the link is in the description and you should see the info card by now but now back to the blog we see that we get the articles here when you went watching i changed a little bit not code but i switched the visual studio version i am now using not the preview version of visual studio but the standard version the community edition of microsoft visual studio and i use the version 1676 now and there's already one thing i was wondering about or i was really surprised about when i am now running the app with a dot net watch run and i change anything we've got hot or live reloading i don't know if this was available before i haven't seen it but now let's see when we have a look here in chrome we see that this is the title of the second post or the first post and before we had to manually reload the application and we changed something so the the the watcher he recognized it changed the change but we had to manually reload the page but now let's say i just add this exclamation mark here the change is recognized and now in chrome we see this little icon here which means something is happening something is building and now the page is reloading by itself and we see the exclamation mark isn't that nice so this seems to change or this seemed to to have changed and another thing i added was a repository so now we have a good repository and i will upload this to github and then every commit is pushed to github and you can also grab the codes okay and now in this part what i want to do is we get the blog posts here in the in the razer component but now i want to move these posts these objects to a service so we want to use a service to receive these posts not a web service yet this would be the next step then but for now i just want to use uh a service in the client and also what we can do already is using page parameters meaning when we see these posts here i want to add something like read more click on read more and then we should see a change in the address bar and actually read actually read the content of this post okay i would say we dive right in and we create a new folder to add a service so in the client project we go to add new folder called this thing services and inside this folder we create first a new interface because we will use the interface to inject this service in a minute and this would be the i blog service or blog post service maybe let's call it blog service and then also an implementation class which we would then call just block sir this like that and this thing here implements the i block service and now in here let's say we want a method that receives all the blog posts so we have a list blog posts get all blog posts like that and we have to add the laser block shared using directive here and then another one would be a single blog post get blog post by url for instance these are the two methods so the first one to receive all the blog posts and the second one to receive a single one and of course we have to add the url here and i think we also have to add one here right because we have an id but now what i want to do is you know when you when you look at the address bar in chrome and you watch any block now you won't see a url where you see something like i don't know my blog.com slash posts and slash then the id what you would rather see is mybeautifulblog.com slash posts and then slash and then some kind of url the title with dashes and so on you will see what i mean in detail in a second but let's just add another property here which would be a string and then the url okay i guess that's it yeah now let's go back to the implementation class and here visual studio is already telling us something is missing get blog post by url and get blog posts and now we can really move these posts here copy them first to the block service and the auto formatting does not work maybe because of this no okay then we have to format this by ourselves like that so we have the posts now in the service we have the title description so let's add a url for the other method and this one would be called new tutorial maybe and this one would be first post okay so we got these two here with their new urls and in the get blog posts method now [Music] we do one thing we return posts and that's it so we've got get blog posts covered and we will implement get blog post by url in a minute first we have to register the service now so in the program cs you already see something like that here builder services add scoped and this enables us to use the http client class here which would make web service calls and we will i think we will do this in the in the next part of the series so we will make this step to the to the actual back end create a web a web api and maybe also entity use entity framework with the database so we then move the blog posts really to a database and have them available persistently but now let's say we want to use our new block service first so we have to register it here in the program cs and we do this with builder services then also add scopes but now we say we want to use the i block service interface so we will use the i block service to inject the block service in the razer component in a minute and when we want to inject it we have to tell our application which implementation class to use and in this case this would be the block service and this whole magic is also called dependency injection so this actually means when we go to the blog posts eraser component here for instance what we can now do is we can say injects and then blazer block client services and then i block service like that and what's the problem here yes now it works and we call this block service and now when doing it like that the application will have a look up here and then see oh the iblock service what what what implementation class should i use here i see the block service is registered for the i block service interface let's save this and the application is rebuilding with an error and let me scroll down now now it is working but let's say we remove the registration here and then open the package manager console again the change is recognized i guess if i changed started and now the application is trying to build and it works it seems to work but when we now go to the the component here we see that it is trying to inject the block service but if we would try to use a method now it wouldn't work because we don't know which is the actual implementation class but maybe this is a bit confusing for now so let's just continue with implementing this um one thing we can already do is we change these posts here to a private variable list blog post call this posts which is a new empty list of blog posts and now when we enter this page we want to call the get all blog posts method of the blog service on initialization and for that we can overwrite a method which is called on initialized and now here we can access the block service and we say our posts are block service and then get blog posts and that's already it so we save this the app is rebuilding and we can go back to chrome we open the console and there is a big big error and this is what i was talking about let's make this a bit bigger maybe cannot provide a value for property block service on type blazer block client chat blog post and so on there is no registered service of type i block service so this thing doesn't know what is happening here and we can fix this by just commenting this in again and now we see this cute like in here the application is rebuilding and in a second it should reload and now this works isn't this nice so we see that nothing actually changed for the user but under the hood we changed a lot i would say so we are not using a service and to explain dependency injection and one more step of dependency injection so you can really see why do we have it to do this way and what why does it make sense at all let's just copy the block service here so i made a copy i call this file block service 2 i call the class block service 2. now that could be the case you're working on a blog with another person or with yourself and then you are deciding [Music] maybe the block service isn't really right i want to change something but i don't really want to change it in the original block service so i just create another block service class the block service 2 class here and then i register this class here and to make this a bit clearer we we just copy a few more posts and again the auto formatting is not working here but now we have a lot more posts right and the this is the only difference between these two services and now in the program cs we register this service here so block service 2. of course we could also change the the methods to get the blog post and so on but now we should see that for the i block service interface the block service 2 is actually registered and when the page reloads without an error i hope because it takes some time there is uh an error oh yeah i see what's going on here block service too of course we need some commas here now it should work or is there another error we changed the file already it does not recognize that we changed the file here what if you just save here now the build started so sometimes you just have to change the service the other service file i don't know why so the build is complete and the page already has been reloaded and you see that we now got a bit more posts and this is the magic of dependency injection actually so big big buzzword but actually it's just injecting injecting some files and the option to change the file or to change different files well of course there's a bit more to it maybe but in essence that's already it but let's just remove this one here blog post two all right and now we've got block service to and now we've got our blog service registered okay so the service works long story short and now the next part would be to actually have the option to click on a blog post on our blog posts razer page or component and then we want to go to another page where we only see the blog post with its content thing is we have this beautiful content property here but i think we haven't at we did not add anything to it here so you maybe have already seen it i was prepared i opened the lorem ipsum generator so let's just copy this paragraph here now i can close it again and now i want to add some content here so content like this and then another content for the second post this is my beauty full short blog posts isn't it nice okay so we got two different blog posts now with different content and now in the blog posts razer as i said i want to add a link like read more and we use standard html for that which would be an a tag with an href we close the atec here and i'd say we go to posts and then we use now the post url you see all makes sense now slowly so when we go now to our page which is reloading by itself i really love this take some time though but still reloads and now we've got the read more link and when we click this we come to posts new tutorial and of course for now there is nothing to see here but we can already go back and now fix this and to fix this we create a new page so on the pages folder we go to add and then raise our component and call this how do we call this post razor okay there it is and now we can say this is a page so we had the page directive you see you can access this with posts and then also a parameter which is entered in these curly braces and this would be the url and now we've got two things here we have we have we have we have we have a post we have a blog post which is the actual post we want to see so private blog post this is our post and we have to add the using directive here of course or no let's just do it that way um blazer block client no not client shared blog post now we've got the type so this is the post here and we can already use the post to display the title title i want to have the title yes and then we also have the url and this is a parameter so we use this thing as a property do we have to use a property i don't know actually i think it's a property or at least a public variable so public string url and this thing is a parameter like that and another thing we have to do is we have to inject the service again so place a block clients services i block service block service that should be it what's going on with the parameter here this declaration types only done property in rc i knew i forgot something so this has to be a property like that and now this should work yes beautiful and now also on initialization we want to get the actual post here so we say protected overwrite on and initialized and right here we say that the post is block service get blog post by url and now we can use the url and you see here that this thing is case insensitive so we wrote down the url here with a lowercase u here with an uppercase or capital u but this would still work okay and maybe we can make this also a capital p but this doesn't oh yeah because we called this post razor so it's the current post this is the current post and the current post is block service get blog post by url on initialization and yeah the razer component is called post and that's why we cannot call this thing post here as well so it's the current blog post all right so we got this covered we get the parameter we got the page directive we got our blog service we're using the title here now what we can also do of course is displaying the content so current post content something like that and now of course we have to implement the get blog post by url method so we go to the implementation and here we just use a little bit of a link so return posts find or let's say first or default where the posts jesus p for post p url let me do lowercase [Music] equals url url to lowercase okay so we actually just grabbed the list of blog posts and then we are looking for the one where the url equals the given url and i'm using first or default here because first or just first returns or throws an exception if this function doesn't find an entry in this list and first or default just returns null so we could react to null if there is no post available for us but that's already it so we got the get blog post by url method we got our post eraser component and let me see in the blog posts razer component yes we see that the url is correct posts and then the url of the single post okay everything is saved i hope that the page has already been rebuilt and now i go to yeah it already works that was quick of course so now we are able to click on our blog posts and get the actual content of these posts now isn't that great i think so and that's already it i would say for this part we are almost half an hour in so just to recap real quick what we did was we added a bit of html here and we moved so this would be the first step we moved the posts to our blog service here and we created a new folder services and added two files the ibloc service interface and the block service implementation class which implements this interface we created two methods get blog posts which will return all our posts and another method get blog post by url and we added this new url to our blog post model here because we are using this url to display the single blog post and with these little implementations here we are able to do exactly that we are able to get all posts and get a single one and then we added another component or rather a new page and with the help of this page directive and this parameter here in curly braces url we are now able to receive the single post and don't forget the big topic dependency injection we had to register the block service here in the program cs and then we are able to inject the block service in our razor components and access its methods okay that's it i would say i check this in right now services and page parameters and i will add the link to the repository on github i think to [Music] the to the description to the description of this video okay that's it and as i said at the beginning of this video if you already want to dive deeper feel free to have a look at the blazer webassembly full stack boot camp there is a preview of this boot camp which is two and a half hours long here on youtube on my channel so please have a look for more information about blazer web assembly in this bootcamp we will create an online browser game a classic browser game where you create units or you create users first users can register these users can create units and then fight against other users with these units and climb the leaderboard and decide who is the best warrior of them all so a lot of fun i would say it's a couple of hours long but still yeah more blazer web assembly in this boot camp or stay tuned for the next part of the blazer block series if you like this one i would really appreciate it if you click the like button or even subscribe to my channel thank you very much for watching happy coding take care

Channel: Patrick God

Views: 6,339

Keywords:

Id: ar5av917kEY

Length: 29min 19sec (1759 seconds)

Published: Wed Oct 28 2020