Employee Management System w/ Blazor Server, Entity Framework Core & ASP.NET Core Identity - Part 1

hello everyone this is Pablo from the c-sharp academy we're going to build an employee management system using the full stack technology that everyone is talking about Blazer this is a complete tutorial where we're also going to show you how to do authentication in authorization using asp.net identity Entity framework with SQL server for our data solution and bootstrap to help us create a nice looking user interface first we're going to create a login page which anyone that's not authorized will see when they try to navigate into the website users will be able to register and log in then we will see how we can get the data from the database and present in nice looking table and we we also have a filter that will update the table every time we add a new character then we will see how we can add a new employee and we will see how we can create a model so we can display success or error messages then we will see how we can delete an employee where we'll be presented with a confirmation model next we will create the update employee functionality and we'll learn how to handle the the login out of a user I'm very excited to be teaching this Blazer tutorial it's one of my favorite Technologies to work with and we will be providing the entire code for this application for free but that's enough talk it's time to get started so let's open Visual Studio and click on create new project then we're going to choose Blazer server app and click on next and in the next window let's choose a name for our app and where it's going to live and click on next and in the additional information window you can leave everything as is you can choose none for authentication type because we're going to implement it from scratch and then click on create and once the project is created you're going to see the initial folder structure for a Blazer server application and if we run our project to make sure everything works we're going to see our left menu with the counter which is the basic Blazer app that comes out of the box and if you've never created a Blazer app before I suggest you do Microsoft's tutorial on blazer for absolute beginners there is a link to this tutorial in the video's description below we're going to try to explain as much as we can but we're going to have a few pieces of Technology working together in this app and it might be too complex if this is your first time working with blazer so our first step will be to do a cleanup of this app that's a program that offers a very basic weather forecast service and we are not interested in any of that so let's delete everything we don't need and start from scratch so let's go to the index.razer component and delete everything except for the page directive because this is what defines what URL is associated with that component and this means that when someone navigates into the root URL which is default slash this will be the displayed page and we will also delete this fetch Data Page and this counter page in the nav menu we're going to delete the links to these two pages and in the data folder we are going to delete both files then in the main layout we're going to delete the top bar which contains a link to an about page and we won't need that that weather forecast service was registered in our program.cs and we can delete that and also clean up the unused using statements and we can also get rid of this error page we won't be needing this for our application and if we run the app now we can see a blank canvas we can start everything from scratch now we're going to start working on the app.razer component which is the entry point for a Blazer server app and where we can add configuration such as the layout that we're going to use and the applications routing behaviors we're going to add a tag related to authentication and that's the cascading authentication State Tag this tag makes sure that the entire application is aware of the authentication State let's have a closer look at how this tag Works behind the scenes I'm using a tool called IO spy to inspect the Intermediate Language code that this code compiles to so on the left side I can click on the app component in on the right side I can see a big tree of elements and I'll click on that cascading authentication State type and we can see that this type has a property called current authentication State task and if we click on the authentication State type we can see that it has a property called user which is keeping track of registered and authenticated users and of course it knows if there are no users which is the case now then in the main layout we're going to wrap this main div in an authorized view tag and inside this view we're going to add an authorized tag and move the main div into it and we we also have a not authorized tag which is what people will see when they are not authorized so since we don't have a user at the moment if we run the app we are taking straight away into this not authorized page that's because the entire app is wrapped by that authorized View and of course that doesn't have to be the case you can just restrict access to a particular area of your app so let's change the code here to illustrate that I'm gonna wrap just this main tag into the authorized view which means that people will be able to see the navigation menu even when not authorized so let's see if that's going to work in this case the restricted area is just the body of the app but unauthorized users can still view the main menu but let's go back to the code that we had before in this app the users won't be able to see anything unless they are authorized and I'm also changing the page title so that it shows only tcsa systems which is the name of our imaginary company so that's it for now in the next lesson we're gonna see how we can register and login users into this app [Music] foreign

Channel: The C# Academy

Views: 1,940

Keywords: c#, beginners, .net, absolute beginners, tutorial, learn to code, coding tutorial

Id: xYmBAkfTuaQ

Length: 7min 32sec (452 seconds)

Published: Fri Jul 14 2023