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

[Music] our next step will be to bring in some nougat packages that will be used throughout this tutorial first let's bring in this package called bogus which we we use to generate some fake data to see the our database we we also need two packages related to Identity one is Microsoft asp.net core identity and Microsoft espnet core identity into framework core and we will need three packages for any framework one is Microsoft any framework core Microsoft anti-frame work Tools in Microsoft any framework or SQL Server so now let's see how we're going to create our login and register pages and for this we're going to use Razer Pages Microsoft doesn't recommend using Razer components which are the building blocks for Blazer applications to handle identity tasks it says that we should use Razer pages instead of Razor components for identity related UI such as registration login logout so we're going to follow Microsoft's approach we're only going to do the logout using a Razer component so you can see how you would be done and let's try to understand why rater Pages use the traditional HTTP request response cycle as you can see in this diagram the client sends a request and waits for the response and that's an independent cycle where the connection is closed after each response Blazer uses signal R to establish the communication between the browser and the server and one of signalr's underlying transport protocols is a websocket this is not the only protocol that signalr uses but this diagram will help us understand the basic concept which is that there is a persistent connection between client and server which allows real-time updates which is one of the biggest advantages of Blazer apps built replace a few extremely fast the problem with this approach is that it introduces security issues since it's not so easy to make sure that the client connecting to signalr is Pro properly authenticated asp.net core identity can rely on cookies and Bearer tokens for managing authentication and sessions and those are designed for the traditional HTTP model so we're going to follow Microsoft's recommendation and use Razer Pages for the implementation of the login in the registry but I think that that's an advantage since we're going to have the opportunity to work with Razer Pages as well even though this is a Blazer tutorial so in our project we're going to create a new folder called areas this is a folder that's recognized automatically by asp.net as a special folder and it's included in the applications routing in execution pipeline you're going to see the importance of areas soon when we do the routing for our login and registering inside that folder we're going to create our first area which will be called identity and inside the identity folder we will create the pages folder which we represent different areas within the identity and this is a folder that's also picked up automatically by asp.net and added to the applications routing and inside this folder I'm creating the accounts folder which will be the name of our sub area then we will add a razor view we do that by right clicking on the folder and adding a scaffolded item and we're choosing razor view empty and we're going to call it identity layout CS HTML and as the name says this is going to be the layout for our identity area and I'm bringing in some code that I have prepared before and it's just your typical HTML template with the head and a body with a little bit of styling in with this render body method being called within the body so this layout is the basic structure that will be fixed and in the place where the render body method is called is where we'll show the content of each individual page then we're gonna add another empty razor View and that's going to be the view Imports and that's where we're going to put all the common using statements that are going to be used across different files in this application and we do this whenever we know that we're going to have repeating using statements and namespaces that will be present in different files so that makes our code more organized which is always a good thing then we have another empty razor View and that will be the view start and that will just Define which file we're going to use as a layout so all these files are created in the pages folder at the same level of the account folder then in the account folder we're going to create a new eraser page which we will call login and we will create another one called register and we can see here that two files actually get created and we're going to see why very soon but first let's have a look at this login.cshtml file we can see a couple of directives the page as we've seen before and the model which at the moment has quite a long name and to avoid that we're going to add everything that's in white to our view inputs file this way in the Cs HTML file all we need to do is to use the name of the model and since we have that in the view Imports we can do the same in the register page and I'm gonna configure this app to redirect the user to the login page if they are not authenticated so in the root of the project I'm going to create a new folder which will be called components and inside this folder I'm going to create a new Razer component and I'm going to call it redirect to login in this file I'm going to inject this class called navigation manager and that's a class that allows us to perform client-side navigation in our app and it does that without causing a full page reload and components have a life cycle that defines various stages during the creation rendering and Disposal so we can use lifecycle methods to run code in different times in this life cycle one of these methods is the on after render which of course runs after the component renders and we use this method by overriding it and calling the base implementation which allows asp.net to perform its own internal operations and that's usually recommended in c-sharp then we're going to call the navigate to method in this navigation manager passing the desired route and if you remember the Razer Pages structure that we've created we created the areas folder and the identity folder inside it which means that the identity can be reached in the URL so it picks up the identity as an area and then inside this identity we have the Pages folder where we can create sub areas so I created the account sub area which is picked up in the URL and inside the account sub area I finally created the page which is the login so the URL is the area the sub area and the page and we can see that this method has as an optional parameter the force load Boolean which forces a page reload and usually we don't want to set that to True since it's not the greatest user experience but we're setting it to True here to force a Reload since we are just trying to render the login page then we're going to use this component in the main layout component which means that every time the user is not authorized they will be redirected to the login page and I'm going to add a using statement to the Imports file so we don't need to use the qualified name for the component and in the identity layout I'm going to add some text as well and try to run the app to see what happens and I get the expected result I get the text in the layout page and the text in the login page before we continue let's clarify what these two files are when we create a raise a page in the login page for example we have a CS HTML file and a CS html.cs file the first we can say is the front end code so anything that the user can see on the screen will be written in that file the Cs file is what we call the code behind and that's where we handle the pages events any processing of data and server-side logic and sometimes there is some conceptual confusion about what pattern razor Pages belongs to it's often thought that Razer Pages follow the mvvm pattern but that's not the case here we don't have a view model we could say that Razer pages is A variation of MVC but this can get quite controversial very quickly and I'm not here to start these types of debate what we need to know at this stage is that the code behind us needs to inherit from the page model class so let's start working on our login page I'm going to copy and paste some code that I had prepared before but don't run away don't get scared all of this code is just HTML with a lot of bootstrap classes bootstrap comes out of the box with blazer so I'm gonna use it to style this app but of course you can use other Solutions like Tailwind or pure CSS I haven't even written this code myself I found a template that I liked and pasted it into this project so the code that matters to us will be inside this card body div so we're going to create a new form using the form tag and we can see that this tag is in green which means that it's recognized as razor syntax which by the way be careful not to confuse Razer syntax with Razer Pages razor syntax is a markup syntax used in razor Pages MVC and Blazer and it provides a way to mix server-side code with HTML and Razer pages is essentially a programming model for building web applications I know sometimes Microsoft makes things very confusing when naming things so it's good that we know exactly what we're talking about so I'm giving this form an ID account and the method will be post which means that this form will try to execute an HTTP post request inside the form we're going to create a div where we'll show any validation errors and that's the purpose of this ASP validation summary attribute and we are setting it to model only which means that you won't show the errors related to each property then we'll create a second div with the form floating class which is a bootstrap class and ability style for the margin and then we create an input tag which will have on asp4 attribute and here we will link this input to a property of the code behind model so we still haven't created that model in the code behind file let's create a new class which will serve as our model so we're going to call it input model and it will have two properties the email and the password and we're going to add data annotations to these properties and they will also help with validation it means that our form will always expect an email and a password and we will expect the email and the password to have the appropriate shape that we configure then we need to connect this model with the front end creating a property in this login model and using the bind property attribute and back in the view we can now associate the input with the properties using the asp4 attribute and we also add the form control class to this input in the autocomplete and required attributes and to style this input with a floating label we're going to put it under the input and I added a bootstrap class incorrectly here it should be class equals double quotes form label but you can find it correctly in the GitHub repository if you are copying the code from there and we also need the placeholder attribute otherwise the floating label won't work so let's see how our form looks so far we can see our input with the floating label and using the browser's autocomplete capability so we're going to duplicate this code for the password input and modify the code accordingly and we will also create a div for the button and it will be a submit button and it will have a few bootstrap classes as well so let's see again how our form looks and we have a decent looking form with a button of course nothing works now since this is a form that will send a post request we need to create an on post async method as per the Razer Pages convention this method will be automatically called when a form in this model is submitted and we want to make it asynchronous so for that we need to return a task and it's my preference to always return an action result because it provides a range of possible return types so it's an interface that gives us a lot of flexibility and right now we're returning the page itself but that doesn't make a lot of sense so we will change that soon but if we run the app and submit the form we can hover over the input and see that our properties work correctly populated which means that the data binding is working but now we're going to create the register form and it's going to be pretty much identical to the login form and I'm just putting them in two files because usually the register form will be different from the login form so at the moment in the register form we don't have any data binding so we need to provide that so we're gonna add that same bind property with an input property to the register model and of course we need to change the content of the button to register and since people will be initially redirected to the login page we need to add a way for them to reach the register page if they don't have an account so I'm adding another div and it will have some text asking the user if they have an account and if they don't we will provide a link for them to reach the register form and we can simply create an a tag that references the URL for the register form and we're going to do something similar for the register form we will have a link to the login form in case they accidentally click on the register link and they already have an account they need to have a way to go back so let's see if it works and we can easily navigate from the login to the register form and vice versa so that's it in the next lesson we're going to bring Entity framework into the picture to help us create our database and register and log in our users [Music]

Channel: The C# Academy

Views: 2,740

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

Id: SZb1O_3wPT0

Length: 18min 12sec (1092 seconds)

Published: Sun Jul 16 2023