Getting Started Blazorise UI in Blazor

hello friends wanna know about swiss army knife ui library for blazer then stay tuned [Music] hello friends i am sravya kumar and welcome to my new video today we are going to talk about the swiss army knife ui library for your blazer applications i'm using this ui library since last two years with almost all of my blazer applications the best part is that this ui library is very versatile has a lot of controls and lot of flexibilities you will ask me what is that library review tell me so the name of the library is blazerize this library has 80 plus free and open source native blazer ui controls not only that it supports multiple css frameworks like bootstrap bluma and design and material so whatever your need is whatever kind of blazer application you are going to develop blazerize will fit to all your needs this video is first of my blazer eye series where i will be developing a full-fledged blazer application using blazerize ui in this video we will be talking about how to set up laser eyes in a blazer application set up the bootstrap css and font awesome in the blazer blazer application using laser eyes framework apart from that i will be giving you the flow and structure of the layout header footer and other components of the blazerize ui library so without further ado let's get into my windows machine and let's get started using blazer eyes in our blazer application so here i am on my windows machine and i have opened the blazerize.com website you can see here blazerize.com this is the website of blazerize controls it has all the necessary links like documentation and github url of the source code i have opened the github url in next tab you can see here this is the source code of github url and on the github readme you can see all the documentation about it and it has the links for the demos of various uh samples like bootstrap 4 demo bootstrap 5 demo material demo bloomer demo and design demo and bootstrap demo for blazer server for this video we will be creating a new blazer eyes application a new blazer application rather i will open visual studio 2022 click on create a new project and select blazer server application and click on next i'll give the name as uh this project i have already created this is blazer d ex basically the full form is blazer default example so this is the default template of blazer and i will open this solution also just to show the difference between blazer eyes and the default template once we implement blazerize on the regular blazer application so here i will just rename this as laser eyes demo and i will change this folder name here laser eyes demo click on next we will select the dotnet 6 which is the long term support version we won't do any changes here and we'll just click on create so you can see here our blazer blazer application is ready this is our blazer application uh is sample like this is the default blazer template so if i run this application i have selected the blazerize demo if i run this application you will get the default blazer application you can see the output so here it is you can see this is like laser eyes demo we have counter we have web service example and we have all these like links and everything so this is our blazer default blazer template when we create a blank blazer application so this is how it looks now we will implement laser eyes into this application so to implement blazer eyes we will follow along the documentation of blazer eyes for that i will go on here on blazeri's website i'll click on documentation and in the documentation you can see here this is the getting started on the very first page we have getting started and on getting started we have quick start guide so i just click on quick start guide and i will follow along the quick start examples which is given that is this install first of all i will install the blazerize bootstrap and then i will install the blazerize icons that is font awesome icons because blazerize uses font also icons in to show the icons in the application so we will install this so for that what i'll do i i don't like to use command line i will use the nuget package manager for that so i'll go here i will open the nuget package manager click on browse and once i click on browse i will click on blazer eyes and you can see here blazerize is open or let me minimize this for now so you can see here uh like blazer eyes blazerize bootstrap so i will just select blizzarize bootstrap i will install it i'll accept the licensing terms and it is installed so you can see here now uninstall button is available so now after that what i will next install is blizzarize icons font awesome so as per the documentation i have to install this nuget package also so now we have installed both the new get packages so you can see uh both the nuget packages are installed here so now i'll close the new get package manager and i will go into the demo again so in the demo it has mentioned that i'll have to change the index.html or host.html file and include the css and js resource file so now here is a caveat the thing is that now in dotnet6 our host.html has changed in the blazer server application if you see here in the pages we have host.cstml but our host.html is like this so we don't have anything mentioned here the main thing is mentioned in this layout.chtml so what we will do in this layout.chtml we will change the css and everything as per the blazerized documentation so i will go back on the blazerize documentation i will copy this part i will paste it here just above this between this because these two are like uh meta tags and everything these are necessary the links the css links which we need to replace because we don't need this particular css for now so we'll just replace this we will be using everything of blazerize we don't we won't be using any custom css in this demo at least so i have changed the css now what i'll do i will add the javascript so for that this particular thing also since we are not using the default css we will remove this also and i will copy paste this rest of the part like this here and i'll paste it here and move this render body inside this div the reason i moved this render body inside this div is because this div is basically uh it's the id of this device app and this is kind of the root uh control or root application uh like div which has everything so that's why i have moved the render body inside this so now i have done this change after this what we have to do is like we have to initialize the blazerize services in our program.cs so for that i will open the program.cs and on top of here you can see i'll go again in the documentation and before that it's asking me to add the imports dot raiser like update imports.razer with using laser eyes so i'll do that also i'll just copy this i will open this imports.razer so in blazerize sorry in blazer impose.razer is kind of our global using so i will just use it here i'll save it and now i'll go on program.cs and in program.cs it's asking me to add these three lines because these using will automatically come so i'll copy this and i will paste it here so after some time it will give me this red squiggly i'll just click on this bulb using laser eyes so this is added then for this also using laser eyes bootstrap and for this using laser eyes icons font is awesome icon and this we are already it's mentioned it's not used that's why it's coming like this so we will what we will do it will the bulb will show again yeah remove unnecessary using so i'll just save it and now if i run this application you can see we have implemented laser eyes but the thing is that now our whole application look and feel has gone kaput so the reason behind this is that we have not set up the layouts and uh layouts and controls according to blazer eyes what happens that in our regular blazer application we have in our shared folder if you go in this shared folder we have this main layout which uses this layout component base and inside this we have this html so what happens in blazer ice in instead of this we'll have to use the blazer eyes layout controls and we'll have to set up the nav menu and everything if you see here this nav menu this nav menu is also nothing but just a plain simple html uh like html controls with uh simple like laser controller this nav link and all so we will be changing all this code and we will be replacing this with blazer eyes and for that we will again go into the documentation in components if you see here this is the layout so this layout is basically the component which handles overall layout of the page or of the application as the documentation says that the layout is used to handling the overall layout of the page but since blazer is or since blazer is a single page architecture framework so it is basically used to complete set up the layout of the whole application rather than just a single page so we use even in our regular blazer application also if you see here in main layout we are using this layout component base which basically setups the whole layout of the application which has the nav menu the main content and if you see the nav menu also it has the layout of this menu and everything so this layout component is basically uh inherited from this layout component base and it is used to set up the whole layout of our application but in some scenarios when we have multiple pages in our application for example we have a login page which has a separate layout or a register page which has a separate layout we use different layout for those pages but usually the layout is the one which is used for setting up the whole base ui of the application so let's go through the documentation of the layout component in the documentation it says that it has three implementation we have number one is the basic which has like header content and footer then the second one is with cider so with cider means that with side navigation and it has like cider header and content then it has with sider with header on top which is like this where the header is on the top and sider is on the left and content is on the right and then we can we can play around with this layout also we can put a footer below this also and we can do all these things so these three the basic with cider and cider with header on the top these are the main you can say layout configuration which we can get we can even remove the as you can see the in the basic we have removed the sider also so let's play around with this setup a bit and let's set this up in our application for this we can also see how this is done in the blazerize server demo we can open the laser i server demo from here from the code page you can just right click here and we can open this so if you see here in the blazerize demo we have this option here we have the option to select the layout right now it is like fixed header so fixed header is the one which is this one side with header on the top so this is kind of fixed header you can see here we have fixed header so if we minimize this we have this fixed header and other another one is like if we select this fixed header and footer only so if we click on this you can see we just have header and this is our footer and then after that we have the third option which is cider with header on the top so this is like this if we click on this you can see here that header is on the top and sider is below here and we can minimize it like this so let's first implement this one that is the fixed header one where we have this fixed header and this fixed left nav and this left nav minimize and it comes all the way to the top let's implement this in our application so to implement this layout what we will do we will first go in this main layout dot raiser page will remove this code and we will paste this pre-written code i have already written this code based on the documentation so if you see here this is like layout this is our base layout and inside layout we have this layout header fixed then we have layout cider and we have this nav menu and then after that we have this layout which has this layout content and this body this will implement the page code the whatever page we will be opening like be it the index page be it the con counters page or be it the fetch data page it will show us the body of that page and this nav menu is our navigation control so for now let's just implement this thing in the header for now we have just kept it as blank so let's use this as blank and let's control s we'll save this and let's run this and see how this thing changes our ui so you can see here now our ui has been changed you can see this is the left nav which is coming it has the nav bar if i click on this this is our regular html nav implementation if you see here this is the regular html lab and it has this implementation set it since it is using the toggler and everything so it has this regular implementation where i click on this it the in this links appear and when i click on any of the link the counter page appear but this doesn't retain what option i have selected it automatically collapse everything because this is still not we still haven't implemented the cider menu using laser eyes controls we have we are just still using the html control so we'll have to update this also but still you can see here that we can still go to the links and we can still go on the home page now in order to fix this particular issue that is the left nav is not holding the selected values which we are selecting and it's not properly operating let's implement this thing let's change the code of this nav bar also so we'll go into the nav bar this is our nav menu.raiser so we'll go into this nav menu.raiser and we will remove all this code and replace it with this code which i have again pre-written based on the sample and this code is basically setting up the nav menu or left nav of the page or of the application so we'll replace it like this and once we save it it will say that rebuilt and apply changes when i click on this rebuilt and apply changes it will implement those changes and show us the output so now you can see here that we have this menu the difference is like we can now click on this and this menu can get minimized not only this if we click on this counter you can see that the counter value is selected and if i click on this fetch data the fetch data value is selected so whatever menu option we have selected these are being retained in the menu the menu state is being retained so all these things are controlled and you can see here that we don't even have to write the code to set up the like this minimize or the action availability of these menu options so we don't have to write any code this is automatically handled by this uh the control so how this thing works let me explain you so what we are doing is we are using this bar control of blazer eyes so let's go into the documentation and open the bar control so if you go here on the top we have this bar control so you can see here bar control so the bar component is a responsible and responsive and versatile navigation bar that can be used as a top menu in the horizontal mode or as a sidebar in one of the three vertical modes so this is the bar control which we are using to set up our navbar you can see here that this is top bar menu so this is how the top bar can be set up and this is how we can set up it as a sidebar so what we have done is we have set this bar control as a sidebar menu you can see here the option is like this breakpoint navigation breakpoint theme contrast mode which is like vertical inline then we have collapsible mode which is small or high small will show the small icons like this which is happening and if we change this to hide see the other option is hide so if we change this to hide it will completely hide the menu so like this if i click on this now the menu is completely hidden and you can see the header written here is coming like this because this header is just a just a text so in order to fix this header instead of using this adjusted text we can use the bar horizontal bar to set up our header of the application also i'll revert back this change so if we go through the documentation of bar we have this bar option which is like as i said horizontal bar vertical bar and at the bottom we have all the properties explained like we have background which sets the background color we have breakpoint defines the media breakpoint that on which media how it will appear then we have collapsible mode which is again hide or this thing small and then we have mode which can be this is for vertical or for sidebar only usually otherwise by default it is horizontal then we have navigation breakpoint defines the media break point on navigation how the navigation is changes then theme contrast so theme contrast basically change the contrast that how the it changes according to the theme so it just contrasts for light or dark theme if i change this theme contrast here here to instead of dark we have like either none or we have light so if i change it to light and save it the color will change to white if you see here the color has been changed it is now light color it's a white color and we have the contrast option here and if we and if we change it to none what will happen that it will again change back to like this so it will not implement all the good looking features which was there so light dark is for light dark theme and then none will that will have to set up everything all manually so you can see that even the icon here the hamburger icon is also not appearing so for that we need to implement either light or dark theme contrast so we'll set it up for now let's set it back to dark you can see how we have implemented the sidebar in our application and we have implemented this left nav menu as a sidebar using the bar control of blazerize now you might be wondering that where is that header written which we have written on the top bar and i think that is being hidden in our implementation so let's change that header also with the bar control so this header this layout header which is fixed let's change this also with the bar control so for that what we will do just like nav menu we will create another control or component here we'll name it as top bar so we'll rename this as top bar here and call this top bar in our main layout [Music] if i call this top bar it's still not working because we don't have any code in that top bar that is the reason nothing is appearing if you see here just just top bar is coming here when the menu is minimized right now it's not coming but otherwise it's coming like here when the menu is minimized you can see this bar ar is coming so top bar is being hidden on the top of this menu so we will set this up by implementing the horizontal bar control in our top bar so to do that what we'll do we'll go into the code once again and we will change this top bar we will remove this code and we will paste this pre-written code here which i have again written based on the demo code and the sample code of the documentation and once we have done that we'll see that the ui has changed now it has this menu and everything and if you minimize you can see this blazerized demo is appearing like this so now why it is appearing like this is because we have implemented the theme which is our third part of the sample application that is this third layout that is cider with header on the top but there is some issue with the implementation so i am not able to implement this particular fixed thing because in the sample code this is done with the nesting of layouts which i don't want to get into because that is some kind of a complex term so for now what we will do that we will implement this particular layout where we have this fixed header like this we will have this fixed header and the slider will appear like this on the top with the header and everything so to implement this what we will do we'll go again into this blazerized demo we'll go in the main layout so in main layout we will remove this thing like header from here and we'll move it inside this like this and we will change this this particular layout slider is like this so we will what we'll do we'll cut this thing and we'll put it like this so once we do this you can see here that it is appearing like this so we have this whole left nav which is being collapsed and we have this fixed header which is coming like this now if you want to implement footer here what we have to do is just we have to in the main layout itself we'll have to go inside this since we have this layout header here so we'll put the layout footer like this here and for now we'll just write your content save it and you can see here that this footer content it is appearing here so this is how we can implement laser eyes in our blazer application we can set up the layout we can set up the header and we can set up the left nav and we can set up the footer so in this video you learned what is blazer eyes how to implement blazer eyes in a blazer application how to set up the layouts of a blazerize application what is sidebar what is horizontal top bar in the next video of this series we will be implementing themes in our blazerize application using blazerize theming support i hope you like this video and if you like this video then please hit that like button subscribe to the channel and share this video with all your blazer enthusiast friends so see you soon in my next video until then take care bye [Music]

Channel: TechieRathore

Views: 2,472

Keywords: blazor, blazor c#, blazor server, .net, c#, server side blazor, blazor server side, blazor 2022, c# blazor, .net blazor, blazor tutorial, dotnet, .net 6, programming, code, blazor .net 6, .net 6 blazor, blazorise, dotnet for all, web development, software design, visual studio, tutorial, training, how to, techierathore, c# training, c# tutorial, .net core, .net 5, linux, coding, .netcore, dot net core, development, microsoft, nick chapsas, iamtimcorey, learn c#, tim corey

Id: YofbV_RfJ6o

Length: 27min 13sec (1633 seconds)

Published: Thu Apr 14 2022