Learn to Build an App with .Net Blazor, Visual Studio 2022, Entity Framework and SQL Server Part 1

hi guys today we're going to learn how to code an app using visual studio 2022 preview dot net blazer server side entity framework and microsoft sql server you start off by launching visual studio 2022 we go create new project and we search for the blazer template and we select blazer server app go next we give the app a name i call it ice 911 assist i'm building an emergency services app in south africa go next on.net 6 preview create so this is stock standard now microsoft blazer it comes with two pages which you can use to test and have a look at how the framework is set up one is the counter and one is the fetch data so if you launch this you get to see how the framework looks by design still starting up okay it's almost there so there we are this is counter this is not using any javascript and this is fetch data this is the webview this is the responsive mobile view okay everything looks good that menu system was by default as well close that so we're going to create a new page now and it's a razor component i'm going to call it my college user information okay so this one will change to my information we take this out for now we don't need it and if you go into the shared folder you'll find the nav menu this is how the menu system is built up take a copy of this and we'll call this my information all right and here we call this user information because the page is called user information but it's specific to the user when he's logged in as in my information so the user information so we go to the user information we'll just border this snippet here and we'll say user information so this is a route that we're connecting to the menu system here so when we load the project it should now load that page which is user information page but the label says my information my information but it's the user information page then we'll continue to add the html to that so the first thing we're going to do is create a div tag and he's got a class of row content and inside this div is another div or the class call md 2 and this will be first name then another div tag which takes an input and he'll have a form level class of form control this class is called md4 there are tutorials on this these div tags and this bootstrap called md you can look at that if you don't understand that but for the others we can continue so this will be surname and this is preferred name which is like a nickname all right so we can launch that see how it looks by giving the class form control we're making it bootstrap enabled which you'll see now forgot my information and that's the bootstrap text boxes and it snaps in first name surname preferred name okay okay now we're going to launch sql server i'm going to create a new database i'll call it ice 911 assist okay then we're going to open up tables and create one new table this is the user information table say user id it's an int gonna make this a primary key and we're gonna go here and make identity specification true so it'll auto increment i'm gonna go first name let me go surname and we're gonna go date created it's a timestamp and we're going to give the day created the default value of getdate i'm going to save that cable is called user in formation gonna refresh and there's a table name all right then we're gonna create a new user for this database over here under security collapse that new login i'm gonna say ice user sql authentication test one two three dollar test one two three dollar remove all this defaulters he maps to ice and his database owner okay say okay okay we'll just give it another name nice user test because of my previous demo the name already exists it's not deleting off nice user test is fine i think that is the one that was complaining about you can delete that hopefully it goes yeah that's gone right so ice user test that's the database ice 911 assist now we go back to visual studio and we set visual studio up for the entity framework so you go tools new get package manager and you get manage and you get packages for solution there's three packages you need to bring in you expand dependencies now this it goes by default on the install tab just flip it to browse and search for design we're looking for microsoft entity framework core.design you just highlight here you take this box and you say install then you say so that's installed it should bring up the packages here that's fine perfect sql server look at the sql server that brings up the framework dot sql server you see install agree to the terms and conditions the user license agreement and then the third package that we need is the tools microsoft entity framework call dot tools then you say install agree so now the three packages are in so the next step now is we don't need this for now we need to build up a command to do the db scaffolding which will bring the database into this project okay so i'm going to open up notepad which will help us type this command out so the command goes like this scaffold db context space server equals to localhost this is the localhost initial catalog equals to this is the name of the database which is ice 911 assist just double check this database name so uppercase is security info is equal to false user id is equal to is this guy logins ice user test nice user test okay and the password was test one two three dollar okay then we say it's gonna move to the next line micro soft dot entity frame work that's more core dot sql server and the output directory i'm going to call it entities that's my preferred naming convention and the context for the representation of the database context is going to be ice 911 assist and we're going to use the minus f flag to force and update every time we update this the database let's hope this works there's no spellings of c1 already server scaffold dash db context servers localhost initial catalog versus security info false user id stat password microsoft dot entity framework core dot sql server output directory all the entities context is iceland assist take that control c then you go to the visual studio tools tools new get package manager console you drop that in and press enter and it should make a connection to the database let's careful the database didn't seem to work what happened here i think we can kill this command tools you get package manager just listen to stop the only way to do this now is to kill the visual studio completely and start it again maybe that'll work but i know what the problem was is a typo open the project up well that's loading will fix this the problem was after test you've got to have an apostrophe a double apostrophe okay let's see what happens i'm gonna grab this command again it's initializing to paste that command in hit enter now it's working this was messing this apostrophe and it broke the whole command there is an error keyword user id not supported it's user space id okay it's building successfully now it's done so if you look here this popped up after it built why is this file here okay so this popped up here that's the the database context which contains all the entities modeled from the database the erm the entity relationship management if you go here that's the table that we created just going to clear this and just minimize it okay just pull the project let's check everything's still working everything still works so this was the page that we were working on right that's the razer component that has the user interface now we need to give it a back-end code base and then plug that into the entity framework and save the user information so we're going to go here and create a new file which is a class new class and we're gonna call it user information base so it sits underneath this file and this is going to have a namespace of user information base and this inherits component model component just checking what it was base then we're going to fix this with the intellisense using microsoft asp.net core components then it needs a default function called protected override task on initialize async and return the base okay cool now we go here and we inherited that class file at inherit user informationbase.userinformationbase that's inherited okay i don't think we need that then we're going to create a function well in the class file first things first in your entities folder here this was the user information entity that came up for the with the entity framework you can just use it directly like this user information let's just resolve this using the entities i prefer an uppercase here get set right and on initialize this is the first thing that happens when the page load is comes to this function you're going to say user information is equal to new user information right so that complex class complex entity or complex type is now initialized to a new right then in the razor page we gonna bind like so user information dot first name just like that okay with the apostrophes inside there so user information the complex type from the database model is accessible to the page to this class file right and then becomes accessible to the page because we're using the inhabits we then bind the user information model first name to this input class we this input element over here right then on surname we do the same thing we go at bind equals to user information dot surname right and preferred name same thing we're binding this entity i think i don't think we created preferred name okay that's a good example now we didn't create preferred name so we need to go back to the database design just insert a column preferred name in varchar50 save that okay go back to the project tools package manager the console i wonder if it will still remember the last command yes it does so we're going to re-scaffold the database with a force update using this minus f and let's check if it works it's building it succeeded cool if you go back here now using information why it does that come up here maybe if i just close it it'll stop doing that here's the column it's come in from the database preferred name we made an update so that's how the minus f works so every time you update your database you run your command and it will do that you run this command you with a minus f all right so back on the laser page we should get this thing now at bind is equal to user information dot preferred name there we are now we need a button for saving so we'll just put a button here and just copy that i don't think i need that we'll just leave it blank and then this should be type is equal to button and i think we can give it value is equal to save right now we give it an event that will fire off when you press save it fires an event to the back end call okay and i think it goes like this on click equals to double apostrophe open and close on bracket pointing to it's kind of like a delegate save user information okay let's just fix that so when you click the button it's going to go to a function at the back end code that says save user information so now i need to go and create that function public void save user information can open and close brackets put a breakpoint here and watch this thing in motion okay let's go so we load the page my information test one test two test three press save and here we are it came into this event save user information if you look at this entity now with the two-way bindings there's test one there's the surname ts2 and there's the preferred name to s3 so it's gonna bind it from the front end the user interface the laser page which is the html it took it from this this binding here and we've got it in the c sharp file and now we can just save it into the database okay so we'll write the code and go ahead and persist it into the database so here in the data folder we can create a file and call it ice 9-1-1 data access layer i think we should call it let's keep it standard although it's lengthy you could use passcode case i prefer it like that ice 911 is this data access layer data access layer it looks neater like this for me i'll go with that i'm going to implement i disposable just leave it blank right so now we're going to write a method we're just going to use it as a void for now but in the next version we'll feedback whether it was successfully saved or not i'm just trying to get to the tutorial save user [Music] info mission okay and save user information takes that entity user information this user information will use the in daily sims to resolve this let's add that package at the top here user information right so we're going to pass in this type from the user interface to the data access layer we're going to go using ice 911 assist this is the db context file okay and call it ice equals new ice db context and when you say i start we now get all the functions available to us and there should be a table in here called user information right you just tab tab the snippets are taking over from the visual studio studio 2022 preview i haven't seen that before and i'm just using it so it took this user information and added it this entity adds it to this table right and then we just say ice dot save changes bang finished now if i go to the database and i do a new query here and i execute there's no data right now we launch this we'll put a breakpoint here there is an error let's fix this error where are you this is the db context here by the way see ice 911 assist is a db context and i'm using the word isdb context there so i see what the error is i think it was the snippet to that should be fine now okay cool let's put it in webview my information first name give me a cool name john john i can't really think of a name right now that's john 1 and john 2. preferred name is john let's make this day with john david right cool so when i press save okay one error we need to call the database layer using ice 911 data access layer del equals to new down just need to resolve this can you come up here we are dissolving so it's not added that package because of the namespace inside here it's probably inside here it's dot data okay let's close this so it's data access layer dot save user information passing in this user info to the back end there we are my information john david john david is his preferred name press save there is john on first name john david on preferred name surname is david exactly what i typed in on the front end i'm going to step into f11 step into this function yes here we are in the data access layer the data access layer okay this is the db context now we're going to add this entity into the database and when we say save it is now gone in right if i go to the database now and query it there's the first entry coming in so i think i'm going to stop the tutorial at this stage the next version of the tutorial we'll work on the validation making this button a little neater and the rest of the fields so thanks for watching it was quite an informative tutorial and see you guys later

Channel: Coding Academy by Ashandra Singh

Views: 10,707

Keywords:

Id: OK1gQnpJxzk

Length: 34min 48sec (2088 seconds)

Published: Tue Aug 03 2021