Blazor Server Components - Making Razor Components Easy to Use

blazars server allows c-sharp developers to create single page applications on the web without using javascript one of the features of blader server is the use of Razer components in fact all pages and Blaser server or actually just components in this video we're gonna see how layer these components together into a flexible powerful page along the way will identify how to pass data into the components how to style them and more now if this is the first video you've watched of mine my name is Tim quarry and it's my goal to make learning c-sharp easier one of the ways I do that is by teaching context there live tutorials out there that teach you what to do I go a few stuffs beyond that to show you when to do it why you should or should not do it what pitfalls to avoid and what the best practices are basically I get you ready for the real world if that's the type of training you're interested in subscribe to my channel hit the little bell icon to be notified my least new videos about twice a week now if you find that you want even more blazer server content I did just release a course recently titled blazer server in death it covers a time ground from learning all about the parts of blazer through authentication data access and even deployment the length of the course is in the description along a link to download the source code from today's video ok let's go to visual studio and I create a new blazer server project now you can just type in here blazer and after I say it it should come up with blazer app right here we'll hit next now call this blazer app now call this a components demo now I have installed both Blazers server app and blazer webassembly app as of right now blazer webassembly is not yet released for production use it's in a preview phase it's coming out very very soon so just note that's the differences Blazers server has been out since dotnet core 3.0 back months ago it's been out in production-ready we use in production for months alright so we used an ASP nut core 3.1 blazer server app we're not gonna put authentication on this we will make sure it's configured for HTTPS we're not gonna use docker I'll hit create and it's gonna create for me my blazer server app now if you've never seen a blazer server app before let's run this I'll use the is Express I could do the drop down right here and notice there's also blazer app right here this is kestrel and I cover more about that in my course but essentially what this is is a privately hosted web server instead of a full is Express so it's a little bit different this one's more in a console window that showed you some really cool stuff in the console we'll stick the IES Express for now it for this demo doesn't really matter we're not going doing too much debugging on the console alright so it's started it started off screen but here is the Blazer app so it says hello world welcome the new app how is blazar working for you this is something new they've added just recently so if you don't have this that's probably because you have a little bit older version of a blazer server no worries it's just a little link they put in there for a survey ok counter if we click this notice the counter goes up and we're not gonna page refresh here that's the big theme up blazer it's or not in a page refresh we're just using the signal or in the background to communicate and just transfer the bits we need alright so fetch data just fetch new data this is all random but it's new so if you notice 54 C and now it's 10 C so this is just randomized every tank of this page okay so let's close this out or I create a new page so let's create a page under pages is fine and we're gonna call this task list okay so we're create a new item don't create a razor page that's not correct a razor page is just what says it is a razor page and so you have a razor pages application what it is a server-side only page and so anytime you have to submit data it's going to do a full page refresh this is what Blaser allowed us not to have to do as a full page refresh okay now just so you know you could put a razor page in here and it will work as a razor page you won't have the Blazer client side stuff but it will work as a razor page and the reason why is because this technically is just an asp.net core web application what it uses internally whether it is API MVC razor pages blazer server or even blazer client that's all just add-on really to an asp.net core web application so that's why we can actually use razor pages and blazer together if we want to we don't though that's it new item we're at shoes razor component and I notice is confusing now I talked about this before it's a razor component that is a blazer page why those two are named the same I'm not a big fan we've we've kind of overuse things just like we have blazer server and blazer client side that's also confusing to me because you search for a blazer you don't know if the examples are giving are for client side or for server so that's why I say blaze our server all the time now in this video is a blazer but you know it's for Blazers server yeah well those a video is titled about okay so in this case razor component means a blazer page or actually a blazer component okay so and we'll see what the difference is because it's really the same thing so it's called this task list okay and this is the task list now I'm going to give this an at page directive that says if you go to task list so your URL slash task list you go to my task list okay now without doing anything else I've just added that one in the top it says at page slash task layer I can go my url and say slash task list and there's my task list page okay so I've now shown you how to create a brand new page in blazer but we're going to talk about components today so let's first build this out as if it were a full page so I'm gonna create a few things first of all I'm gonna go data I'm gonna right click I'm gonna add a new class it's getting a model for my tasks so task model and in here I may have two things so first a string that is my task and I'm gonna have a bool that is complete okay my default would be false so there's my task model now here's a things a little tricky you're a little interesting and again I cover more is in the course but I'm gonna be complete here the underscore imports dot raise or file this is a whole bunch of using statements these get applied to your razor pages and again there's a there's a hierarchy you can do here but essentially in this level right here they apply to all rape Blazer I'm sorry blazer pages which end in a dot razor so I can add a using here and it will show up or be useful over here so I don't have to keep saying at using blazer app dot data if I have multiple pages that use the data so I can just say at using blazer app dot data and now I can reference that model without having to have is a full name or a using statement on this page right we're gonna say privates I should let's do a a prop and say a list of tasks model and we'll call this task list oops let's not forget it's not a property a new list of tasks model there we go so one of the things about blazer is that you can reference private variables on the same page because this this code is a part of this page and I've covered before so I go too much in depth here we can separate this out into a different class file there's two different ways of doing that but we're not gonna do it in this demonstration because it kind of outside a scope however just note that this private means it only applies to the task list page but that includes the code the HTML layout and the actual code so we have our task list now let's create a private task model called new task and will instantiate that and now I think we should we can just clear a form so let's create a form here to start taking in tasks and put them into this tasks task models list okay so let's create an edit form now I have found it's better to close this out and then come back here to add your model because of intellisense it it likes it better so if you leave it open it reads this as code and it's struggles so close it out and come back to it but a edit form needs a model where I say the model is a new task okay and we also going to have an on valid submit now an unvalidated data which we're not going to but if you were validate your data then it will only submit if the data is valid all right so we need to have a method here so let's do a private void add task down here and then up here we can just say add task now just want to point this out because this is a little bit different for the model you have to use the @ symbol which is the razor syntax and the razor syntax just bailey says this is now C sharp after me okay so new task is C sharp code not HTML so you have to use the razor syntax here but in the on valid submit you do not have to use in fact you should not use the @ symbol okay so one of each the model yes you use it on the on valid submit no you don't right so let's create an input text input text and we'll say at bind value equal to new task dot task so as input fields go bind on the task feel that string and then we'll have a button and we'll say type equals submit and we'll say add task okay there's a little form when you click the submit button it's going to call this add task method alright that's on valid submit well was add task gonna do well it's gonna say task list dot add whoops task models which that should be task model such a task list there we go much better task list dot add and we're gonna add our new task it's a note in how you know what to add there well we said that the model for this edit form is the new task variable that's right here and so then each of our fields is getting one property in that class so this case this is task if we had more field to the other fields here now when do you submit you don't pass any dia through as a parameter you just say submit because the add task has access to that that model that we used for our form therefore we can just grab that value right away now let's say new task equals new task file to reset that value after we add Abbott ass to the list okay I'm going a little fast here because I want to get through this part it's less about this form here and more about how we use this as a component but I do want to explain what I'm doing so you can follow along and try it out and know why I'm doing what I'm doing I don't want to just have this skip forward option where you miss how it works we can never do it or replicate yourself okay so that's why I'm explaining it by and explain a little fast it's some point I'll probably cover forms and more depth again I've covered it in the course but obviously not every kind of before that course are wanted by the course that's fine I'll try doing best to explain as much as possible here okay so we have the task list we're adding a task to our list but we have to display our list somewhere so let's come down here we're going to add a unordered list and in here I'm going to say at for each so that again said okay there's c-sharp code coming in this case a for each for each task in task list it's lower case that all right so for each task and task list we want to do something now let's for now just put a list item here Li and inside here say add task dot task which sound we've done it but that's the actual task display not the the boolean we'll get to that in just a minute I wanted to show you something working okay so here's our task list basic task list let's run this try it out and then we're going to make it better okay so slash task list no task list test notice test is now underneath here and not going back to the server every time I do this it's staying on the client sighs no full page refresh okay so now we're adding to our list whenever we type something in here and well I say there's no server side refresh what I mean by that is it's not it's not reloading the entire page just a little portion of it it's much much more efficient and it gives a user a great experience because it feels like a native desktop application which is what a single page application is also known as a spa s.p.a okay so that's our task list now if we go off it and then come back to it it's empty he said it's not storing it anywhere all right now if you want to store a database this is c-sharp code have this call your class library that has data access code for sequel or cosmos DB or whatever you want to call and it will save it into those locations when you load it up you could load up this task list from a database not a problem okay so this is just the UI code and you don't want to put did access right here but you can call ace a class library and have it do the work okay so it's just c-sharp code that's all it is all right now let's make this a little bit more interesting first of all I'm gonna style this because right now the style is horrible it's ugly and well I may be known for doing ugly things I'd like to do a little bit better than that so let's start with our edit form we're gonna say class equals now edit form is specific to blazer and it is gonna get translated into a Wurm tag so anything you put in this that's not used by blazer so models be used a blazer and so on valid submit as is on submitting on invalid submit but if it's not being evaluated by blazer it's just gonna drop that down on to the actual form tag so for example class is not being evaluated by blazer but that lead dropped down onto the form tag so we can do things like this we say form in line and whoops space my for a margin in the y-direction I'm a margin of two so when they give a little bit of space around this vertically so top and bottom and two means a certain height there's there's zero through I think five okay so there's no class for that and it'll style a little bit let's style our input as well input text so class equals form control and also margin the X direction of to all right I'll give it some space and a left and right which means that it won't be running into our button which by the way our button should have class as well we'll say BTN and BTN - outline - let's go to primary alright so there's our button that's styled let's style our list now to say class equals list group any wondering where am I getting all these classes from and why am i his classes here this is based upon bootstrap for now if you're wondering some people are really against bootstrap they think it's it's heavy and overused kind of like jQuery used to be it maybe still is but with dotnet core we use bootstrap for but just the CSS so it's we're not even using the JavaScript side of this unless you want to so just as CSS is very light and it give us a nice commonly used format experience so I would say don't knock it if you want replace it you can but start with this because this is so easy to use so get bootstrap calm and then there's a documentation good documentation and look at all you can do there okay so list item so for list I might want to say list group item and I'm gonna say list group item let's go to success and a margin the y-direction of one and it looks like I didn't put it in a class let's cut that out class equals there we go so now we have some better formatting on our page let's look at what it it looks like we can see when you go any further this I think this is probably good I looked over 84 I did this video we just I did it for justice make sure I'm not again I am NOT the best at design but I think this looks a little better okay now this is a task list it would make sense that once you put a task on the list that you're able to cross it off how do we do that well let's add a little bit of value to and a little bit of interactivity so let's start with a a check on this so let's cut this out I must say if task dot is complete so I said the true right now now paste it in here and I have an else and paste it in again so it's exact same copy twice but make some changes this is the one where it's complete so let's change this from success which is that green to secondary which is more of a grey alright so that's the first thing we're going to do then the next thing where I do is is we're gonna have an on-click I put it in Turkey before we have our closed brackets so let's get this formatted correctly there we go and here I'm gonna have an add-on click now if you've worked with wind forms at APF this may seem really familiar and it should because that's it's an event and that's what it is C equals now here's a little bit of a trick you could put a method name so like add tasks you put that in there and it would call the add task method notice no prints but sometimes you don't want to create a hold method for this or you want to pass parameters so what you do instead is do this open open parens twice closed parens once and then have your arrow and then have closed parens but inside a closed parens call some code or do some type of task or action in this case I want to say task is complete equals not task is complete basically flip that bit okay that's all we're going to do notice not even a semicolon at the end it just one line of c-sharp code now I could call a method here and pass in a parameter I could do that I'm good I'm going to do just this one line here now the other thing I do is I cut this at tasks task out this is the actual text I'm gonna wrap it in del which is going to do a cross off liner or strikethrough okay so that's my my version of the completed task now let's do the unclick again let's copy this and I will paste it in well first of all let's format this formatting is hard when you have all these different languages mixing together in one page just so you know that's why they're kind of squirrely so now we have it on click again same code because it's just flipping the bit so it's fall to be true it's true it'll be false that's all its gonna do and that's all we have to do now in the real world if we wanted to record that this was completing we would actually call a method and that method would flip the bit but would also send out to the database and say hey this has been completed or reactivated but I don't think we're quite done yet because I want to do something else up here now if you're familiar but strap it all you'll know that bootstrap has the capability of doing a progress bar so let's do ass if task list dot count is greater than zero so only show this if there is a task in the task list div class equals progress and also let's give it a margin the y-direction and that's the the two marginwidth okay and then in here we'll say div class equals progress bar and let's do progress bar well I'm not gonna do a mid and we'll say the role equals progress bar and we'll say the style equals the width colon and then you give it percentage so you say like 75% something like that but we're going to change it to be a dynamic value in just a minute and then we'll say the Aria value min equals zero whereas start at zero and the Aria value max is going to be 100 and inside of here we're actually going to put the percentage done which don't have yet okay so the same study 5% so let's figure I had do this 75% I think I'm going to do it is down here my code I'm going to create a read-only pretty a private really property private int percent done notice I am still using the lowercase because a private I will say it gets and then in here I'll say return task list dot count but where I use the count extension which allows us to count values inside so count X dot is complete so only count the ones that are complete we're going to multiply those by a hundred and then that number is we divide by the task list dot count and that's the the actual count the total so let's just say we have four items in the list one of which is complete so we have one complete so as when you one tie one hundred that's one hundred divided by the total which is four that's twenty-five so that's read that's the whole number for the percent okay so now we can do is take this percent done and up here in a progress bar replace just the per just these values right here so at and the percent done now that yells at me it's not really fair that's because it got a percentage sign it's not supposed to do here I'm gonna wrap this in parens and what that does is a tell c-sharp that you say at and then open parens it's saying just what's in the parens is code that's it ignore the rest now it might not catch up with me that that's or the editor that's okay but it should work do the same thing down here I even put the percent sign after it the same way and now let's hit safe so this progress bar should only show up if we have a value that's greater than zero a list item of at least one and then it will show a different percentage based upon how many are marked is complete let's run this let's go to our task list all right test knows no progress bar now it's a progress bar and says zero percent you can already see it there but it's there RSA add a few more tests all right so the tests or tasks let's cross one off let's cross this one off right here go and click it now it's 14% it's grayed out it's got a line through it I can just click all day and I can unclick as well so this allows us to create a dynamic task list and make the most of our single page application kind of cool it's all done the client side very very sponsor very very fast and just a really quick side note if you're one about scalability this is very very scalable I think the the typical project is about 200k of memory that takes up as far as for the transfer the signal are transfer so you can put a lot of actions or a lot of active profiles at once on a server and we just find with with this so load should not be a problem in the vast majority of cases if it becomes a problem you can actually offload your signal our traffic onto a signal our server like an azure signal our service and make even more performance and then scale it across multiple instances so just so you know all right let's get back to this now we have a working task list but I want to do one more actually no I don't let's let's leave like this this sounds good so let's make this now into a component okay we're gonna put it right in the home page will replace this section right here alright let's go to the home page index let's get rid of Surya prompt I want to put not one task list I want three task lists on the front page so I create I did with a class equal to row and then give the class equal to call medium for me and say that for other 12 spots for the 12 columns and in medium or higher size all right so let's do so it's three different ones inside here I'm gonna say task list now where'd that come from that's the name of my component now it's not referencing the page it's referencing the actual name of the component task list so the name of the file is actually the name of a class as well and that class is now accessible over here because it's it's called task list and so I can create an a component like a div or anything else in HTML but it's actually the task list let's prove this let's run this this is the home page I now have three task lists let's start typing one of them notice that only the one task list has a test in it and if I do something different in other ones I can do that and if I complete one it doesn't complete all of them and knows each individually how they all work which is pretty cool these are all individual components all right so that's why I was trying to show you because that's really the crux of Blazer is that you don't build this one massive page you build small components and then you put them together like Lego bricks where you piece them together you kind of create new and interesting pages based upon what you what you want to use it for you might say you know what actually I want to have that last column via counter instead not a problem take that out and say counter how do I know what there's a counter there well these up there's a component called counter all right so now if they run this we'll have two task lists and a counter there we go there's our counter task lists progress bar the whole thing all right so all independent on the same page you can kind of compose these as necessary all right so this navigation page here by the way there's navigation bar this is actually component this is actually a what could be a full page but it's not now what if we said you know what we don't want you to go a task list on its own we don't want you go a slash task list what we do well all you do is take off this page directive there's no page directive so I can't go to a slash task list but it still works as a component but now if I do slash task list it says sorry there's nothing at this address go home it's still here it still works just fine all right so that's how a component works but why do you ever have two task lists or three on the same page it would seem like the only reason you do that is if you had this one page that may is the master task list for a meeting where you had all the different people's names on there and a list for each person that seems to make more sense right well we can do that so we're going to pass information into this list and say hey this is Tim's list or this is Sue's list how you do that well the first thing I do is come down to our code and in here I'm going to create a parameter let's see it prop I like it public and this is going to be a string will call this name now I'm keeping this simple for the demo purposes if you were gonna do this in a working environment this might be an ID number of the person which would then go within database final who that person is and then load the information about that person but in our case a name will suffice just a show or passing data into our our page you just need as parameter here that's saying yep you can pass in that value through the parameter okay and the printer is called name now let's come up here and for task list I'm gonna have an if actually I'm gonna have an estimate I could wrap us an if statement and say if there's no name then don't put a name or just say your task list but I'm not gonna do that I'm just gonna say at name apostrophe s task list so Tim's task list Sue's task list alright that's it I use that parameter ok let's save this let's go back to our index page we need like a change here it's a task list I'm gonna say right inside here I say name notes here that parameter now I'll say Tim and for this one I'm gonna say name equals su and let's do it one more time so I'll copy and paste this again instead of counter and I'm gonna say Mary so Tim Sue and Mary are in a meeting and we've got his master page where I pull up where as Tia notes the meeting where as say fix the bugs and debug more and do better those are my tasks and Sue's tasks implement new feature do other cool stuff okay and Mary she has a job of watch the lambs for Mary's typecast all right and oh I don't know talked with CEO all right and so I can look at this and go okay I fixed the Bucks you know and Oh sue course did cool stuff and Mary's just on top of it okay we can do this right in the meeting we can create one page and if this was posted with a database which it can do then you can have all this stuff filled in on one screen kind like a dashboard screen for the meeting and then we've done a meeting you have all this updated and you can close out and it every has the information they need about what's going on and what their part is so just using just a little task list like this you can really elevate what you can do because you can put those components together and new and interesting ways or maybe you want to have as this fetch data page maybe you want to have over here a task list of things to do based upon the weather forecast it sounds silly but maybe okay or a counter page maybe you know in dev you have a task list on every page where you say you know enter things to fix here okay that's possible but these components you can just put whatever you want now that you've built a component you can put it wherever you want you can even nest components inside of components you can nest components inside components that are inside of components so this is really a modular system that's really flexible and allows you to build these really complex interactive pages that are really just simple at their core and that's really ideal again let's look at our task list even with all the complexity we added we have 59 lines of code between our code and our HTML for this task list in fact I could probably get rid of a couple of them right here and that one at the end as well 5757 lines of something so we have from 37 to 57 that's 20 lines of c-sharp code and 35 lines of HTML and razor syntax and with that I have a component that's a task list now I can put that onto a page and create multiple of those and have this really cool dashboard that just basically says add three task lists okay so you do a database lookup on this page and say give me a list of all the people you know our meeting lists a lot of people and then it passes the ID in for each of those the task list looks it up and puts their task list together for each of those on here and then your your page now dynamically shows who's in the meeting and what their task list is and what the status is of all those tasks so really easy to compose really easy to take small little bits and put them together so that is a RZR component now again I call it Blazer components because it feels a little bit more like that's what is understandable is that it's blazer server and components but they're called razor components and they're blade they can t blazer pages but really every blazer page is just a component that you can then put inside of another page or component okay I know it's a little tricky to get your mind wrapped around the naming of this and naming is really hard as even Microsoft shows but the power of this is really impressive so that's it for this video what I'd love for you to do is leave a note down the comments and let me know what you thought Sarn razor come on razor components or blazars server components we want to call them okay but these component ideas let me know what your thoughts do you'll love them do you understand them is there more you'd like to see explain how to use them let me know and if you have suggestions I'll put in the suggestion list and we'll go from there okay thanks for watching and as always I am Tim quarry [Music] you

Channel: IAmTimCorey

Views: 42,724

Keywords: blazor, blazor c#, blazor tutorial, blazor server, .net, .net core, asp.net core, c#, razor components, razor components blazor, razor component tutorial, .net core 3.0, .net core 3.1, blazor client side, javascript, single page application, single page application tutorial, single page app, tim corey, iamtimcorey, full stack c# tutorial, full stack c# developer, full stack c# with blazor, dotnet core, dotnet core 3, csharp, web development

Id: JE0tQ4tx0Nc

Length: 42min 23sec (2543 seconds)

Published: Mon Apr 06 2020