Getting started with Blazor in Visual Studio

if you want to learn how to build a dynamic web app using only c-sharp with no JavaScript then you have come to the right place hello my name is Alexander and I will learn you how to get started with blazer but before we can begin coding we just need to have a good understanding of what Blazer actually is and how it works under the hood so as you might know from JavaScript you can use it directly in the browser without any server listening to it you can also use Ajax calls to fetch data from the database without having to reload the page when doing an Ajax call JavaScript will handle the response and just reorder the Dom for you when you do something like document get element by ID and change the inner HTML however we have to throw that idea away now because now Blazer will handle it all for us and it's all just by using C sharp and this can be done because the browser now supports almost native C sharp but what do I mean with almost native seizure to answer that we need to go back to 2019 where w3c which is the worldwide Web Consortium made it possible to use a fourth language in the browser so now beside HTML CSS and JavaScript we are now able to use what's called webassembly and by adding that fourth language we do now have a low level programming language that we can compile to webassembly Simply enable us to take our application and make it binary so webassembly can display it in the browser and we really don't have to understand it because it's all under the hood of Blazer and that's also why webassembly is out of the scope for this video because it's a whole topic for itself we just need to know that webassembly is the reason that we can use Blazer in the first place to be able to follow along in this video you need to have just a bit of understanding of how asp.net core works or at least just some experience with c-sharp but when saying that you don't have to be scared away maybe if you have experience from another programming language then you might be good in this video I will use.net 6 inside Visual Studio 2022 the Community Edition so if you want to follow along then you have to install these I will put Link in the description below it should not take a long time to install depending on your computer of course but for now let's go and open Visual Studio and let's create a new product object so now I have bezel Studio 2022 open and I want to go and create a new project and inside this window I want to choose Blazer web assembly app and if you cannot find it you can go up and search for a template and let's just type Blazer and there comes place a webassembly web app but if you don't get it in the results here then don't worry I will show you in just a moment how you will get it but for now I will just hit next and we will give the project a name and let's say my first place project and just hit next and inside this window we have the framework we need to choose and I will just choose the.net 6 framework so for you to follow along and don't get any weird arrows I will recommend that you also use net 6 and we don't want to have any authentication type it's okay to configure the https and we don't want to use asp.net core hosted and we don't want to use this Progressive web application so now we just hit create if you didn't got the Blazer webassembly app showing in the projects then just go and open a normal asp.net core project or whatever you want to open just so you come into this window where you can click on tools and say get tools and features and inside the tools and features you will enable the asp.net and web development and you also want to enable the.net desktop development when you have done that you should be able to select the Blazer webassembly app and come to this step where we close this and we run the application to see what is already created for us so let's hit the run application button when running the project we get this default web page where we have a home button which is this page we have a calendar where we can click a button and it will count up and it's all by using C sharp and at last we have this fetch data where it simulates that it has some data that it fetched from another place but right now it's actually just some static data that is hard coded in the project but to start with let's go and close this and let's see how the counter Works inside the code so let's just close this and as you can see on the right side here we have the solution Explorer where the most important things right now is under the pages and as you can see we have a counter.racer page we have a fixed data.racer and we have a index.razer and that's actually all the pages that we just looked at and if you're wondering where the menu is because this is just the pages that we show then it's under this shared folder where we have the main layout and we have the navigation menu so just like asp.net core we have a shared folder with all the pages or all the stuff that we want to have on multiple Pages just like the main layout if we go into the main layout you can actually see that we have a body so again it's actually just like asp.net core that when a page is loading it will just load the main layout file every time a new page is loaded if we look at the top of this file we have the sidebar where we include the nav menu and this is one of the powerful things in place that we can just say nav menu then it will know that it is the nav menu dot Razer file that we want to include because it has the same name but let's go and try to look at the calendar so let's open the counter.racer file and inside here we can see the magic where we only have to use C sharp to actually increment the number or the counter just by clicking a button so as you can see here first we say that this should be the URL and this is a page so this is going to be the route to this page then we include a page title a H1 tag and then we display the actual counter right here and then the increment button down here so this is pretty standard way to do it that we have all the HTML and markup right here and down under we have the code behind which is now not in its own code behind file but it is just included in our Razer page but the way all this works is that we first have to make a property where we start to say that the current count should be equal to zero and then every time we hit this method called increment count it will count up by one and the way we trigger this method is just by saying on click on the button and then just called what the method is called so before Blazer what we would have to do was to in JavaScript go and create a on click button just like we do right here and then just run a function in JavaScript where we also would have a property or just a variable like this but instead of just counting it up we would have to count it up and then add it to the Dom by saying document dot get element by ID dot inner HTML and set that equal to the current count but what you could do now was just to play around with this page a bit like I will try to increase this not just with one but maybe with 10 instead of one so let's go and say it should be equal to the current count Plus 10. and let's run this application and let's go to the counter page and click me and now you can see it will increment by 10. every time we click the button but let's try to go back to the home page and as you can see now we have a headline and we have some paragraph and we have a box with some text in it but let's try to include the counter inside our home page and the way we do that is to go to our index page index.racer file and just like we saw with the nav menu inside our layouts file we can just include the counter right here and say counter and close it not like this but like this and let's try to run this and now you can see that we included the counter on the front page so if we click me you can see that it still works and if we click on the counter it would also be here so Blazer is making it very simple to include small elements with all the functionality that you already made just where you want it to be but now let's say that we don't want to have this counter to count the same interval as the counter on the counter page so what I mean by that is when we click this we just want this to be increasing by one and this should be increasing by 10. so let's go back to the code and instead of writing 10 here we will make a new variable called interval and then we want to create this variable up here like a new property and we call it public and it should be an integer and we call it interval and let's just say that the default interval should be 1. and then let's put a data annotation called parameter and actually for this to work we have to include the get and set method in here like this and then what we can do now is actually when we call the counter on our front page we can actually write interval and set it to let's say 10. so whenever the counter is called from the front page now the interval will be 10 or else if we delete this it would be the default value that was 1. and what we have to remember here is that when we want to use this type of parameter we need to specify this data annotation parameter above our property that we want to have to be a parameter but now let's go and try and test this so let's run the application then let's go and try to click on the click me button and as you can see it increments by 10 every time we click it and when we go to the counters page it will increment by one so it's actually a pretty powerful way to manipulate or insert any parameter you want on any pages that you want by actually reusing the code that you have already done but now let's go and take a look at the fetch Data Page and as you can see we already have a lot of data that is displayed nice in this table but as I mentioned earlier this data is actually just hard coded and what I mean by that is that it's not fetched from a actual database it's fetched from a Json file so what we'll do now is to actually see the code behind this table and then we will do so this is not just fetched from a static Json file but from an actual database so let's close this and go to the pages folder where we have our Fates data.razer page and just like the counter page we Define what the URL of this page is on the top but a new thing on this page is that we dependency inject our HTTP clients so that we can use it in the code down here and then we have our actual markup right here in HTML and then we have the code behind down here and the way this page and the counter page and the index page is built up is the general way that we will build up a page in Blazer so it will be good to get used to it but it's of course also very simple so I don't think that would be a problem but if we look at the HTML then we can see that we again have a page title we have a H1 headline we have a paragraph and then we have a forecast a variable where when it says that it when it's no then it will just show that something is loading but else it will display the forecast so the first thing it do is that it creates a table for us with a lot of headings in the table and then we for each every row element in the forecast array that we get here you could also just make a list but it's just what you prefer but as we can see down in the code right here they're going to make a an array that's named forecast and a new thing I'll just zoom in a little bit but the new thing is that we don't say on get async anymore we say on initialized async now so when the page is loaded we will run this method instead of an on get method and because this is run async we can do this with the forecast where we say when it's equal to no it's loading because then it has no value yet and then when it gets value it will automatically say that this is not null anymore and then it will display this instead so that actually also show how powerful Blazer is now but when this page is loading what we are going to say is that it will make a HTTP client request where we say we get from Json async so it expects some kind of Json and we can do it async because the method is also async and it's just returning a task and then we say that the object that it want to have in return is the weather forecast and it should be an array of them and then it looks into this file and of course we can take this file and just replace it with a URL so first of all we have to install a SQL server on our computer and I will just install the SQL Server from Microsoft I will put this link in the description and then I want to scroll down and download this Express Edition so I say download now I don't have this installed on my PC and I will just make a basic installation and we will accept the terms then we want to say install and just take the time it will take so now that the SQL Server 2029 Express Edition is installed I also want to install SS MS so that we actually can see inside the database because this is just the server so we have no access to look into the database without actually making some code that would look into the connection string here so let's click install ssms then we get to this Microsoft page where we want to scroll a bit down and click this free download for SQL Server management Studio and now when the download is complete I will click it then we want to hit install and when it's done we just hit close and now if you hit your Windows key and type ssms you can see that we have Microsoft SQL Server management Studio 80. so let's open that and when you open the server management Studio you get this pop-up box where you just wanna hit connect so now as you can see here in our object Explorer we have databases and then we have system databases where we have our actual databases right now and we're just going to use the master database so if we expand that we can see that it has some tables so let's go and right click the tables folder and we hit new and table so this will create a new table for us and then we want to go back to visual studio to see how the model look so we have a date a temperature in celsius and we have a summary and then a temperature in fahrenheit so let's go back and we will say date and this is a date time then we have temperature in celsius which was a int then we had a summary and that will be a n cha that's fine and let's say 100 characters and then we have the temperature in fahrenheit which was also a integer so next we will right click and say properties so that we can change the name of the table and in our case it would be weather forecast and then we want to go and click this save icon so we save the weather forecast table and let's update the Explorer and then we can see down here that we have the weather forecast table so if we right click and say select top 1000 rows we can see that we have our table here with all our columns so now we just want to put some data inside it and the way we do that is to go to new query and I will just copy and paste some code I have that you can also copy and paste by going to my blog in the link in the description and this is the code and what it will do is that it will just insert six rows into our weather forecast and it's actually just the same data that was being used inside our Blazer template but just with another additional row right here where I say this is from our own database and that's just so we can see that the data is actually coming from the database and not the Json file but to actually insert the rows we have to say execute and now you can see that six rows has been affected so if we go back to this top thousand rows and say execute again we can now see that we have all our six rows so now we have to go back to our code to connect to this SQL database and because this is Ms SQL so Microsoft's own database system it is very easy to connect to the.net framework so let's minimize this one and let's just close our application and also close this one and we will go to the program.cs file so to do it the easy way we want to scaffold all the code into our project and the way we can do that is by using Entity framework so we will have to install that so let's go to tools and to Nuke it package manager and inside this manage nougat package for solution then we get this window and then we want to browse and then type Microsoft Entity framework SQL server and that's the first one we want to install so if I just scroll up it will be right here and then I will just select the project we want to install it to it is my first Blazer project and then install accepting the license and then it's installed and the next thing we want to install is not the SQL server but it's the tools so it's this one and again we just want to install it and accept the license then down here at the bottom of Visual Studio we want to open the package manager console and then we want to type scaffold the DB context and then our connection string then we will actually get from the installation of the express edition of the SQL Server so as you can see here the the top string here is the connection string and don't worry if you don't have it you can also just copy and paste this from my block and actually you can just I will just put this inside my blog so you can go and grab this because after we say that we want to use this connection string we are saying that we also want to use SQL Server The Entity frame framework call package that we just downloaded and what we want to Output is a folder called Data DB and inside this data DB we will have our context file so I'll just hit enter and I actually got an error right here but I think I know why so I think maybe the problem is in the connection string if we hit up again and we say this localhost should not be localhost but our name of our desktop where if you right click and say properties you can just go and copy and paste it from from this field so let's close this again and let's try this one out and we actually get the same error so there must be something very essential that I didn't do so this would work so I'll just pause the video and then I will try to figure out why this is happening and then I will come back with an answer so I did a lot of research on this era and it really looks like that Microsoft don't even know why this is happening and it even happened in Visual Studio 2019 and there's still no fix for it the only fix that we can do is to go and create a new project because then it will not happen it is something with this project that has gone wrong and on stack Overflow and other forums there's really no solution to this problem other than if you have made some pages then you have to copy and paste it into a new project so I think that's just what we're going to do lucky for us that we haven't even made some coding site the project so we can actually just go and create a new project and let's try to call it the same so we will say create new project and it's a Blazer and now when I'm in here I actually know what the problem was it was that we was using a Blazer whip assembly app that we should not use we should use the Blazer server App instead because the Blazer web assembly app is for offline apps and places server apps is for having a server that actually can connect to the Internet so I apologize the struggle with this issue but hopefully we learned something both that it's very important to use the Blazer server App instead so let's choose that and say next and let's call the application for my first laser project and let's call it two because we already have a first edition so let's say next and inside here it's okay so let's just hit create and now that the project is created I will go and install the nuget packages again and then we will run the command again in the package manager console so now I installed the two nuget packages the SQL server and the tools and then we will paste in the command to scaffold our DB context so let's run this and this time it says it's built successfully and it actually created this master context for us so if I just zoom out a bit we can see that we have our table right here the weather forecasts table and we have a connection here and we really don't have to touch this master context file because it's just automatically generated we have scaffolded it now so it should be set up as it should but if we go over to our solution Explorer we can see that we now have a data DB folder and if we expand that we can see that we have our Master context which is this file and we also have a weather forecast model so now we have our date temperature and Celsius summary and the temperature in fahrenheit so what we can do now is to go to pages and as you can see because this is a Blazer server app we have some extra pages included here we have the host layout and error but we still have our three Blazer files from before so we will just go to the fetch data and let's scroll down and as you might notice it's a little bit different here because it's not from a Json file but this is actually also hard coded because if we look in the data folder we have this weather forecast service where it's getting its data from so if we look at that one you can see we have summaries it's all hard-coded and we got some dates and temperature which is just random here so we don't want to use that now what we actually want to use is our own database connection so up here we are saying that we're using the data inside our project which is this folder and we don't want to use the weather forecast from that folder so we have to remove this and the same with this service we don't want to inject this service and instead we actually want to use our own folder we just scaffold it so we're saying using and then the project name and then we say data DB because that's the folder we have scaffold and an important thing is also that we want to use Microsoft's Entity framework call because else then we don't have all the functionality to get things from the database and a final thing is that we want to inject an interface that's called idb context Factory and this should take our Master context and then we can give it a name we could say content Factory so now that we have our not content but context Factory we can scroll down to the code and then we can say that we want to have a variable called DB which should take the context Factory and let's create a DB context so now we can use this DB with link so let's go and say that our forecasts this variable which is an array but we don't want to have it to be an array I want to have it to list so I'll just delete this and remove this one and say list and it's a list of weather forecasts and when we do this we have to say that it should be a new list of weather forecasts and finally we can go down and say that the forecast should be equal to DB and then we have our name which is weather and I can see it's not coming through but that's because I forgot to call this method so now we can say DB Dot weather forecasts and we say that this should be to a list async and then we want to await this one just like this and I actually also removed the code that was here at the date because now we're just going to display the date as it is so let's try to test this and let's click fetch data and as we can see down here we have a another error and unhandle exception has occurred we can see the error in the tool so we hit F12 and inside here we can see that we now have a error message and it says that there's no registered service of type Microsoft Entity framework call and this interface that we are using and the reason that this is crashing and it don't work is because if we go out again and we go to the program.cs file we did not include our context Factory to our Builders services so what we're going to do is to say Builder dot services and here we actually want to write DB context Factory but since it's a part of Entity framework we have to say using Microsoft and then use Entity framework call so now we can say DB and we have this add DB context Factory and inside that we want to type our Master context and then just close it off and just to keep things clean we can get rid of this weather forecast service and the data using so now if we run this again it should work now and let's try to click on fetch data and now it actually get the data from our own database and we can see that by the last row here because that's not what was in the default data that was displayed in the template before but I think this is a good time to stop and hopefully I will make a part two of this Blazer introduction maybe adding some crowd functionality to this so we can create new weather forecasts and maybe a search bar so we could search for summary and get all the let's say freezing if we were searching for free in a search bar then it would just pop up with these and the powerful thing about Blazer is that you don't have to reload the page to do that because now c-sharp help us and the way that Blazer interact with the browser with webassembly so that make it possible for us to make everything on the Fly inside the browser without refreshing the page but I hope you learned something please like And subscribe if you like the video and else just have a nice day bye

Channel: ZetBit

Views: 2,940

Keywords: getting started with blazor, getting started iwth blazor, getting started with blazor webassembly, getting started iwth blazor webassembly, Blazor, introduction to blazor, learn blazor, blazor with visual studio 2022, learning blazor, learn blazor with visual studio 2022, blazor webassembly

Id: Iz80PTeoZqQ

Length: 32min 53sec (1973 seconds)

Published: Thu Nov 03 2022